精通CSS
就在这种情况下，有了CSS。CSS可以使用文档内容部分和形式分开。使用CSS而不是Table格式来对页面进行布局。HTML标识重新变得简单了。
CSS有各种版本。CSS1在1996年末成为标准。CSS2在1998年末成为推荐标准。CSS3开发工作在2000开始，但最终发布还要很长的路程。尽管CSS3的进程很慢，人们已经开始了CSS2.1的开发。
各个浏览器对DType的解析。
http://meyerweb.com/eric/dom/dtype/dtype-grid.html
1. 常用的选择器
类型选择器和后代选择器。
常用选择器：
p{color:black}
a{text-decoration:underline}
h1{font-weight:bold}
后代选择器：
li a{text-decoration:none}
ID选择器：
#info{font-weight:bold}
类选择器：
.datePosted{color:green}
ID(类)选择器和后代选择器混合使用
#mainContent h1{font-size:8em}
伪类：
IE只支持锚链接的伪类
a:link{color:blue}
a:visited{color:green}
a:hover, a:active{color:red}
Firefox支持其他类型的伪类
tr:hover{background-color:red}
input:focus{background-color:yellow}
通用选择器：
通用选择器使用通配符，用来选择所有的元素。
*{
padding:0;
margin:0;
}
其他的选择器
子选择器：
子选择器只选择元素的直接后代。
#nav > li{background:url(folder.png) no-repeat left top;}
相邻同胞选择器：
利用两个元素的相邻关系来选择。
h1 + p{font-weight:bold}
属性选择器
使用属性来选择元素。只有Firefox支持。IE不支持。
abbr[title]:hover{
cursor:help;
}
abbr[title=help]:hover{
cursor:help;
}
abbr[title~=help]:hover{
cursor:help;
}
CSS选择器的特殊性
选择器的特殊性分为四个等级，a,b,c,d
1.如果样式是行内样式，则a=1；
2.b=ID选择器的总数；
3.c=类,伪类和属性选择器的总数；
4.d=类型选择器和伪元素选择器的总数；
| Style="" | 1,0,0,0 | 1000 |
| #wrapper #content{} | 0,2,0,0 | 200 |
| #content .datePosted{} | 0,1,1,0 | 110 |
| div #content{} | 0,1,0,1 | 101 |
| #content{} | 0,1,0,0 | 100 |
| p.comment{} | 0,0,1,1 | 11 |
1.2 使用特殊性
特殊性非常有用，因为它可以对一般元素应用样式，然后在更特殊的元素上覆盖它们。
假如在大多数的表单输入框的长度为15em，搜索的输入框为30em
form{width:15em}
form#search{width:30em}
使用CSS文件。
<link rel="stylesheet" type="text/css" href="style.css"></link>
注释CSS代码，CSS代码使用C语言的注释风格
框模型
框模型是CSS的基石之一，它指示元素如何显示和交互。页面的每个元素都看成一个框。这个框由框的内容、填充，边框和空白边组成。
填充出现在内容区域的周围。如果给一个元素增加背景，背景会应用于内容和填充。边框可以让内容和填充与容器的背景分离。边框可以是实线、虚线和点线。在边框外边是空白边。
填充和空白边都是可选的，但很多元素都会默认填充和空白边。
可以使用。
*{
padding:0px;
margin:0px;
}
把默认的空白边和填充置为0
空白边叠加：当两个元素的空白边在一起的时候会发生叠加，叠加的效果会服从，空白边的那一个。
定位：
p、h1、div等元素为块框，span为行内框，如果使用display:block，span也可以变成块框。
CSS的定位机制有三种：普通流、浮动和绝对定位。
相对定位：
相对定位指定元素从原有的位置移动。
绝对定位：
绝对定位指定元素的绝对位置。
z-index：z-index的值越高，元素显示在越上面。
背景图片：
给元素增加背景图片。默认x,y都重复
body{
background:url(images/bg.jpg);
}
背景图平铺
background:#ccc url(images/win.png) repeat-x;
背景图不重复。
background:#ccc url(images/win.png) no-repeat;
定义背景图位置。
background:#ccc url(images/win.png) no-repeat left center;
以此之外。还可以通过和象素和百分比来定义背景图的位置。
background:#ccc url(images/win.png) no-repeat 0 50%;