CSS 语法规则

CSS 的语法很简单，规则只有一种形式，把这条规则拆开，每个零件都讲清楚，以后写任何样式都不怕。

一条规则长什么样

p {
  color: red;
  font-size: 16px;
}

这条规则分两大部分。最前面的 p 是选择器，它负责”选中谁”，选中的是页面上所有的 p 元素。花括号括起来的整块是声明块，负责”怎么变”，里面装的是一条条声明。

声明的组成

一条声明由三部分组成，属性名、冒号、属性值，最后以分号结尾。

color: red;

color 是属性名，表示这条声明管的是文字颜色。冒号用来分隔属性名和值。red 是属性值，值可以是关键字，也可以是数字、颜色、长度这些，具体由属性决定。分号表示这条声明结束，是必须写的，漏掉分号，后面的声明会连在一起被浏览器误读。

一个声明块里可以写多条声明，一条一行是习惯，不是必须。

p {
  color: red;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}

最后一条声明结尾的分号可以省，但建议都写上，以后往里加新声明时不容易出错。

注释

CSS 的注释用斜杠加星号包起来，/* ... */，注释可以占一整行，也可以跟在代码后面。

/* 这是注释，浏览器不会执行 */
p {
  color: red; /* 把段落文字变成红色 */
}

编辑器里通常有快捷键，选中代码按 Ctrl 加斜杠就能快速注释或取消注释。注释写给自己看，也写给同事看，复杂的规则上面配一句注释，是很好的习惯。但注意，CSS 的注释只有这一种写法，别用 HTML 的 <!-- --> 来注释 CSS，那会被当成普通内容。

大小写与空格

CSS 对大小写不怎么敏感，COLOR: RED 和 color: red 效果一样，但社区约定俗成全用小写，保持统一。有两个例外要记住，字体名和某些属性值要区分大小写，比如 font-family: Arial，这里 Arial 首字母大写是它本来的名字，写错就匹配不上。

空格的处理规则很简单，语法结构里的空格随意，你爱怎么排就怎么排。但属性值内部，比如 font-family: Arial, sans-serif，逗号后面的空格只是排版，真正的分隔符是逗号。还有一种情况，值里的空格是有意义的，比如 border: 1px solid #ccc，这里每个空格都是在分隔不同的值部分，不能乱删。

新手常见错误

最常见的三个错。漏分号，两条声明连在一起，第二条经常失效。拼写错误，比如 background 少写一个字母，浏览器不报错，只是这条声明静默失效，很难发现，写代码时可以多用编辑器的自动补全。用了中文标点，冒号或分号写成全角的，一样是静默失效，输入法没切过来时最容易犯。

小结

选择器选元素，声明块写样式，声明由属性名、冒号、值、分号组成，注释用星号斜杠，全小写书写，这就是 CSS 语法的全部。规则本身不难，难的是”选谁”，下一篇开始讲选择器，那才是 CSS 真正的主角。