通过阅读和学习书籍《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::before
e::after //用于在特殊元素前面或后面添加特殊元素2.8 继承
2.9 层叠
??以下就是浏览器层叠各个来源样式的顺序：
- 浏览器默认样式
- 用户样式表
- 作者连接样式表（按照它们链接到页面的先后顺序）
- 作者嵌入样式
- 作者行内样式
??浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。
2.9.1 层叠规则：
规则一：找到应用给每个元素和属性的你所有声明；
规则二：按照顺序和权重排序；
规则三：按特指度排序；
规则四：顺序决定权重（当特指度相同时）。2.9.2 计算特指度
??首先，有一个简单的记分规则，即对每个选择符都要按下面的“ICE”公式计算三个值：
I-C-E- 选择符中有一个ID，就在I的位置加1；
- 选择符中有一个类，就在C的位置上加1；
- 选择符中有一个元素（标签）名，就在E位置上加1；
- 得到一个三位数。
p 0-0-1 特指度 =1
p.largetext 0-1-1 特指度 =11
p#largetext 1-0-1 特指度 =101
body p#largetext 1-0-2 特指度 =102
body p#largetext ul.mylist 1-1-3 特指度 =113
body p#largetext ul.mylist li 1-1-4 特指度 =114
简单层叠要点：
- 规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签的选择符
- 规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
- 规则三：设定的样式胜过继承的样式，此时不考虑特指度（即显式设定优先）。
2.10 规则声明
CSS属性值主要分以下三类。
- 文本值。
- 数字值。
- 颜色值
《HTML+CSS基础课程》学习笔记七 》（格式化排版）
《HTML+CSS基础课程》学习笔记十 》（颜色值，文本值，代码简写，文本居中设置）
Colrd:一个Pinterest风格的站点有很多启发人创造的图片和照片，以及相应的调色板。
Adobe Kuler:Adobe Kuler的官方网站提供了数千种色样，调色板创建工具，以及其他人选用的时尚颜色。