《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍《CSS设计指南》总结
《CSS设计指南》/Charles lvyke-Smith著.李松峰译—人民邮电出版社
本书网站：http://www.stylinwithcss.com
强烈推荐！！深入浅出，精简，适合入门！！

CSS工作原理

2.1 剖析CSS规则

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

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

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

• 行内样式：行内样式是写在特定HTML标签的style属性里，其作用非常有限。行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。

• 嵌入样式：嵌入的CSS样式是放在HTML文档的head元素中，嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表的样式，但会被行内样式覆盖。

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

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

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

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

@import url（css/style2.css）

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

2.1.2 CSS规则命名惯例

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

p {
   color:red;}
p {
   color:red; font-size:12px; font-weight:bold;}
h1,h2,h3 {
   color:blue; font-weight:bold;}

2.2 上下文选择符

  上下文选择符的格式如下：

标签1 标签2{
   声明}

  其中，标签2就是我们选择的目标，而且只有在标签1 是其祖先元素（不一定是父元素）的情况下才会被选中。

  上下文选择符，严格来讲（也就是CS