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