千万不要被CSS 语法这个高大上的名字吓坏，CSS 语法其实非常简单。
CSS 文档由语句和注释构成，其中语句分为两种类型：样式规则语句，@规则语句。如下图所示。
样式规则语句定义 HTML 文档显示时的布局和 HTML 元素的外观。如 p {color:red;} 是一条样式规则语句，用于将段落文字的颜色设置为红色。
@规则语句定义特殊的处理规则。如 @import “sub.css” 是一条@规则语句，用于在一个 css 文件中引入另外一个 css 文件。
本文重点介绍样式规则语句的语法。
1. 样式规则语句
样式规则语句由选择器和样式定义块组成。选择器解决谁的问题，样式定义块解决看起来什么样的问题，它们合在一起解决谁看起来什么样的问题。
选择器用于选择要施加样式的 HTML 元素，样式定义块定义了被选中元素的外观。样式定义块以 { 开始，以 } 结束。{ 和 } 之间定义了元素的一个或多个属性，每个属性由属性名和属性值组成。属性名和属性值之间由 : 分隔，属性之间由 ; 分隔。样式规则语句的基本构成如下图所示。
1.1 一次设置多个选择器的同名属性
可以一次设置多个选择器的同名属性，选择器之间以 , 分隔，示例如下。
1 | h1,h2 {color: red;} |
上面的语句将 h1 、h2 元素的颜色设置为红色。
1.2 一次设置一个选择器的多个属性
可以一次设置一个选择器的多个属性，属性之间以;相隔，示例如下。
1 | h1 {color: red; font-size: 12px;} |
上面的语句将 <h1> 元素的颜色设置为红色，字体大小设置为12px。
2. 注释
CSS 文档的注释以 /* 开始，以 */ 结束。这一点和 C 语言是一样的。注释可以增加 CSS 文档的可读性，是一种好的编程习惯。尽管 CSS 不是一种真正意义上的编程语言，但这个注释功能还是值得表扬的。下面是 CSS 文档注释的示例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0.3em; } /* Inline code */ p { padding: .1em; border-radius: .3em; white-space: normal; } |
3. 大小写不敏感
CSS 的语法是大小写不敏感的，因此 body {color:red;} 和 BODY {Color:Red} 是等价的。
4. 关键词用法
CSS 规范定义了一组关键词，如 red、yellow、thin、medium等。关键词在使用的时候不要加引号。如 p {color:red;} 是正确的，而 p {color:”red”;} 是错误的。
5. 总结
本文介绍了 CSS 文档的构成、样式规则语句的语法、如何添加注释、关键词使用方法等几个主题。
同时本文还提到了 CSS 的两个重要概念：
- CSS 选择器
- CSS @规则
总的来说 CSS 语法简洁，易上手。另外多看看别人写的 CSS 对理解 CSS 语法也是有极大帮助的。
