How CSS is structured
@规则
CSS 的 @rules
(读作“at-rules”)是一些特殊的规则,提供了关于 CSS 应该执行什么或如何表现的指令。有些@规则很简单,只有一个关键词和一个值。例如,@import
将一个样式表导入另一个 CSS 样式表:
@import "styles2.css";
你可能遇到的一个常见的@规则是 @media
,它被用来创建媒体查询。媒体查询使用条件逻辑来应用 CSS 样式。
在下面的例子中,样式表为 <body>
元素定义了一个默认的粉红色背景。然而,如果浏览器的视口宽于 30em,接下来的媒体查询则定义了蓝色背景。
body {
background-color: pink;
}
@media (min-width: 30em) {
body {
background-color: blue;
}
}
简写属性
一些属性,如 font
、background
、padding
、border
和 margin
等属性称为简写属性。它们允许在一行中设置多个属性值,从而节省时间并使代码更整洁。
例如,这一行代码:
/* 在像 padding 和 margin 这样的 4 值简写语法中,
数值的应用顺序是上、右、下、左(从顶部顺时针方向)。
也有其他的简写类型,例如 2 值简写,
它为顶部/底部设置 padding/margin,然后是左侧/右侧 */
padding: 10px 15px 15px 5px;
与这四行代码是等价的:
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
这一行代码:
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
与这五行代码是等价的:
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
警告
警告: 使用 CSS 简写属性的一个不太明显的方面是省略的值如何重置。一个没有在 CSS 简写属性中指定的值会恢复到它的初始值。这意味着 CSS 简写属性中的省略可以覆盖之前设置的值。
注释
CSS 中的注释以 /*
开头,以 */
结尾。
/*.special {
color: red;
}*/
p {
color: blue;
}
/* 处理基本元素样式 */
/* -------------------------------------------------------------------------------------------- */
body {
font:
1em/150% Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (min-width: 70em) {
/* 在更大的屏幕或窗口中提高全局的字体大小以提高可读性 */
body {
font-size: 130%;
}
}
h1 {
font-size: 1.5em;
}
/* 处理在 DOM 中嵌套的特殊元素 */
/* -------------------------------------------------------------------------------------------- */
div p,
#id:first-line {
background-color: red;
border-radius: 3px;
}
div p {
margin: 0;
padding: 1em;
}
div p + p {
padding-top: 0;
}