第2章 CSS工作原理

第1章我们了解了怎么通过HTML来创建文档结构。本章，我们来说一说CSS规则怎么为HTML添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多种样式值的时候，CSS就要靠层叠机制来决定最终应用哪种样式。

每个HTML元素都有一组样式属性，可以通过CSS来设定。这些属性涉及元素在屏幕上显示时的不同方面，比如在屏幕上位置、边框的宽度，文本内容的字体、字号和颜色，等等。CSS就是一种先选择HTML元素，然后设定选中元素CSS属性的机制。CSS选择符和要应用的样式构成了一条CSS规则。

好，我们就先聊一聊CSS规则，以及怎么把CSS规则应用到HTML元素。请读者跟着我做几个例子，这些例子都要用到下面这个简单的HTML5模板。这个模板的代码也可以登录http://www.stylinwithcss.com下载。

这段代码也展示了CSS注释与HTML注释在格式上的区别。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv=”Content-Type” content=”text/html;
  5.     charset=UTF-8” />
  6.     <title>HTML5 Template</title>
  7.     <style>
  8.     /* CSS规则放在<style>标签中 */
  9.     </style>
  10. </head>
  11. <body>
  12.     <!-- HTML元素放在<body>标签中 -->
  13. </body>
  14. </html>

代码里包含一个HTML的标签。通过这个标签可以把CSS样式直接写在文档中（用专业说法，是把CSS样式嵌入到文档中）。浏览器会负责把标签中的CSS样式应用给标签中的HTML元素（甚至包括标签）。