样式表
1.link标签 外部样式表
<link rel="stylesheet" type="text/css" href="sheet1.css">。
media属性，这里使用的值为all,说明这个样式表要应用于所有表现的媒体。CSS2为这个属性定义很多可取值。all:用于所有表现媒体。2.alternate 候选样式表
候选样式表——将rel设置为alternate stylesheet，就可以定义候选样式表，只有在用户选择这个样式才会用于文档表现。3.style 内部样式
4.@import
@import命令必须放在style容器中
<style type="text/css">
@import url(styles.css);
h1{color:gray;}
</style>
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载.所以有时候浏览@import加载CSS的页面时开始会没有样式（**无样式内容闪烁问题**），网速慢的时候还挺明显。
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，存在兼容性问题。而link是XHTML标签，无兼容问题;
(4) 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
用户!important>开发者!important>开发者>用户>浏览器默认
选择器
基础选择器
1.元素选择器
2.类选择器
p.warning 匹配class为warning的所有p元素3.id选择器
#mostImportant{color:red;}
<h1 id="mostImportant"></h1>
<ul id="mostImportant"></ul>
<em id="mostImportant"></em>
这个选择器的规则会和各个元素匹配（这些元素不能在同一个文档中出现）4.通配符选择器 *
属性选择器
[attribute] 选取包含某属性的元素。
a[href] 选取包含href属性的a标签。
[attribute=value] 选择某个属性attribute并且属性值为value的元素。这种格式要求必须与属性值完全匹配，如果遇到的值本身包含一个用空格分隔的值的列表，匹配就会出问题。
.info[ref='good'][attribute~=value] 该选择器定位具有属性 attr 且属性值为 完整 “val” 的任何元素 A：
div[title~="english"] {color:#f88;} /* title="english" 以及 title="chinese english" */[attribute|=value] 定位具有属性 attr 且属性值为 val，或以 “val-” 开头 的任何元素 A：
p[class|="a"] {color:#333;} /* class="a" 以及 class="a-b"） */
下面是css3提供的选择器：
A[attr^=”val”]：定位具有属性 attr 且属性值 以 “val” 开头 的任何元素 A：
div[class^="a"] {color:#666;} /* class="a"、class="abc" 以及 class="abc zzz" */ /* 但 class="zzz abc" 不是 */A[attr$=val]：该选择器与 A[attr^=val] 正好相反，定位具有属性 attr 且属性值 以 “val” 结尾 的任何元素 A：
div[class$="a"] {color:#f00;} /* class="nba"、class="cba" 以及 class="cn cba" */ /* 但 class="cba cn" 不是 */A[attr*=”val”]：定位具有属性 attr 且属性值任意位置 包含 “val” 字符串 的元素 A，val 可以是一个完整的单词，也可以是一个单词中的一部分：
a[title*="link"] {text-decoration:underline;} /* title="aaalinkzzz" */
伪类选择器
1.锚伪类
a:link {color: red} /* 未访问的链接 */
a:visited {color: green} /* 已访问的链接 */
a:hover {color: blue} /* 鼠标移动到链接上 */
a:active {color: yellow} /* 选定的链接，鼠标左击不放 */
最可靠的记忆顺序就是遵循爱恨原则：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。
note:
在 CSS 定义中，:hover 必须被置于 :link 和 :visited 之后，才是有效的。
在 CSS 定义中，:active 必须被置于 :hover 之后，才是有效的。
:link 和 :visited 称为链接伪类，只能应用于锚元素；
:hover、:active 和 :focus 称为动态伪类，理论上可以用于任何元素。
2.与input有关
:focus 向拥有键盘输入焦点的元素添加样式。
下面是css3提供的选择器：
:enabled 可用的输入元素。
:disabled 不可用的输入元素。
:checked 匹配被选中的元素。 (只有Opera支持)
3.结构伪类
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
E:first-child 是用来选择父元素的第一个子元素E，但是它必须为父元素的第一个子元素，不然会失效
如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相关的伪类都如此。
下面是css3提供的选择器：
E:last-child 匹配父元素的最后一个子元素，E必须是父元素的最后一个子元素
E:only-child 匹配父元素仅有的一个子元素E
E:first-of-type 匹配同类型中的第一个同级兄弟元素E
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。E:nth-child(n) 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效
E:nth-child(n) 和 E:nth-last-child(n) 该选择符允许使用一个乘法因子(n)来作为换算方式，如下: (1) 选择第几个标签，“2可以是你想要的数字，最小从1开始” li:nth-child(2) { background:#fff} (2) 选择大于等于4标签，“n”表示从整数 li:nth-child(n+4) { background:#fff} (3) 选择小于等于4标签 li:nth-child(-n+4) { background:#fff} (4)选择偶数标签，2n也可以是even li:nth-child(2n) { background:#fff} li:nth-child(even) { background:#fff} (5)选择奇数标签，2n-1也可以是odd li:nth-child(2n-1) { background:#fff} li:nth-child(odd) { background:#fff}E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
E:empty 匹配没有任何子元素（包括text节点）的元素E
4.否定类
E:not(s)用于匹配不含有s选择符的元素E，说起来不好理解，那么说一个最常用的开发场景，假如我们要对ul元素下的所有li都加上一个下边框用于内容分割，但是最后一个不需要，如下：
ul li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
伪元素选择器
1.E:first-letter 选择文本块的第一个字母
2.E:first-line 选择元素的第一行
3.E:before 在元素前面插入内容，配合”content”使用
4.E:after 在元素后面插入内容，配合”content”使用
以上四个伪元素选择器在CSS2.1都已经被支持，但在CSS3中将伪元素选择符前面的单个冒号(:)修改为双冒号(::)，如E::first-letter、E::first-line、E::before、E::after，不过之前的单冒号写法也是有效的。
5.E::selection
E::selection用于设置文本被选择时的样式，被定义的样式属性有3个，而且使用时需要对火狐浏览器单独设置。
p::-moz-selection{
background:#000;
color:#f00;
text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{
background:#000;
color:#f00;
text-shadow:1px 1px rgba(0,0,0,.3);
}
关系选择器
后代选择器E F
后代选择器是最常使用的选择器之一，它也被称作包含选择器，用于匹配所有被E元素包含的F元素，这里F元素不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中。子元素选择器E > F
子元素选择器只能选择某元素的子元素，这里的F元素仅仅是E元素的子元素才可以被选中相邻兄弟元素选择器E + F
相邻兄弟选择器可以选择紧接在另一元素后的元素，但是他们必须有一个相同的父元素。比如E元素和F元素具有一个相同的父元素，而且F元素在E元素后面，这样我们就可以使用相邻兄弟元素选择器来选择F元素。通用兄弟选择器E ~ F
通用兄弟元素选择器是CSS3新增加一种选择器，用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似，但不同于前者只是选择相邻的后一个元素，而通用兄弟元素选择器是选择所有元素。
