引言：
<div class="container">
........ <div class="top">
............ <div id="header">
.............. <h1>Goberl</h1>
............</div>
........</div>
........ <div class="center">
................ <div id="articles">
................................ <h2>articles <h2>
................</div>
................ <div id="menus">menus</div>
....... <div class="bottom">
............... <h2>Goberl <h2>
........</div>
</div>
以上css一共有7个自定义标签
container(class)、top（class）、center（class）、 bottom（class）
header(id)、articles（id）、menus（id）
css中的5点精华：
1、请注意括号内的class与id，它们在定义css将采用不同的标记：
class对应于“.”（小数点）
id对应于“#”（井号）
所以在对上述标签定义时：（假设只定义以上标签的颜色属性）
.container{color:#C6E3FF;}
.top{color:#C6E3FF;}
.center{color:#C6E3FF;}
.bottom{color:#C6E3FF;}
#header{color:#C6E3FF;}
#articles{color:#C6E3FF;}
#menus{color:#C6E3FF;}
2、我们假设了只定义以上标签的颜色属性，对于如此多的具有相同属性的标签我们可以简化为
.container,.top,.center,.bottom,#header,#articles,#menus{color:#C6E3FF;}
这样不仅仅简化了代码，更重要的是易于修改，但前提是它们应该具有相同属性。
3、内部标签div、h2、h1属性的设置：
如果我们的div都有一个共同属性，边框大小为1px；h1、h2的字体颜色都为#666666
我们可以：
div{border-width:1px;}
h1,h2{color：#666666;}
请注意：它们的前面既没有“.”也没有“#”
4.定义不同级下的同名标签：
本代码的<articles>和<bottom>中都有h2，直接定义h2{color：#666666；}后，如果只想把<articles>中的h2的字体设置下划线（ text-decoration:underline），而<bottom>中的h2字体设置为宋体（font-family:"宋体"）且无下划线又该怎么办呢？则：
h2{color：#666666;}
.articles h2{text-decoration:underline;}
.bottom h2{font-family:"宋体";}
此时，我们已经把.articles h2 .bottom h2当作了两个不同的标签，它们就和上面的.articles .bottom一样具有独立性——具有精确定位的功能,就如同汉语里面的定于。这一点就暗示我们，css中总是越内层的优先决越高（本例中的.articles h2 将补充或替换 .articles 、.center、.container的属性，.articles h2优先权最高 ）
5.同理，当我们在定义每一个域的链接属性（link、visited、hover等）时，只需要在其前面加一个能准确确定其层次的标签名（如4中的<articles>和<bottom>）就可以了。
.top #header h1 a:link,.top #header h1 a:visited,.top #header h1 a:hover{color:#fff000;}
.articles a:link,.articles a:visited{text-decoration:underline;}