No.2 CSS
1.选择器类型
选择器类型包括：type、class、id。
2.引用外部css文件
使用link元素，添加rel和href属性：<link rel="stylesheet" href="main.css" />。
3.重置浏览器的css样式
（1）为什么重置： 每个浏览器都有自己默认的选择器样式设置，例如元素的margin和padding。为了保持网站的统一性，我们需要重置CSS样式。
（2）怎样重置：把下面的css样式添加到定义的css文件中去，需要放在css文件的最前面位置。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘‘;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
4.CSS级联
（1）选择器优先权：type<class<id。例如定义html元素<p id="food">...</p>的样式：
#food {
background: green;
}
p {
background: orange;
}
即使type选择器放在id选择器后面，但id选择器权重高于type选择器。
（2）结合型选择器：被结合的选择器器应该从右往左读，最右边的选择器作为主选择器。
（3）案例分析：
.hotdog p {
background: brown;
}
.hotdog p.mustard {
background: yellow;
}
第一个结合选择器，主选择器是类型p，选择class为hotdog元素下的所有p元素。第二个结合选择器，主选择器是type为p并且class类型为mustard的元素，结果是选择class为hotdog下，类型为p并且class为mustard的元素。
（4）降低选择器的权重方法：通过多层的class来设置样式。案例如下：
<!-- HTML代码 -->
<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>
<!-- CSS样式 -->
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}
5.颜色
（1）颜色表示方式：关键字、十六进制标记、RGB、HSL值。
（2）关键字：直接使用关键字表示颜色，像red、blue等。关键字可参考：http://www.w3.org/TR/css3-color/。
（3）十六进制：如果是6位标记，前两位表示Red、中间两位表示Green、最后两位表示Blue。
（4）RGB：用三个数字表示颜色，三个数字分别表示red、green、blue的值。例如：background: rgb(128, 0, 0)。
（5）RGBa：和RGB相似，后面多了一个透明度参数，a表示alpha透明度，透明度的值范围是0到1的小数。
6.长度单位
（1）绝对长度：用像素表示，单位为px。
（2）相对长度：Percentages百分比，例如width: 50%。
（3）em相对长度单位：相对于对象内文字的font-size，如果未设置font-size则相对于浏览器的字体默认尺寸，经常用于spacing、margin和padding。
7.CSS3属性使用
（1）加前缀保证兼容性：在css3成为标准之前，很多浏览器都开始支持css3属性，但由于当时css3还不是标准，所以运营商都通过添加前缀的方式来支持。例如box-sizing属性的设置：
div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
（2）各个运营商前缀：
Chrome(谷歌浏览器) ：-webkit- Safari(苹果浏览器) ：-webkit- Firefox(火狐浏览器) ：-moz- IE(IE浏览器) ：-ms- Opera(欧朋浏览器) ：-o-