css权威指南（上）
替换元素指用来替换内容的部分并非由文档内容直接表示，最常见的是图片，与之对应的就是非替换内容
<img src="how.gif"/>
display展示的形式，常见的值none、inline（行内）、block（块）
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/>
<style type="text/css">
...
</style>
<style type="text/css">
@import url(sheet2.css); /*必须放在其他css规则之前，否则不起作用*/
h1{color:gray;}
</style>
向后兼容，对于不支持<style></style>的浏览器，将会以文本的形式显示css中的内容，解决方法:
<style type="text/css"><!--
@import url(sheet2.css);
h1{color:gray;}
--></style>
<p style="color:gray;">123456</p>
第二章 选择器
h1,h2,h3{color:red;background:yellow;}
*{color:red;background:yellow;}
p.warning{font-weight:bold;}
#lead-para{font-weight:bold;}
h1[class]{color:silver;} //属性选择器，拥有class这个属性
h1[class="t1"]{color:silver;} //属性选择器，拥有class这个属性，并且值等于“t1”
子串匹配选择器
[foo^="bar"] /*选择foo属性以“bar”开头的所有属性*/
[foo$="bar"] /*选择foo属性以“bar”结尾的所有属性*/
[foo*="bar"] /*选择foo属性包含“bar”的所有属性*/
后代选择器
h1 em {color:gray;}
选择子元素
h1>em {color:gray;}
选择相邻兄弟元素
h1+p {color:gray;} /*h1元素后的p元素*/
伪类选择器
:link未访问过的地址的锚
:visited已访问过的地址的锚
a #footer-copyright:visited{font-weight:normal;}
:focus拥有焦点时
:hover指针停留在元素上
:active被激活的元素（点击鼠标时）
顺序:link→:visited→:hover→:active
另一个静态伪类:first-child来选择元素的第一个子元素，这个很容易混淆
p:first-child{font-weight:bold;} /*选择作为元素的第一个子元素<p>*/
结合伪类
a:link:hover{color:red;} /*停留在未点击的链接上*/
伪元素选择器
p:first-letter{color:red;} /*对首字母设置样式*/
:first-line{color:red;}
first-letter和:first-line只能应用到块级元素
所有伪元素只能放在选择器的最后面
设置在之前和之后元素的样式
h2:before{content:"[[";color:silver;} /*在每个h2元素前加一对银色中括号*/
body:after{content:"The End.";}
第三章 结构和层叠
特殊性
一个元素有多个冲突的属性，取最高特殊性的声明
选择器中有ID属性值加0,1,0,0
选择器中有类属性值、属性选择或伪类加0,0,1,0
选择器有各个元素和伪元素加0,0,0,1
p em{color:purple;} /*特殊性为0,0,0,2*/
声明和特殊性
每个内联样式的特殊性是1,0,0,0
重要性
p.dark{color:#333 !important;}
重要性与特殊性不比较（与非重要性比较），!important要放到声明的最后（分号之前，否则整条声明无效）
继承
继承会沿着文档树向下传播，大多数框模型属性（外边距、内边距和背景等）不能继承
继承的属性没有特殊性，为0,0,0,0
层叠
CSS让样式层叠在一起，是通过结合继承和特殊性做到的
第四章 值和单位
h1{color:rgb(100%,100%,100%);} /*大于100%，小于0%将被转化为100%和0%*/
h1{color:rgb(255,255,255);} /*同上转化为0和255*/
h1{color:#FF0000;} /*00~FF*/
h1{color:#F00;} /*会自动复制成两位：FF0000*/
绝对长度常用单位英寸（in）和点（pt）1in=72pt，厘米毫米米等
相对长度常用的有em（等于父元素字体的大小）、ex（相对于x的高度）和px（像素）
关键字
用于描述一个值的字
a:link,a:visited{text-decoration:none;} /*这个none*/
inherit是所有属性共有的，使一个属性的值与父元素相同，多数情况下属性会自然继承，不必指定
第五章 字体
可以使用属性font-family指定文档的字体
body{font-family:sans-serif;}
body{font-family:Arial,sans-serif;} /*若前一种字体不存在，则采用后一种字体*/
如果字体名称里包含空格、$#等类似符号，需要加引号
h2{font-family:wedgie,'Karrank',Klingon,fantasy;}
font-weight属性用于字体加粗，值有normal、bold、bolder、lighter、100、200、...inherit等
font-size，xx-small、x-small、small、medium（默认值）、large、x-large、inherit等
body{font-size:15px;}
body{font-size:120%;}
font-style字体风格，italic（带有一些变形的斜体）、oblique（生硬的变斜）、norma（默认）和inherit
font-variant字体变形，small-caps（首字母大写）、normal（默认）和inherit
font属性集合了所有的字体属性
h1{font-family:Verdana,Helvetica,Arial,sans-serif;font-size:30px;font-weight:900;font-style:italic;font-variant:normal;}
h1{font:30px 900 italic normal Verdana,Helvetica,Arial,sans-serif;}
在简写的font属性中，后两个值font-size必须在font-family之前（其它属性顺序不规定），并且这两个值一定存在，不然整条声明无效
可以使用系统的字体
caption标题icon图标menu菜单message-box对话框small-caption小控件status-bar窗口状态栏
button{font:caption;font-size:1em;}
第六章 文本属性
文本缩进text-indent属性，<length>（长度）<percentage>（按照父元素的百分比计算）inherit，行内元素和图像之类的替换元素无法应用text-indent属性
p{text-indent:3em;} /*可以设置为负值，注意别超出左边界*/
水平对齐text-align属性，left（左对齐）、right（右对齐）、center（居中）、justify（两端对齐，会拉伸单个词或字的间隔）和inherit，同样只应用于块级元素
行高text-height指文本行基线之间的距离，而不是字体的大小，<length>、<percentage>、<number>、normal和inherit，行间距就是text-height减去font-size，再除2就是字的顶部和底部的留白
垂直对齐vertical-align，baseline（默认值：基线对齐）、sub（下标：基线以下）、super（基线以上）、bottom（底端对齐：行内框的底端与行框底端对齐）、text-bottom（文本底端对齐）、moddle（把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐）、top（与bottom相反）和text-top（与text-bottom相反）
p{vertical-align:5px;} /*将元素与对齐前上升5px，也可以是负数*/
字间距word-spacing，<length>、normal和inherit
字母间隔letter-spacing，<length>、normal和inherit
文本转换text-transform，uppercase、lowercase、capitalize（每个单词的首字母大写）、none和inherit
文本装饰text-decoration，none（关闭所有装饰）、underline（下划线）、overline（上划线）、line-through（中间划线）、blink（闪烁）和inherit
处理空白符white-space，会影响文档中的空格、换行和tab字符的处理，normal（默认：多个空白符合并为一个空格）、nowrap（除非使用了br元素，否则会防止元素中的文本换行）、pre（多个空白符不会被省略）、pre-wrap（保留多个空白符，文本会正常换行）、pre-line（与pre-wrap相反，省略空白符，保留换行符）和inherit
文本方向direction，ltr、rtl和inherit
