优先级
CSS 语言有一些规则来控制在发生冲突的情况下哪个选择器更强大。这些规则被称为层叠（cascade）和优先级（specificity）。在下面的代码块中，我们为 p 选择器定义了两条规则，但段落文本将是蓝色的。这是因为将段落文本设置为蓝色的声明在样式表的后面出现。后面的样式会替换样式表中较早出现的冲突样式。这就是层叠规则。
函数
.outer {
border: 5px solid black;
}
.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}函数由函数名和括号组成，括号内是函数的值。在上面 calc() 的例子中，这些值定义了这个盒子的宽度为包含块宽度的 90%，减去 30 像素
transform: rotate(0.8turn);@ 规则
提供了关于 CSS 应该执行什么或如何表现的指令
有些@规则很简单，只有一个关键词和一个值。例如，@import 将一个样式表导入另一个 CSS 样式表
@import "styles2.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;