层叠样式表
本章将阐述CSS的基本规则。
解构CSS
所谓CSS，由选择器（selector）和声明块（declaration block）组成。再进一步细分，每个声明包括了属性和值。
selector：{
property:value;
}
内联还是外链？
大多时候显然是外链更高效。样式文件可以缓存到用户电脑，如果你一个网站用一套css，当用户访问同一个网站其它页面时，就不用再次加载样式。
然而，缓存对于开发者来说是个坏东西。在本地调试时，修改样式表之后可能无法马上看到变化这时应该通过ctrl+F5来强制刷新清空缓存。
内联样式
同在在head标记内建一个style标记，样式在里面写。在H5以前的规范中，style必须加上属性type="text/css",现在已经不作要求。如果head内还有javascript，需要把script标记放到样式的后面。
单个网页而言，内联样式相对较快，但是可维护性较差。
外链样式
外链样式起名随意，但是最好是相关的。全站的表单用同一套样式时，可以命名为form.css。
对于外链css还可以使用在线工具进行验证。http://jigsaw.w3.org/css-validator/
外链css必须关联。可以选择<link>标记也可以用@import来指向想要被引用的css，浏览器对此二者的解释并无区别。
link
h5的link调用格式为：
<link rel="stylesheet" href="css/styles.css">
xhtml的格式为：
<link type="texxt/css" rel="stylesheet" href="....."/>
h5省略了type="texxt/css"
通过@import调用：
<style>
@import url(css/style.css)/*路径加不加引号都可以*/
</style>
@import的不同之处：link语法属于html，而@import属于css语言，作为css语言，意味着你还可以在后面继续写其它css。这样一来，style内的css就是一个关联了其它样式的样式文件。可以认为是内联样式的一种变体。需要在网页加载之后才开始加载。最大的问题：不支持javascript控制DOM修改样式。
小结：有研究指出，在某些时候，采用@import方式引入的css会拖慢速度，因此建议只使用link。
两者都是外部引用CSS的方式，但是存在一定的区别：
第一个样式
比如说一个html5文档信息如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS:The Missing Manual -- Chapter 2</title>
</head>
<body>
<h1>CSS: The Missing Manual</h1>
<p>...(假文) </p>
<h2>标题2</h2>
<p>...(假文)</p>
<p>...(假文)</p>
<h2>Nisi Ut Aliquid </h2>
<p>...(假文)</p>
<p>...(假文)</p>
<address>
Copyright 2016, Dang Jingtao
</address>
</body>
</html>
行间样式
行间样式并非一无是处：比如邮件等明确要有的信息。
比如：
<h1 style="color:#666:font-size:3em;">
内联样式
<style>
/*格式化h1*/
h1{
color:#666;
font-size:3em;
margin-top:10px;
margin-left:80px;
}
/*格式化段落*/
p{
color:#616161;
line-height: 150%;
margin-top:10px;
margin-left: 80px;
}
</style>
外链css
在网页文件head元素中关联：
<link rel="stylesheet" href="styles.css">
在根目录下的styles.css文件写入CSS：
/*格式化页面*/
html{
/*上内间距25px*/
padding-top:25px;
background-image:url(images/bg_page.png);
}
body{
80%;
padding:20px;
margin:0 auto;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
background-color: #e1edeb;
}
/*格式化h1*/
h1{
font-family: 'Gravitas One','Arial Black',serif;
font-weight: normal;
color:#666;
font-size:3em;
margin-top:10px;
margin-left:80px;
}
/*格式化段落*/
p{
color:#616161;
line-height: 150%;
margin-top:10px;
margin-left: 80px;
}
初步效果如下：
对于用户的系统字体不满意的话可以采用谷歌字体：
<link rel="stylesheet" href="http://fonts.googleleaps.com/css?family=Gravitas+One">
根据同样的机制，可以给文档加上更丰富的样式（字体，色彩，边距）
html {
padding-top: 25px;
background-image: url(images/bg_page.png);
}
body {
80%;
padding: 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
margin: 0 auto;
background-color: #E1EDEB;
}
h1 {
color: #666666;
font-size: 3em;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
margin: 0;
}
p {
font-family: "Palatino Linotype", Baskerville, serif;
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 60px;
}
h2 {
color: #B1967C;
font-family: 'Gravitas One', 'Arial Black', serif;
font-weight: normal;
font-size: 2.2em;
border-bottom: 2px white solid;
background: url(images/head-icon.png) no-repeat 10px 10px;
padding: 0 0 2px 60px;
margin: 0;
}
.intro {
color: #6A94CC;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}
最后效果：（在线字体引用失败时可翻墙试试）
技巧总结：
- 响应式居中可以直接用body百分比宽度，居中实现，可以加阴影。html文档的背景可以实现网页背景纹理，不需要body上做文章。