在网页设计中,`
html
body {
background-color: f0f0f0;
font-family: Arial, sans-serif;
h1 {
color: navy;
text-align: center;
这是一个使用内嵌样式的示例。
通过 `media` 属性为不同设备定义样式:
html
/ 默认屏幕样式 /
/ 打印时生效的样式 /
body { font-size: 12pt; }
/ 屏幕宽度 ≤600px 时生效 /
menu { display: none; }
⚠️ 注意:`scoped` 属性已被废弃,现代浏览器不再支持。
html
/ 仅作用于父元素及其子元素 /
p { color: red; }
这段文字是红色的(仅当浏览器支持 scoped 时)。
结合 JavaScript 动态修改样式:
html
theme { background: white; }
// 通过 JS 修改样式
document.getElementById('dynamic-style').innerHTML = `
theme { background: black; color: white; }
`;
1. 优先级:
调整浏览器宽度查看效果!