css（1996）
- 创作人员样式表
- 读者样式表
- 浏览器样式
每个元素生产一个框（box，也成为盒）。
- 替换（img、input）
替代元素是浏览器根据其标签的元素与属性来判断显示的具体内容
-
非替换
-
块级元素
列表项
- 行内元素
在 HTML、XHTML 块级元素不能继承自行内元素（即不能嵌套在行内元素中
css部分或全部被忽略
要包含.css
media:
- all
- aural
- projection
- screen
media="screen, projection"
候选样式表
rel="alternate stylesheet" title="Big"
view -> page style
可以为候选样式表指定相同的 title，把它们分组在一起。
首选样式表
多个首选样式表，无法知道使用哪一个。
没有为样式表指定title，那么它将作为永久样式表。
- 外部样式表
- 文档样式表（嵌套样式表）
- 内联样式
@import url(style.css) projection, print;
放在其他规则之前
放置在其它规则之后将被忽略（Internet Explorer是个例外）
较老的浏览器无法处理不同形式的@import指令，可以利用这一点，对这些浏览器隐藏样式。
<style type="text/css"><!--
@import url(sheet2.css);
h1 {color: red;}
--></style>
css 注释 /* ... */ 不能嵌套
“外部”注释会在“内部”注释结束处结束
股则：
选择器 声明块
声明块：
属性 ：值（关键字往往由空格分隔）
font: large/150% sans-serif;
如果声明中使用了不正确的属性或不正确的值，整个声明都将被忽略。
统配选择器
color: purple background: aqua;
最后一个声明缺少分号，较老的浏览器（Internet Explorer3.x）可能不知所措。
- 元素选择器
- 类选择器（对XML文档不一定奏效）
- ID选择器（可以在任何文档语言中使用）
class & ID 选择器可能区分大小写，取决于文档语言（一些较老的浏览器不区分）
- 属性选择器（部分老的 IE不支持）
- 简单属性选择
[attr]，a[href][title](多个属性选择，没有空格）- 属性值选择
- 根据部分属性值选择（~=, 空格分词）
- 子串匹配属性选择器
- ^=
- $=
- *=
- 特定属性选择类型
*[lang|="en"]: 等于en或以en开头
*.waring {font-weight: bold}
class属性为warning的所有元素
class=“urgent waring"
.waring {
font-weight: bold;
}
.urgent {
font-style: italic;
}
.warning.urgent {
background: silver;
}
IE7之前，不能正确处理多类选择器，p.warning.help 被识别为 p.help（help出现在最后）。
*#lead-para {font-weight: bold;}
ID 选择器仅仅使用一次.
设置相同ID的多个元素，可能有相同的样式。
getElementById 在 Chrome 只返回第一个元素
ID选择器 & 指定id属性的属性选择器不是一回事
body 元素是浏览器默认显示的所有元素的祖先，html 则是整个文档的祖先，html 也被称为根元素
两个元素之间的文本内容不会影响相邻兄弟结合符起作用。
文本内容不包含在兄弟元素中
IE6之前不支持子选择符和兄弟选择符
- 伪类选择符（锚）
- 伪元素选择符(假想元素，出现在选择器的最后面)
- 首字母
- 首行(块级元素)
- 之前
- 之后
静态伪类（不会再次改变文档的样式）
-
:link: 未访问
为了避免将链接样式应用到目标锚（<a name="section1">1. ...</a>), 要使用 :link 伪类。
-
:visited: 已访问
<body link="purple" vlink="silver">
动态伪类
- :focus(获得输入焦点的元素)
- :hover
- :active(鼠标点击超链接)
body *:hover {
background: yellow;
}
CSS规范指出，文档第一次显示之后，用户代理不必重绘文档，:hover 改变字体大小的操作可能不发生。
- :first-child（IE6之前不支持）
作为某元素的第一个子元素
:lang(fr) 和 [lang|="fr"] 效果一样
伪类比属性选择器稍微健壮一些，语言信息可以从其他方面获得。
a:link:hover == a:hover:link(IE6只关心最后一个伪类)
不要把互斥的伪类结合在一起使用
a:link:visited 没有任何意义, 用户代理往往会忽略这种选择器，但不能保证不同浏览器不同的错误处理行为。
网友评论