精通CSS与HTML设计模式 第二章（HTML设计模式）
精通CSS与HTML设计模式 第三章（CSS选择符与继承）
精通CSS与HTML设计模式 第四章（CSS选择符与继承）
精通CSS与HTML设计模式 第六章（盒型模型属性）
精通CSS与HTML设计模式 第八章（盒型模型属性）
精通CSS与HTML设计模式 第九章（定位：进阶）
精通CSS与HTML设计模式 第十章（分割内容）
精通CSS与HTML设计模式 第十一章（对齐内容）
其余一些都是理解性的没有多大作用
条件样式表
例一：IE 6 7 8 中显示红色，非IE中显示黑色
采用的是hack <!--[if lte IE 6]> CSS导入 <![endif]> 此语句只有IE可以设别
同上 <!--[if lte IE 7]> <!--[if lte IE 8]> IE7 IE8设别
代码
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > 无标题页 </ title >
< link href = " http://files.cnblogs.com/chongzi/page.css " rel = " stylesheet " type = " text/css " />
<!-- [ if lte IE 6 ] >
< link rel = " stylesheet " type = " text/css " href = " http://files.cnblogs.com/chongzi/ie.css " />
<! [endif] -->
<!-- [ if lte IE 7 ] >
< link rel = " stylesheet " type = " text/css " href = " http://files.cnblogs.com/chongzi/ie.css " />
<! [endif] -->
<!-- [ if lte IE 8 ] >
< link rel = " stylesheet " type = " text/css " href = " http://files.cnblogs.com/chongzi/ie.css " />
<! [endif] -->
</ head >
< body >
< div class = " backC " >
123 </ div >
<!-- 有序结构 -->
< ol >
< li > 1 </ li >
< li > 3 </ li >
< li > 2 </ li >
< li > 4 </ li >
</ ol >
<!-- 无序 -->
< ul >
< li > 1 </ li >
< li > 3 </ li >
< li > 2 </ li >
< li > 4 </ li >
</ ul >
<!-- 列表 -->
< dl >
< dt > 标题 </ dt >
< dd > 内容 </ dd >
</ dl >
</ body >
</ html >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > 无标题页 </ title >
< link href = " http://files.cnblogs.com/chongzi/page.css " rel = " stylesheet " type = " text/css " />
<!-- [ if lte IE 6 ] >
< link rel = " stylesheet " type = " text/css " href = " http://files.cnblogs.com/chongzi/ie.css " />
<! [endif] -->
<!-- [ if lte IE 7 ] >
< link rel = " stylesheet " type = " text/css " href = " http://files.cnblogs.com/chongzi/ie.css " />
<! [endif] -->
<!-- [ if lte IE 8 ] >
< link rel = " stylesheet " type = " text/css " href = " http://files.cnblogs.com/chongzi/ie.css " />
<! [endif] -->
</ head >
< body >
< div class = " backC " >
123 </ div >
<!-- 有序结构 -->
< ol >
< li > 1 </ li >
< li > 3 </ li >
< li > 2 </ li >
< li > 4 </ li >
</ ol >
<!-- 无序 -->
< ul >
< li > 1 </ li >
< li > 3 </ li >
< li > 2 </ li >
< li > 4 </ li >
</ ul >
<!-- 列表 -->
< dl >
< dt > 标题 </ dt >
< dd > 内容 </ dd >
</ dl >
</ body >
</ html >
这一张也就看到这个比较有用