CSS和HTML结合
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
其中得到广泛支持的三个媒体类型：all、screen和print，可以通过逗号同时设置多个媒体类型，例如"screen,print"。
rel是relation的意思，还可以设置为"alternate stylesheet"作为候选样式表，只有在用户选择这个样式表的时候才会显示。
link还有一个title属性：如果为一个rel为stylesheet的link指定了title属性，则该样式表作为首选样式表；
指定多组首选样式表，那么只会其中的一个作为真正的首选样式表，另外的会被忽略，至于是哪一个作为真正的首选样式表，无法确定。
<style type="text/css"> @import url(sheet2.css) all; @import url(http://www.test.com/c/a.css) print; body{color:red;} </style>
CSS要求@import指令出现在样式表的其他规则之前，如果出现在其他规则之后则会被忽略（但windows平台的IE不会忽略任何@import指令）。
另外还有些浏览器本身的限制：IE有个CSS 32样式限制BUG，排在第32个以及之后的<style><link>或者@import将会被忽略。
尽量避免使用@import，IE下LINK可能会导致@import加载的阻断；还可能导致资源文件下载顺序被打乱，例如后声明的<script>却提前于@import中的CSS被加载了；
在IE中，如果因为加载 <script>导致的LINK中的@import阻塞加载，那这时会因为CSS未加载完全，IE不会在页面渲染任何内容，导致用户体验极差。
选择器
元素选择器 html{padding:0px;margin:0px;}
选择器分组 h1,p{color:#444;}
通配选择器 *{color:green;}
类选择器 .warning{font-style:italic;} p.warning{font-style:italic;}
多类选择器 .warning.uragent{color:red;} p.warning.uragent{color:red} /* 同时包含这两个类名的元素，类名的顺序不限，IE6只识别多类中的最后一个类 */
ID选择器 #first-w{color:red;} /* 类选择器和ID选择器可能是区分大小写的，取决于文档语言，例如HTML和XHTML的类和ID区分大小写 */
后代选择器 ul ol em{color:red;} /* ul和ol元素之间的层次间隔可以是无限的 */
CSS2引入了属性选择器，IE6不支持属性选择器，IE7支持所有CSS2.1属性选择器，还支持一些CSS3属性选择器。
简单属性选择器 h1[class][title]{color:red;} /* 存在class属性且存在title属性的h1元素的文本都为银色 */
根据具体属性值 a[href="#"]{color:red;}
以某属性值开头 p[class^="fix"]{color:red;}
以某属性值结束 p[class$="fix"]{color:red;}
属性值包含子串 p[class*="fix"]{color:red;}
根据部分属性值选择 p[class~="waring"]{color:red;} /* 属性值中用空格分隔，存在waring的p元素 */
特性属性选择器 p[class|="fix"]{color:red;} /* class为fix或者fix-开头的p元素 */
子元素选择器 h1>strong{color:red} /* strong元素的父元素为h1时才显示为红色 */
选择相邻兄弟元素 h1+p{color:red;} /* h1和p有共同的父元素，p紧接着出现在h1之后 */
伪类（CSS1） :link :visited ，:link应该标记的是未访问的链接，但有的会标记访问的和未访问的所有链接。
动态伪类（CSS2） :focus :hover :active ，动态伪类可以应用到任何元素。
支持程度：IE6只允许动态伪类选择超链接，IE7支持所有元素应用:hover但不支持对表单元素应用:focus样式。
伪类的组合在IE6中也无法被支持，例如 a:link:hover{} 在IE6中相当于 a:hover
静态伪类（CSS2） em:first-child{color:red;} /* 会匹配在父元素中作为第一个元素的em */
伪元素选择器（CSS2）会在指定位置添加伪元素进行修饰：
p:first-letter{color:red;} 向文本的第一个字母添加特殊样式。
p:first-line{color:red;} 向文本的首行添加特殊样式。
h2:before{content:"}}";color:red;} 在元素之前插入生成的内容，并设置样式。
h2:after{content:url(logo.gif);color:red;} 在元素之后插入生成的内容，并设置样式。
- 如果:before或:after选择器的主体是行内素，则display属性只接受值none和inline，所有其他值都处理为inline。
- 通过content还可以指定插入属性值： a[href]:after{content:" [" attr(href) "] ";}
权重优先级
选择器中给定的各个元素和伪元素：0,0,0,1
选择器中给定的各个类属性值、属性选择或伪类：0,0,1,0
选择器中给定的各个ID属性值：0,1,0,0
结合符和通配符选择器对权重没有贡献。
div#sidebar *[href] {color:red}
如上例子的特殊性为：0,1,1,1。
每个内联样式的特殊性都是1,0,0,0（为内联样式保留一位是CSS2.1才新增的，在CSS2中内联样式的特殊性是1,0,0，所以ID选择器很容易覆盖内联样式）。
CSS2.1中还可以声明一个样式为!important作为重要规则： p.desc{color:#09f !important;background:#eee !important;}
- !important在IE6中有一个BUG：在同一对大括号中重复声明的样式，则IE6会忽略!important。
样式通常可以继承，例如颜色，继承的样式是没有特殊性的，因此例如用户代理的超链接样式就优先于继承过来的样式。
按照权重，样式声明排序：读者的重要声明>创作人员的重要声明 >创作人员的正常声明>读者的正常声明>用户代理声明。
伪类 :link{}:visited{}:hover{}:active{} 的顺序特别要注意，因为所有链接要么是未访问要么是已经访问。
对于继承，CSS2.1中有一个关键词是所有属性公有的，就是inherit。例如期望一个段落中的a标签的文字颜色和段落文字颜色相同，则可以：
p{color:#09f;} p a{color:inherit;}
- 注意IE67不支持CSS的inheirt，IE8、Opera支持有缺陷。
值和单位
颜色rgb(75%,1000%,-1000%)会被自动处理为rgb(75%,100%,0%)。
相对长度单位em：假设一个h1的字体大小为24px，那么如果设置该元素的左边距为1em，则实际值为24px。
相对长度单位ex的历史：很多用户代理的做法是取em的值的一半作为ex的值，随着时间的推移，更多的用户代理会使用ex的实际值（小写x的高度）。
字体
字体系列：CSS定义了5种通用字体系列：Serif、Sans-serif、Monospace字体、Cursive字体、Fantasy字体，理论上任何安装的字体都会落入这里的通用字体中。
font-size实际上相当于为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。
font-size除了可以使用larger和smaller来指定相对父元素的大小外，还可以通过百分数大小（和em的作用差不多）。
font-size是可以继承的，继承的是计算值而不是百分比。
font-variant只有两个非继承值：normal和small-caps，small-caps要求使用小型大写字母文本（有的浏览器直接显示为大写）。
font属性例如 h1{font:bold normal italic 24px Verdana,Arial;} 的前三个值可以采用任何顺序，后两个值必须存在且font-size必须在font-family之前。
line-height属性可以单独设置，也可以 h1{font:bold italic 200%/1.2 Verdana;} 通过斜线的方式描述。
重新定义font样式时，所有被忽略的值都会重置为默认值。
可以使用系统字体： .ca{font:caption;} ，此外还有caption、icon、menu等。
@font-face感兴趣可以去了解下，例如可以下载远程字体。
文本
text-indent属性可以为块级元素中的第一行进行缩进；该属性会继承；在CSS2.1之前，text-indent总是继承计算值，而不是声明值。
- text-indent属性在IE67下可以作用于inline元素。
- text-indent属性在IE67下会作用于替换元素（例如img元素）。
text-align属性可以为块级元素中的文本行进行水平对齐。
line-heigth属性在应用到块级元素时定义了元素中文本基线之间的最小距离，而不是一个绝对数值；
line-height属性并不影响替换元素的布局，不过确实可以应用到替换元素。
文本行中的每个元素都会生成一个内容区，这由字体的大小确定，这个内容区会生成一个行内框，line-height会增加或减少行内框的高度。
line-height的继承，line-height值从父元素继承时，要从父元素计算，而不是在子元素上计算；更好的办法是指定一个数作为缩放因子：
body{font-size:10px;} div{line-height:1em;}/*10px*/ p{font-size:18px;}
如上的CSS会导致行间距太小，可以这么修改：
body{font-size:10px;} div{line-height:1;}/*这样值会根据每个元素的font-size计算得到*/ p{font-size:18px;}
- vertical-align应用于行内元素和表单元格，一些WEB浏览器总把替换元素的底边放在基线上，基线下面的空间可能导致图像下面出现一段空白。
vertical-align使用百分比会根据元素的line-height值来计算。
vertical-align会影响行高，垂直对齐的文本并不会覆盖其他行中的文本，行框会足够大到包含行内最高行内框的顶端和最低行内框的底端。
如果为letter-spacing指定一个长度值，字符间隔则不会受text-align影响。
无法为word-spacing或letter-spacing定义一个可继承的缩放因子来取代计算值（像line-height那样），因此可以：
p{letter-spacing:0.25em;} small{font-size:50%;letter-spacing:0.25em;}
text-decoration可以一次指定多个修饰：a:link{text-decoration:underline overline;} ，该属性不继承。
white-space处理空白符，其中的值pre-wrap和pre-line是CSS2.1中新增加的。
white-space的nowrap不允许自动换行。
基本视觉格式化
宽度，边框，内边距，外边距中，只有外边距可以为负数。
如果垂直格式化的高度小于显示内容所需的高度，浏览器可能会向元素增加一个滚动条。
百分比高度的问题：一个正常流元素的height设置为一个百分数，这个值会根据包含块设置的高度进行调整，如果包含块没有显示声明高度，则百分比高度重置为auto。
垂直相邻外边距在元素没有内边距和边框的情况下会合并。
如果向行内的替换元素应用外边距，会影响行高。
CSS2.1规定元素的背景是内容、内边距和边框区的背景；边框宽度不能指定为百分数。
- CSS2中规定了透明边框transparent，在IE6中不支持，IE6会根据元素的color值来设置边框颜色。
background-attachment可以设置值为scroll或fixed，如果为fixed则可以固定显示。
浮动和定位
浮动元素的外边距不会合并。
浮动元素会生成块级框，即使元素本身是行内元素。
- CSS2.1澄清了浮动元素的行为的一个方面：浮动元素会延伸，从而包含其所有后代浮动元素（而CSS先前版本没有明确指出会发生什么情况）。
- CSS2.1说明了一个规则：行内框与一个浮动元素重叠时，其边框和背景和内容都在该浮动元素之上显示。
- CSS2.1说明了一个规则：块框与一个浮动元素重叠时，其边框和背景在该浮动元素下面显示，而内容在浮动元素上面显示。
- 使用了clear进行清除的元素的上外边距可能会被调整，因此就算设置了margin-top也可能紧贴着上面浮动元素（可以通过对浮动元素设置margin-bottom设置距离）。
- 在position:relative中，CSS2.1使用外边距来完成偏移计算。
- 绝对定位的存在宽度值的元素，如果左右外边距都设置为auto，则元素会水平居中，这与正常流中的auto外边距居中行为基本上一样。
- 绝对定位元素的上下外边距设置为auto的时候，可以实现垂直居中，但IE67不支持。
- 绝对定位元素会恰当收放，根据内容调整大小（如果未设置宽度的话）。
- 关于IE6下绝对定位的一个纯CSS实现思考：http://css-discuss.incutio.com/wiki/Emulating_Fixed_Positioning
* html{overflow: hidden;position: relative;left: 0px;top: 0px;width: 100%;height: 100%;} * html body{width: 100%;height: 100%;overflow: auto;padding: 0px;margin:0px;} * html .fixed{position: absolute;}
布局
固定的左右分栏
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 *{margin: 0px; padding: 0px;} 7 #c{width: 760px; margin: 0px auto;} 8 #header{height: 100px; background: #eee;} 9 #main{ 10 float: left; 11 padding: 10px 0px; 12 background: #09f url(img.gif) repeat-y right top; 13 } 14 #content{float: left; width: 560px; background: blue;} 15 #sidebar{ 16 float: right; width: 200px; 17 background: orange url(img.gif) repeat-y right top; 18 } 19 #footer{height: 80px; clear: both; background: #444;} 20 </style> 21 </head> 22 <body> 23 <div id="c"> 24 <div id="header">页头</div> 25 <div id="main"> 26 <div id="content">主内容</div> 27 <div id="sidebar">侧边栏</div> 28 </div> 29 <div id="footer">页尾</div> 30 </div> 31 </body> 32 </html>