2.1 剖析CSS规则

规则实际上就是一条完整的CSS指令。规则声明了要修改的元素和要应用给该元素的样式。

下面就是一条CSS规则，它可以把段落的文本设置为红色。

  1. p {color:red;}

把它应用给以下HTML标记

  1. <p>This text is very important!</p>

这个段落的文本就会显示为红色，如图2-1所示。

enter image description here

图2-1 简单的CSS标签选择符给HTML段落文本添加颜色

把以上代码放在我们的HTML5模板中，就是这样。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=”utf-8” />
  5.     <title>HTML5 Template</title>
  6.     <style>
  7.         /*CSS样式要嵌入在页面head元素中的<style>标签里*/
  8.         p {color:red;}        
  9.     </style>
  10. </head>
  11. <body>
  12.     <!-- HTML元素放在<body>标签中 -->
  13.     <p>This text is very important!</p>
  14. </body>
  15. </html>

这个HTML模板以及本书所有代码示例，都可以到这里下载：http://www.stylinwithcss.com。

为文档添加样式的三种方法

有三种方法可以把CSS添加到网页中，分别是写在元素标签里（也叫行内样式）、写在标签里（也叫嵌入样式）和写在单独的CSS样式表中（也叫链接样式）。

行内样式

行内样式是写在特定HTML标签的style属性里的，比如：

  1. <p>This paragraph simply takes on the browser's default paragraph style.</p>
  2. <p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>

行内样式的作用范围非常有限。行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。

嵌入样式

嵌入的CSS样式是放在HTML文档的head元素中的，比如：

  1. <head>
  2.     <!— 其他head元素（如meta、title）放在这里 —>
  3.     <style type="text/css">
  4.         h1 {font-size:16px;}
  5.         p {color:blue;}
  6.     </style>
  7. </head>

嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖。像本书前面例子中那样使用嵌入方式为某个组件（比如菜单）设计样式是很方便的，因为HTML和CSS同在一页，可以互相参照。但是，等到CSS样式设计完毕，组件功能齐备之后，还是应该把相应的样式转移到外部样式表，以便其他页面也能共用相同的样式。

链接样式

在创建包含多个页面的网站时，需要把样式集中在一个单独的文件里，这个文件就叫样式表。样式表其实就是一个扩展名为.css的文本文件。可以在任意多个HTML页面中链接同一个样式表文件，每个页面中只需加入类似下面的这一行代码即可：

  1. <link href="styles.css" rel="stylesheet" type="text/css" />

链接样式的作用范围可以是整个网站。只要使用标签把样式表链接到每个页面，相应的页面就可以使用其中的样式。随后，只要修改了样式表中的样式，改动就会在所有被选中的元素上体现出来，无论这个元素在哪个页面里。这样，既可以做到全站页面外观统一，又便于整站样式更新。

除了以上三种为页面添加样式的方法，还有一种在样式表中链接其他样式表的方法，那就应用@import指令（是一种at规则）：

  1. @import url(css/styles2.css)

要注意的是，@import指令必须出现在样式表中其他样式之前，否则@import引用的样式表不会被加载。

有一点很重要，那就是CSS样式是通过标签嵌入到页面里的。当浏览器遇到开标签时，就会由解释HTML代码切换为解释CSS代码。等遇到闭标签时，它会再切换回解释HTML代码。

对于写在样式表里的样式，就不需要标签了。如果你在样式表里加上这个标签，样式表中的样式就不会被浏览器加载了。

本章后面的例子都将使用这个模板。读者可以把这个模板写到一个文本文件里，然后保存为扩展名是.html的文件。之后，只要像前面那样，把每个例子的CSS和HTML代码复制粘贴到这个模板中就行了。粘贴后保存，再在浏览器中打开，就可以看到效果。

CSS规则命名惯例

enter image description here

图2-2 CSS规则分两部分，即选择符和声明。声明又由两部分组成，即属性和值。声明包含在一对花括号内

图中文字：selector：选择符；declaration：声明；property：属性；value：值；opening curly bracket：左花括号；closing curly bracket：右花括号。

CSS规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素（图2-2的示例选择符是要选择段落），声明则又由两部分组成：属性和值。属性指出要影响元素哪方面的样式（图2-2的示例属性影响的是文本颜色），值就是属性的一个新状态（图2-2中是红色）。

总体来看，选择符后面是左花括号，然后是以冒号分隔的属性和值，二者构成声明。每个声明以分号结尾，最后是结束规则的右花括号。

建议读者仔细研究一下图2-2，搞明白这张图，前面所有这些术语就都明白了。后面我们经常会提到这些术语。

对这个基本的结构，有三种方法可以进行扩展。

第一种方法：多个声明包含在一条规则里。

  1. p {color:red; font-size:12px; font-weight:bold;}

这样，一条规则就可以把段落文本设置成红色，12像素大，粗体。

注意三个声明末尾都有一个分号，以示分隔。其中，最后一个位于右花括号之前的分号是可选的，但我始终都会加上它。因为将来再添加声明时就不用再记着加了。

有读者可能会好奇地想，这些属性（比如font-size和color）还有其他什么值呢？比如，指定颜色值的时候是不是可以不用颜色名，而用RGB（red,green,blue）格式？当然，可以。不过，我想还是容我把选择符的工作机制讲完吧。本章后面，我们再详细讲规则的声明部分。

第二种方法：多个选择符组合在一起。如果想让

、

和

的文本都变成蓝色，粗体，可以这样分别写：

  1. h1 {color:blue; font-weight:bold;}
  2. h2 {color:blue; font-weight:bold;}
  3. h3 {color:blue; font-weight:bold;}

但其实，把三个选择符组合在一起也可以，这样就能减少重复输入：

  1. h1, h2, h3 {color:blue; font-weight:bold;}

千万注意每个选择符之间要用逗号分隔（最后一个后面不用加）。至于选择符之间的空格，随意，可加可不加，但加了好像看得更清楚。

第三种方法：多条规则应用给一个选择符。 假设，你在写完前面那条规则后，又想只把h3变成斜体，那可以再为h3写一条规则：

  1. h1, h2, h3 {color:blue; font-weight:bold;}
  2. h3 {font-style:italic;}

以上这三种规则结构，是今后我们要写的更复杂的选择组合的基础。更复杂的选择组合是啥意思？比如说，你想写一条CSS规则，希望给位于附注栏（aside元素）中的一个段落添加样式，让这个段落看起来与正文（比如article元素）中的段落不一样。但我们到目前为止看到的规则，会影响整个文档中同种类型的所有元素。下面我们就来讲一讲怎么随心所欲地选择在标记中位于特殊区域的元素。

所有用于选择特定元素的选择符又分三种。

  • 上下文选择符。基于祖先或同胞元素选择一个元素。
  • ID和类选择符。基于id和class属性的值（你自己设定）选择元素。
  • 属性选择符。基于属性的有无和特征选择元素。