《CSS 权威指南》（第3版）读书笔记

第一章 CSS和文档

块级元素：p, div; 行内元素：a, em, strong, ul, ol,

候选样式表：<link rel="alternate stylesheet" type="text/css" title = "Big-text" href="bigtext.css" /> page 23 
@import, 向后兼容性（page 26）

外部样式表 文档样式表/嵌套样式表 内联样式表

第二章 选择器

元素选择器 h2 {color:red;}
选择器分组 h1, h2, h3, h4, h5, h6 {color: purple;}
声明分组

类选择器
通配符 * : 所有元素 ; *.warning : class属性为warning的所有元素; p.warning : class属性为warning的所有p元素;
多类选择器: .warning.urgency class中同时包含warning和urgent的所有元素

ID选择器
*#lead-para {font-weight: bold;} 与 #lead-para {font-weight: bold;} 效果一样;

属性选择器
根据具体属性值选择: a[href="http://www.w3school.com"][title="W3C"] {font-weight: bold;}
根据部分属性值选择: span[class~="barren"] 与span.barren等价, 那么为什么会有~=这种属性选择器呢，因为它不单可以运用于class属性，还可以运用到其它属性，比如title

字串选择器:
[foo^="bar"] : 选择foo属性值以"bar"开头的所有元素
[foo*="bar"] : 选择foo属性值包含"bar"的所有元素
[foo$="bar"] : 选择foo属性值以"bar"结尾的所有元素
eg : a[href*="oreilly.com"] {font-weight: bold;}

特定属性选择类型:
*[lang|="en"] {color:white;} 说明:lang属性为en或以en开头的所有元素

后代选择器:
ul em { color: purple; } 两个元素之间的层次间隔可以是无限的， 选择从ul继承的所有em元素，无论em嵌套的有多深。

子选择器:
h1 > strong {color:red;} 选择只作为h1元素子元素（不是后代元素）的strong元素, 通过文档的树结构，表现为匹配树中直接相连的元素

选择相邻兄弟元素:
h1 + p {margin-top:0} 选择紧接(挨着)在h1元素后的p元素, 二者有相同的父元素
li+li 只能选中两个相邻兄弟中的第二个元素

伪类选择器:
静态伪类:
:link, :visited ,第一次显示之后,不会再改变文档的样式, 可与类、ID连用
a.external:link
a#external:link

动态伪类（:focus, :hover, :active）: 可以应用到任何元素，对非链接的元素应用动态样式也挺有效果，eg: input:focus {background-color:blue;}
problem: 文档第一次显示之后，用户代理不必重绘文档，预想的效果不一定会发生。

选择第一个元素: :first-child

根据语言选择: :lang() 就像是|= 属性选择器 eg: *:lang(fr) {font-style: italic} 把所有法语元素变成斜体

结合伪类: 
a:link:hover {color:green;} 悬浮在未访问的链接显示绿色
a:visited:hover {color:red;} 悬浮在已访问的链接显示红色
a:link:hover:lang(de) {font-weight:bold;} 指定德语元素的样式

伪元素选择器:
伪类为锚指定幻象类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果
设置第一个元素的样式: h2:first-letter {color:maroon;} 用户代理会对假想元素做出相应，<h2><h2:first-letter>T</h2:first-letter>his is an h2 element.</h2>
设置第一行的样式: p:first-line {color:purple;}
设置之前和之后元素的样式: :before,:after body:after {content:" The end."}

第三章 结构和层叠

1.特殊性
多个规则附加到一个元素上，元素呈现的样式取决于选择器的特殊性，有一个或多个冲突，具有最高特殊性的声明胜出.
各个选择器特殊性取值: Page70
统配选择器特殊性为: 0 0 0 0
ID选择器特殊性为: 0 1 0 0
属性选择器特殊性: 0 0 1 0
内联样式特殊性: 1 0 0 0(CSS2.1新增)
重要性: !important h2{color:blue !important} 有这个标志的声明权重高于没有此标志的声明

2.继承
eg: h1{color:gray} <h1>This is an<em>emphasis</em> element</h1> ,emphasis显示为灰色，因为继承了h1中的属性，若没有继承则显示为黑色
border属性不能被继承，大多数框模型属性（外边距、内边距、背景、边框），都不能被继承，原因:避免文档变得混乱
继承的值完全没有特殊性，不如特殊性为0的声明，比如*规定的声明
继承值完全没有特殊性，也不容忽视:
#toolbar{color:white; background:black} 若元素中的文本都是纯文本，正常起作用; 若都是超链接，用户代理的超链接样式可能占上风，它们的颜色可能是蓝色
#toolbar{color:white; background:black} #toolbar a:link{color: white} 起作用
3.层叠
创作人员的样式和读者的样式高于用户代理的样式; 创作人员的样式高于读者的样式
权重等级由大到小:
①读者的重要声明；
②创作人员的重要声明；
③创作人员的正常声明；
④读者的正常声明；
⑤用户代理声明
权重、来源， 特殊性， 顺序
LVHA LoVe/HAte :Link :Visited :Hover :Active

第四章 值和单位

第五章 字体

第六章 文本属性

第七章 基本视觉格式化

1.内边剧不能为复制，外边距可为负值
2.要让一个元素不在正常流中，唯一的办法就是使之成为浮动或定位元素
3.元素的width:左内边界到右内边界的距离，不包括内边距和边框的宽度； 元素的height:上内边界到下内边界的距离，不包括内边距和边框的宽度；

4.元素的7个属性中，只有width、margin-left、margin-right可以使用auto这个属性

5.7个水平属性的总和要等于块级父元素的width，7个垂直属性的总和要等于块级父元素的height值

6.像width一样，height定义了内容区的高度，而不是可见元素框的高度。元素框上下内边距、边距、外边距都会增加到height值

7.line-height相对于元素本身的font-size设置

8.line-height设置为一个原始数字值，这个数成为缩放因子，并且该因子是一个继承值而非计算值

9.display:inline; 改变显示角色，而不是其本质。<a><p style="display:inline;"></p></a> 是不合法的。 块级元素可以包含行内元素，但行内元素 不能包含块级元素

第八章 内边距、边框和外边距

 248