在我的上一篇文章中介绍了HTML的相关内容，一个漂亮的网页仅仅靠HTML标签是很难做出来的，比如当我们需要页面具有某种效果时，仅考标签是远远不够的，这个时候就该CSS闪亮登场了。
对于一个网页来说HTML是相当于是一个少女，CSS就相当于给她化个妆，总之就是让她变美的啦。
按照惯例，先从扫盲开始吧！
CSS概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
CSS基础语法
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。(关于选择器会在会在后面内容中提到)
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
用一张图来说明：
图中这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
注：请使用花括号来包围声明
多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。
然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性，并且一般我们每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p {
text-align: center;
color: black;
font-family: arial;
}
CSS引用方式
CSS有三种引用方式，分别有各自的优点。
1. 引用外部样式表
在引用外部样式表的时候，有两种方式：
1）使用link标签引用CSS
<head>
<link rel="stylesheet" type="text/css" href=http://www.yoursite.com/style.css />
</head>
文件路径可以使用相对路径或者绝对路径。
2）使用@import引用CSS
<head>
<style type="text/css">@import url(http://www.yoursite.com/style.css);</style>
</head>
文件路径可以使用相对路径或者绝对路径。
2. 引用内部样式表
<style type="text/css">
li {list-style-type: none;}
a {text-decoration:none;}
.red{color:#f00;}
</style>
style标签正常情况应该放在head标签内部。
3. 内联样式表
<p style="font-size: 10px; color: #FFFFFF;">
使用CSS内联引用表现段落
</p>
三种方式的优先级
CSS样式表是可以重叠的，如果这几种方式同时存在的话页面到底应该显示哪个呢？
答曰：在相同权值情况下，内联式 > 嵌入式 > 外部式
注： 嵌入式 > 外部式有一个前提，嵌入式CSS样式的位置一定在外部式的后面（实际开发也是这么写）。
总结： 就近原则（离被设置的元素越近优先级越高）
CSS引用外部样式表的优点：
一般的浏览器都带有缓存功能，所以用户不用每次都下载此CSS文件，所以外部引用相对于内部引用和内联引用来说是是节省资源的。
CSS使用内部样式表、内联样式表的优点：
可以直观的看到CSS代码，可以方便的修改并观察更改后的效果。
CSS选择器
上面我们说到CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，相信很多人都会想选择器是什么鬼，别急，一大波知识正在靠近。
CSS选择器是什么
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
选择器的分类
1. 标签选择器
元素选择器是最常见的 CSS 选择器，也就是HTML中的标签元素。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
这种方式可以将某个样式从一个元素切换到另一个元素。
假设您决定将上面的段落文本（而不是 h1 元素）设置为灰色。只需要把 h1 选择器改为 p就好了。
2. 类选择器
顾名思义，类选择器就是表示一类元素，在某个HTML元素中加一个class，引入这个类，该元素就具有这个类的样式了。
在 CSS 中，类选择器以一个点号显示：
.red{
color: red;
}
在上面的例子中，所有拥有 red 类的 HTML 元素内容均为红色。
eg：如果我想要标题和段落的文字均为红色，则HTML代码如下：
<h1 class="red">Today is cold</h1>
<p class="red">Good Night!</p>
3. Id 选择器
在很多方面，Id选择器都类似于类选择器，但也有一些重要的区别：
- Id选择器前面的是'' # ''，而类选择器前面的是 '' . ''；
- 为标签设置 id = ''Id名称''，而不是 class = ''类名称''；
- Id 选择器只能在文档中用一次，类选择器可以用多次；
- 可使用类选择器列表方法为一个元素同时设置多个样式，而Id选择器不可以；
例如：
<p class=''red center''>You are so clever!</p> /* 正确 */
<p id=''red center''>You are so clever!</p> /* 错误 */
CSS的继承、层叠和特殊性
继承
CSS中的某些样式是具有继承性的。
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
eg：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p { color: red; }
<p>hello <span> my girl </span></p>
注：有些css样式是不具继承性的，如border:1px solid red;
p{ border:1px solid red; }
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。
特殊性
——当为同一个元素设置了不同的CSS样式代码时，浏览器根据权值来判断使用哪种样式，权值高的就使用哪种CSS样式。
权值规则：http://blog.littlebill.me/2015/04/css-study-weights.html
eg：
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
根据权值规则，上面例子中的字应该显示为绿色。
层叠
在html文件中对于统一各元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的先后顺序来决定，处于最后面的CSS样式会被应用——后面的会覆盖前面的。
（即为前面所说的就近原则）
重要性
——为某些样式设置具有最高权值。
eg：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
/* p段落中的文本会显示的red红色 */
注：！important要写在分号的前面
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
练习时刻
啊啊啊，说了这么多概念，没有练习怎么记得住，奉献出我最近的一个作业，一起交流学习吧！
CSS中的重要概念远不止我列出的这些，推荐几个学习的网站：
http://www.w3school.com.cn/css/index.asp
http://www.imooc.com/learn/57
另外目前也可以考虑使用BootStrap等优秀的CSS库，完美！
