和Java语言不一样，CSS更偏重与设计，一些专业的WEB开发人员除了掌握CSS的基本知识外，还需要有一定的艺术功底，甚至心理学知识，因为他们不仅仅要让页面漂亮，更重要的是要让用户拥有更好的体验。
这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息，而文档的布局由浏览器来完成。但是现实中，由于很多的程序员（这些程序员通常不是专门的页面设计师，而是后台Java或是.NET程序员）对这点理解得不够，让HTML做了太多不应该让它来完成的工作。
比如很多开发者会使用一个表格嵌套表格的方式来进行页面布局。
当文档比较简单的时候，或许这种方法不存在太大的问题，但是当文档复杂超过一定程度之后，这种使用表格布局的方法愈发显示出弊端：
调整起来十分困难，无用的标签越来越多等等。
另外，很多人在标签内部控制页面元素的表现形式，比如字体、颜色、对齐方式等等。
同样的，当页面复杂到一定程度，或者页面个数多到一定的程度之后，你想修改任意一个样式，都要花很多的时间和精力，而且还容易漏改或者改错。
以上是两种常见的不科学的WEB客户端编程方式，这样的做法使得创建文档内容与文档表现形式分离的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出层叠样式表CSS。
8.1.1如何引入样式表
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。
有以下三种方式来插入样式表：
1、外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。
使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
2、内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。
你可以在head部分通过
3、内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。
使用内联样式的方法是在相关的标签中使用样式属性。
样式属性可以包含任何CSS属性。
以下实例显示出如何改变段落的颜色和左外边距。
red;margin-left:
20px">
Thisisaparagraph
8.1.2如何使用CSS
CSS语法由三部分构成：
选择器、属性和值：
selector{property:
value}
选择器（selector）通常是你希望定义的HTML元素或标签，属性（property）是你希望改变的属性，并且每个属性都有一个值（value）。
属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
body{color:
blue}
上面这行代码的作用是将body元素内的文字颜色定义为蓝色。
在上述例子中，body是选择器，而包括在花括号内的的部分是声明。
声明依次由两部分构成：
属性和值，color为属性，blue为值。
如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。
最后一条规则是不需要加分号的，不过建议每条声明的末尾都加上分号，好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。
就像这样：
p{text-align:
center;color:
red;}
建议每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p{
text-align:
center;
color:
black;
font-family:
arial;
}
8.1.3选择器
我们想要通过CSS来控制HTML元素，首先我们要通过一定的方法找到这个元素。
在CSS中通过选择器（selector）来定位元素。
1、类型选择器
类型选择器用来寻找特定类型的元素，比如段落、锚或是标题，只需要指定希望应用样式的元素的名称，类型选择器有时候也被称为元素选择器或简单选择器。
p{color:
red;}
a{text-decoration:
underline;}
h1{font-weight:
bold;}
2、派生选择器
派生选择器可以用来寻找特定元素的后代元素。
比方说，你希望列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
listrong{
font-style:
italic;
font-weight:
normal;
}
我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用
- 我是斜体字。
这是因为strong元素位于li元素内。
- 我是正常的字体。
在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。
3、id选择器
id选择器可以选择标有特定id的HTML元素，id选择器以"#"来定义。
下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red{color:
red;}
#green{color:
green;}
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。
这个段落是红色。
这个段落是绿色。
注意：
id属性一般只能在每个HTML文档中出现一次。
id就像人的名字，如果一个屋子里面有两个都叫李三的人，有人喊“李三”，你就不知道喊的是哪个了。
同样道理在一个页面里，如果两个不同的元素拥有相同的id，也很容易混淆。
虽然有可能在很大部分浏览器中多次使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能在某些浏览器中引发问题。
id选择器也可以用于建立派生选择器，请看下面示例：
#sidebarp{
font-style:
italic;
text-align:
right;
margin-top:
0.5em;
}
上面的样式只会应用于出现在id是sidebar的元素内的段落。
这个元素很可能是div或者是表格单元。
虽然被标注为sidebar的元素只能在文档中出现一次，但是这个id选择器作为派生选择器却可以被使用很多次：
#sidebarp{
font-style:
italic;
text-align:
right;
margin-top:
0.5em;
}
#sidebarh2{
font-size:
1em;
font-weight:
normal;
font-style:
italic;
margin:
0;
line-height:
1.5;
text-align:
right;
}
在这里，与页面中的其他p、h2元素明显不同的是，sidebar内的p、h2元素得到了特殊的处理。
4、类选择器
在CSS中，类选择器以一个点号显示：
.center{text-align:
center}
在上面的例子中，所有class属性为center的HTML元素均为居中。
在下面的HTML代码中，h1和p元素都有center类。
这意味着两者都将遵守".center"选择器中的规则。
注意：
类名的第一个字符不能使用数字！
它无法在Mozilla或Firefox中起作用。
Thisheadingwillbecenter-aligned
Thisparagraphwillalsobecenter-aligned.
和id选择器一样，类选择器也可被用作派生选择器：
.fancytd{
color:
#f60;
background:
#666;
}
在上面这个例子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
（名为fancy的更大的元素可能是一个表格或者一个div）
元素也可以基于它们的类而被选择：
td.fancy{
color:
#f60;
background:
#666;
}
在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。
你可以将类fancy分配给任何一个表格元素任意多的次数。
那些以fancy标注的单元格都会是带有灰色背景的橙色。
当然，任何其他被标注为fancy的元素也不会受这条规则的影响。
这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。
注意：
和id不一样，每个HTML文档中允许有多个元素的class属性是一样的，也就是说class可以反复使用。
8.2使用CSS的注意点
通过前面的学习，你已经会使用简单的CSS来控制HTML文档的样式了，本节主要讲解CSS使用过程中的一些注意点，另外再探讨一下CSS的继承和层叠的特性。
8.2.1CSS单位
CSS中很多属性的值是有单位的，CSS的单位包括长度单位和颜色单位。
1、长度单位
在CSS中，长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。
长度可以是绝对长度，也可以是相对长度。
CSS常用的绝对长度值有厘米（cm）、毫米（mm）、英寸（in）、点（pt）、派卡（pc）等等。
绝对长度值的使用范围比较有限，只有在完全知道外部输出设备的具体情况下，才使用绝对长度值。
也就是说，绝对长度值最好用于打印机输出设备，而在仅仅作为屏幕显示时，使用绝对长度值意义不大，应该尽量使用相对长度值。
相对长度就是需要定义尺寸的元素按照系统和浏览器默认大小为标准，相应地按比例缩放。
这样就不会产生难以辨认的情况。
百分比单位以及某些HTML标签（如
至等）就是一种相对长度。
另外，CSS还支持下列三种长度的相对单位：
em（当前字体中字母M的宽度）、ex（当前字体中字母X的高度）、px（一个象素的大小）。
使用em和ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大，在显示时，可通过比较当前字体中的M和X来确定。
字体越大，所对应的em和ex也就越大。
以象素为单位的长度是相对于显示器上的象素（或许为方形）的高度和宽度。
影像的宽度和高度经常是以象素给出的。
象素测量法通常也不是个好方法。
首先，象素的大小依分辩率变化较大，大多数用户都会将显示器设置成尽可能高的分辩率，从而导致象素太小，而无法阅读。
2、颜色单位
适当地在不同的部位使用不同的颜色，能使HTML页面充满生气，还可以通过颜色把读者的注意力吸引到关键的部分。
定义颜色值可以使用百分比值。
在这种情况下，红、绿、蓝颜色值的等级用百分比数来确定。
格式是：
color:
rgb（R%,G%,B%）。
指定颜色的另一种方法是使用范围在0～255之间的整数来设置。
格式是color:
rgb（128,128，128）。
定义颜色的第三种方法是使用十六进制数组定义颜色。
这种定义的方法对于经常进行程序设计的人来说比较熟悉。
定义颜色时使用三个前后按顺序排列的十六进制数组表示，例如“#FC0EA8”。
这种定义的方式就是形如#RRGGBB的格式。
即在红、绿、蓝的位置上添上需要的十六进制值。
定义颜色最后一种方法也最简单的方法是指定颜色的名称，CSS有17个预先确定的颜色，它们是：
aqua（水绿色）、black（黑色）、blue（蓝色）、fuchsia（紫红色）、
gray（灰色）、green（绿色）、lime（柠檬绿色）、maroon（褐红色）、
navy（藏青色）、olive（橄榄色）、orange（橙色）、purple（紫色）、
red（红色）、silver（银色）、teal（青色）、white（白色）、yellow（黄色）
8.2.2CSS的继承及其问题
根据CSS的规定，子元素从父元素继承属性。
看看下面这条规则：
body{
font-family:
Verdana,sans-serif;
}
根据上面这条规则，站点的body元素将使用Verdana字体（假如访问者的系统中存在该字体的话）。
通过CSS继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这些子元素诸如p、td、ul、ol、ul和li等），所有body的子元素，不需要再自行定义，都应该显示Verdana字体，子元素的子元素也一样。
这在大部分的新版浏览器中，确实是这样的。
但是在浏览器混战年代里，有时候未必如我们所愿。
浏览器提供商（Microsoft、Netscape等）为了自身的利益，都没有遵守当时的一些标准。
比方说，Netscape4就不支持继承；微软的IE直到IE6还存在部分不支持继承的问题。
我们又该如何面对这些问题呢？
你可以通过使用一些冗余法则来处理旧式浏览器无法理解继承的问题。
body{
font-family:
Verdana,sans-serif;
}
p,td,ul,ol,li,dl,dt,dd{
font-family:
Verdana,sans-serif;
}
上面这么做虽然会有些浪费，但是如果需要使老的浏览器访问我们的网页不至于显示得很糟糕，就不得不这么做。
如果你不希望从父元素中得到继承，比方说，你希望段落的字体是Times，而不是从body继承Verdana。
你可以创建一个针对p的样式，来摆脱父元素的样式：
body{
font-family:
Verdana,sans-serif;
}
td,ul,ol,ul,li,dl,dt,dd{
font-family:
Verdana,sans-serif;
}
p{
font-family:
Times,"TimesNewRoman",serif;
}
8.2.3层叠（Cascading）的意义
对于CSS，一个重要的特性就是层叠Cascading。
这个特性通过一定规则将多重样式将层叠为一个。
记住，这和继承不是同一个概念。
样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。
甚至可以在同一个HTML文档内部引用多个外部样式表。
那么，当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有页面设计者的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中越往下优先级越低。
❑内联样式（在HTML元素内部）
❑外部样式表（通过链接导入）和内部样式表（位于标签内部）
❑浏览器缺省设置
可以看出，内联样式（在HTML元素内部）拥有最高的优先权。
另外，可以使用!
important来提高优先级，加了!
important的外部样式表比不加!
important的内联样式优先级要高，但是比加了!
important的内联样式优先级要低
关于CSS的层叠性，还有一个需要注意的是：
使用浏览器查看网页的用户，他们可以在浏览器中设置自己的样式表，比如IE可以通过“工具”>>“internet选项”>>“常规”>>“外观”>>“辅助功能”>>“用户样式表”来设置自定义样式表。
当网页设计者和用户的样式表发生冲突，网页设计者的样式表的优先级会高于用户自定义的样式表。
为了让我们的用户具有更大的自由度，可以通过!
important来提高自定义的样式表的优先级，如果考虑用户和设计者的，那么层叠顺序还有以下顺序，越往下越低：
❑标记为!
important的用户样式
❑标记为!
important的页面设计者样式
❑设计者样式
❑用户样式
❑浏览器缺省样式
当使用了多个样式表之后，样式表之间可能会争夺某个特定元素的控制权。
在这些情况下，会根据选择器的特殊性，运用一定的算法规则，来决定该元素最终按照那个样式显示。
这个算法通过选择器的不同，算出一个值，值大的样式具有高的优先级。
这个算法看起来有些复杂也比较难记，一般来说有这样的规则，越往下优先级越低：
❑元素的style属性，即内联样式，例如：
red;">
❑具有ID选择器的样式，例如：
#content{color:
red;}
❑具有类选择器的样式，例如：
.content{color:
red;}
❑具有类型选择器的样式，例如：
p{color:
red;}
另外，如果两个样式的优先级相同，后定义的样式优先。
这一点也很重要，比如在head部内