CSS，全名为“层叠样式表”，Cascading Style Sheets，样式表比较好理解，就是为网页添加了样式，而层叠比较难理解，它的核心是“继承”与“冲突”。

CSS的目的：重定义HTML的默认样式。

也许你觉得HTML标签的默认样式很丑，但是却没有在意过这些标签为什么丑，它有什么默认的样式？我如何修改它更漂亮，如果设置才能达到我要求的效果？

比如字体是默认的宋体，黑色，所有文本默认左对齐。

比如段落默认没有首行缩进，不符合中国人的习惯，行和行之间只有文字的高度，间隔太小，看起来不舒服。

比如div默认独占整个通栏，不能并排在一起。

比如超链接默认颜色是蓝色，有下划线，点击后成为紫红色。

所有的这些默认样式都是我们难以忍受的，而且浏览器和浏览器之间，对标签的默认样式解释并不完全一样，有差异，我们又如何面对？

所以我们需要认真学习CSS这门样式语言，让网页看起来像做了美容一样更加高大上。

so，重定义HTML的默认样式就是CSS的功能。黑发变黄发，直发变卷发，黑眼睛戴上美瞳，一切都是为了更美。CSS也是一样，为了让网页更符合我们的需要。

一、语法结构

选择器{
      属性1:属性值;
      属性2:属性值;
      ……
}

比如：

p{
      text-indent:2em;/*首行缩进2个字*/
      line-height:180%;/*行高为文本高度的180%*/}

选择器代表HTML对象，哪些HTML对象要使用样式？属性是对HTML对象的描述，哪些属性需要修改，后面就是重新定义的属性值。

二、选择器

选择器主要分为“标签选择器”、“id选择器”、“class选择器”、“复合选择器”、“伪类选择器”

1、标签选择器

作用范围：整个文档所有该标签都会用上定义的样式，适合用作底层的基础样式，比如定义整个文档的字体、背景颜色、超链接样式等。

1.1单个标签

body{
    font:16px/1 "microsoft YaHei";/*整个文档字体为16px，行高为文字1倍的微软雅黑。*/
    color:#333;/*文字颜色*/
    background-color:#eee;/*背景颜色*/}

1.2多个标签用逗号“,”隔开，代表并列关系，表示所有标签都用该定义的样式。

h1,h2{
    color:#F60;
    text-align:center;/*文本在水平方向居中对齐*/
    letter-spacing:2px;/*文字之间的间隔*/}

1.3多个标签用空格隔开，表示包含关系，也就是嵌套，后面的标签嵌套在前面的标签里。

这里要注意的是标签的解释是从右边往左边解释的，比如下面的p span，先找到span，再找到p里面的span，所以选择器应该嵌套越少越好。

p span{
    color:#C03;
    font-size:1.1em;/*文字大小是行内文字的1.1倍。*/}

2、id选择器

id选择器，具有唯一性。一个html对象的id名称是唯一的，id名称不能被重复使用。

id选择器以“#”开头。这个id名字只能用一次。

任何标签都有id和class属性。

比如为一个div添加了id="main"的属性，要为这个div做唯一的样式，则可以使用#main{样式}的方式。

#main选择器指向id="main"的html对象，把样式应用在该html对象上面。选择器相当于一个挂钩。

<div id=”main”>…</div>

#main{
    样式
}

3、class选择器

class在程序里面表示：类。物以类聚，人以群分，具有相似性。

class的语法结构是以“.”开头，class样式可以被任何需要它的标签所调用，可以使用很多次，还可以组合。

比如定义了如下几个class样式：

.bg1{
    background-color:#ccc; 
}
.bg2{
    background-color:#eee; 
}
.color1{
    color:#f99;
}
.color2{
    color:#666;
}
.f18{
    font-size:18px;
}
.f16{
    font-size:16px;
}
.p20{
    padding:20px;/*内边距*/
}
.m20{
    margin:20px;/*外边距*/
}

在html里面可以这样组合调用：

<h1 class="color1 f18"></h1>
<h2 class="color2 f16"></h2>
<div class="bg1 p20 m20"></div>
<div class="bg2 p20"></div>

其实可以把class看成很多具有特定功能的零件，某个html需要什么样式，可以通过组合不同的class零件达到最大化的效果。该html对象会使用所有被调用的class样式。

感觉像小孩儿玩积木游戏呢^_^

注意：id和class的名字是自己定义的，所以一定要符合命名规则，不能用数字开头，只能字母开头，可以包含数字和下划线。不能使用保留的标签关键字。比如不能使用"#2"，".div"，"#h1"，".3a"等格式。

class最好的命名方式是取属性和属性值的首字母或者字母与数字的组合。

4、复合选择器

一般就是id、class、标签选择器的混合物。

比较典型的就是这种，对某个id选择器下面的所有某标签使用样式。

<div id="navlist">
    <ul>
      <li><a href="#" id="current">HTML教程</a></li>
      <li><a href="#" class="css">CSS教程</a></li>
      <li><a href="#">jQuery教程</a></li>
      <li><a href="#">SEO教程</a></li>
      <li><a href="#">关于我</a></li>
    </ul>
</div>

比如现在对id为"navlist"下面的ul下面的li下面的所有a标签使用一样的样式，选择器可以这样写：

#navlist ul li a{
    样式
}

其实也就是一种包含关系，a标签必须在li里面，li必须在ul里面，ul必须在id="navlist"的里面。

如果想让某个a标签样式不一样，则可以为这个a添加一个id属性或者class属性，那么可以使用如下选择器：

#navlist ul li a#current{
    样式
}
#navlist ul li a.css{
    样式
}

发现差别了吗？a#current和a.css之间没有空格，思考一下是为什么？

有空格的必须是上下级的嵌套关系，而这个id和class是a的直接属性，相当于是有id="current"的a和有class="css"的a。

5、伪类选择器

因为在IE6里面只支持a超链接的伪类，导致在CSS2里面伪类选择器使用比较少，用得最多的就是a:hover这种伪类选择器。

什么是伪类？其实就是本身并不存在，在特定条件下才会触发的对象。

比如超链接a一共有四个状态：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果.

超链接的4种状态，需要有特定的书写顺序才能生效。 

a:link {} /*访问前*/
a:visited {}/*已访问*/
a:hover {} /*鼠标悬停*/
a:active {} /*当前被点击*/

注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

只不过我们一般不会定义四种状态，大部分的网站只需要鼠标悬停（经过）时样式不一样即可，其它三种状态都是一样的。所以可以定义成这样的样式：

a{
    color:#333;
    text-decoration:none;/*没有下划线*/
}
a:hover{
    color:#f30;
    text-decoration:underline;/*有下划线*/
}

当然css选择器不止这几种，css3还丰富了很多非常棒的选择器，比如属性、伪元素、子元素、关系选择器等，这些留待在CSS3教程里面再介绍吧。