《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 是其祖先元素（不一定是父元素）的情况下才会被选中。

  上下文选择符，严格来讲（也就是CSS规范里），叫后代组合式选择符（descentdant combinator selector）,就是一组以空格分隔的标签里。用于选择作为指定祖先元素后代的标签。如：

article p {font-weight:bold;}article h1 em {color:green;}//双上下文选择符可以选中更具体的标签

2.3 特殊的上下文选择符

2.3.1 子选择符>

标签1 >标签2 

  标签2 必须是标签1 的子元素，或者反过来说，标签1 必须是标签2 的父元素。这个选择符中的标签1不能是标签2之外的其他祖先元素。如：

section > h2 {font-style:italic；}

2.3.2 紧邻同胞选择符+

标签1 + 标签2 

  标签2必须紧跟在其同胞标签1的后面。如：

h2 + p {font-variant:small-caps;}

2.3.3 一般同胞选择符~

标签1~标签2

  标签2必须跟（不一定紧跟）在其同胞标签1后面。如：

h2 ~ a {color:red;}

2.3.4 通用选择符*

  通用选择符*（常被称为星号选择符）是一个通配符，它匹配任何元素。如：

p * {color:green;}section * a {font-size:1.3em;}//任何是section孙子元素，而非子元素的a标签都会被选中

  总之，只有一个标签名的选择符会选中页面中所有相同标签的实例。而通过上下文选择符，则可以指定标签必须具备相应的祖先或同胞。

2.4 ID和类选择符

2.4.1 类属性

  类属性就是HTML元素的class属性，body标签中包含的任何HTML元素都可以添加这个属性。

• 类选择符：就是在HTML类名前面加一个点。如：

.specialtext {font-style：italic}

• 标签带类选择符：把标签名和类选择符号写在一块，比如：

p.specialtext {color:red;}//更精确的选择特定的标签p.specialtext span{font-weight:bold;}

• 多类选择符。如：

<p class="specialtext featured">Here the span tag <span>may or may not </span> be styled.</p>.specialtext.featured {font-size:120%;}//两个类名之间没有空格，这里选择同时具有这两个类名的那个元素

2.4.2 ID属性

  ID与类写法类似，如：

#specialtext {CSS样式声明}

2.4.3 什么时候用ID，什么时候用类

  ID的用途是在页面标记中唯一地标识一个特定的元素。它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签。

  相对来说，类的目的是为了标识一组具有相同特征的元素，可以应用给任意多个页面中的任意多个HTML元素的公共标识符，以便我们为这些元素应用相同的CSS样式。而且，使用类也让为不同标签名的元素应用相同的样式成为可能。

  注：不要乱用类。要充分了解继承和上下文的选择符的作用。利用其让不同的标签共享样式，从而降低你需要编写和维护的CSS量。

2.5 属性选择符

2.5.1 属性名选择符

标签名[属性名] //选择任何带有属性名的标签名img[title] {border:2px solid blue;}

2.5.2 属性值选择符

标签名[属性名="属性值"]//选择任何带有值为属性值的属性名的标签名img[title="red flower"] {border:4px solid green;}

2.6 伪类

伪类分两种。

• UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。

• 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

2.6.1 UI伪类

  UI伪类会基于HTML元素的状态应用样式。

  1. 结构伪类

• Link：此时，链接就在那儿等着用户点击。

• Visited：用户此前点击过这个链接。

• Hover：鼠标指针正悬停在链接上。

• Aactive：链接正在被点击（鼠标在元素上按下，还没有释放）。

一个冒号（：）表示伪类，两个冒号（：：）表示CSS3新增的伪元素。如：

a:hover {text-decoration:none;}p:hover {background-color:gray;}

  2. focus伪类

e:focus //e表示任何元素

  表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。如：

intput:focus {border:1px solid blue;}

  会在光标位于input字段中时，为该字段添加一个蓝色框。这样可以让用户明确知道输入的字符会出现在哪里。

  3. ：target伪类

e:target //如果用户点击一个指向页面中其他元素的链接，则这个元素就是目标，可以用：target伪类选中它

  如：对于下面这个链接

<a href="#more_info">More Information</a>

  位于页面其他地方，ID为more_info的那个元素就是目标。该元素可能是这样的：

<h2 id="more_info">This is the information you are looking for.</h2>

  那么，如下CSS规则

#more_info：target {background：#eee;}

  会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。

2.6.2 结构化伪类

  1. ：first-child和：last-child

e:first-child //代表一组同胞元素中的第一个元素e:last-child  //代表最后一个

  2. ：nth-child

e:nth-child(n) // n表示一个数值，也可以是odd或者even，2n+1等

2-7 伪元素

  伪元素，就是你的文档中若有实无的元素。
  1. ：：first-letter伪元素

p::first-letter {font-size:300%;}//段落首字母放大效果

  2. ：：first-line伪元素

p::first-line {font-variant:small-caps;}//把第一行以小型字母显示

  3. ：：before和：：after伪元素

e::beforee::after //用于在特殊元素前面或后面添加特殊元素

2.8 继承

2.9 层叠

  详见《HTML+CSS基础课程》学习笔记六
  以下就是浏览器层叠各个来源样式的顺序：

• 浏览器默认样式

• 用户样式表

• 作者连接样式表（按照它们链接到页面的先后顺序）

• 作者嵌入样式

• 作者行内样式

  浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。

2.9.1 层叠规则：

规则一：找到应用给每个元素和属性的你所有声明；规则二：按照顺序和权重排序；规则三：按特指度排序；规则四：顺序决定权重（当特指度相同时）。

2.9.2 计算特指度

  首先，有一个简单的记分规则，即对每个选择符都要按下面的“ICE”公式计算三个值：

I-C-E

• 选择符中有一个ID，就在I的位置加1；

• 选择符中有一个类，就在C的位置上加1；

• 选择符中有一个元素（标签）名，就在E位置上加1；

• 得到一个三位数。

p                                  0-0-1 特指度 =1p.largetext                        0-1-1 特指度 =11p#largetext                        1-0-1 特指度 =101body p#largetext                   1-0-2 特指度 =102body p#largetext ul.mylist         1-1-3 特指度 =113body p#largetext ul.mylist li      1-1-4 特指度 =114

简单层叠要点：

• 规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签的选择符

• 规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。

• 规则三：设定的样式胜过继承的样式，此时不考虑特指度（即显式设定优先）。

2.10 规则声明

CSS属性值主要分以下三类。

• 文本值。

• 数字值。

• 颜色值

《HTML+CSS基础课程》学习笔记七 》（格式化排版）

《HTML+CSS基础课程》学习笔记十 》（颜色值，文本值，代码简写，文本居中设置）

《CSS3实战》笔记–色彩模式和不透明度

Colrd:一个Pinterest风格的站点有很多启发人创造的图片和照片，以及相应的调色板。

Adobe Kuler:Adobe Kuler的官方网站提供了数千种色样，调色板创建工具，以及其他人选用的时尚颜色。