【读书笔记】CSS权威指南 第三版

2014-11-04 14:48 by Paranoid江凯, ... 阅读, ... 评论, 收藏, 编辑

第一章 CSS和文档

CSS：cascading style sheet层叠样式表

W3C：world wide web consortiam万维网联盟

元素（element）是文档（document）的基础，分为

• 替换元素（replaced element）：是指用来替换元素内容部分并非由文档内容直接表示
• 非替换元素（nonreplaced element）：其内容由用户代理（通常是一个浏览器）在元素本身生成的框中显示
• 块级元素（block-level）：生成一个元素框，在元素框之前和之后生成了“分隔符”。块级元素会填充其父元素的内容区
• 行内元素（inline-level）：在一个文本行内生成元素框，不会打断这行文本。不在本身前后生成“分隔符”

HTML和XHTML中，块级元素不能继承自行内元素，CSS对角色如何嵌套不存在限制

• 外部样式表（external style sheet）

<link rel=”stylesheet” type=”text/css” href=”” media=”all ”/>

• 候选样式表（alternate style sheet）：将rel的属性设置为alternate stylesheet，只有用户选择这个样式表时才会永远文档表现。title也是link 的一个属性，浏览器会使用link元素的title属性值为候选样式表命名，同样的title值得候选样式表将被浏览器分组到一起。IE本身不支持候选样式表，可以通过javascript支持

如果为一个rel为stylesheet的link指定了标题，也就指定了该样式表要作为PReferred style sheet（首选样式表），如果将一组样式表指定为首选样式表，那么只会使用其中的一个

• <style type=”text/css”> </style> 文档样式表，嵌套样式表
• @import url（） 只能出现在style容器中，而且CSS要求@import指令出现在样式表中的其它规则之前，否则会将其忽略（IE不会忽略任何@import指令）

向后可访问性：将声明包含在HTML注释标记中，较老的不支持style的浏览器则会将style忽略，其后的声明当初注释。

CSS注释：/* */不支持嵌套

• 内联样式（inline style）：不建议使用

第二章 选择器

每个样式表由一系列规则组成。规则：选择器（selector） 声明块（declaration block） 。声明块由一个或多个声明组成。每个声明都是一个属性-值对（property-value）

• 元素选择器：HTML元素

几乎在所有的情况下，值要么是一个关键字，要么是该属性可取关键字的一个列表，关键字之间用空格分隔，如果声明中使用了不正确的属性或者值，整个声明都会被忽略

特例：h2 {font: large/150% sans-serif}; 斜线用来分隔设置字体大小和行高的两个关键字

选择器分组：用逗号分隔不同的选择器

• 通配选择器（universal selector）：显示为一个*，可以与任何元素匹配
• 声明分组：在各个声明的末尾加分号。通常用结合选择器和声明的分组
• 类选择器（class seector）：要应用样式而不考虑具体涉及的元素 .class{property:value}

多类选择器：一个class值中可能包含一个词列表，各个词之间用空格分隔，顺序无关紧要。IE6不能正确处理多类选择器

• ID选择器：浏览器并不检查ID的唯一性，但建议ID不要重复使用。ID属性不允许以空格分隔的词列表
• 属性选择器：

对于类选择器和ID选择器，实际上是选择属性值。

• 简单属性选择希望选择有某个属性的元素，不管该属性的值是什么 elements[property
• 根据具体属性值选择elements[property=””]，
• 根据多个属性或者属性值进行选择，只需用多个中括号连接在一起。
• 部分属性值选择：class属性可以接受词列表（词之间用空格分隔），可以根据其中任意一个词进行选择

p[class~=””]{} 波浪号是部分选择的关键，表示根据属性值中出现的一个用空格分隔的词来完成选择

在CSS2完成之后发布一个【字串匹配属性选择器】，实际上也是部分值属性选择器,IE7支持

• [foo^=”bar”] 选择foo属性值以“bar”开头的所有元素
• [foo$=”bar”] 选择foo属性值以“bar”结尾的所有元素
• [foo*=”bar”] 选择foo属性值包含字串”bar”的所有元素

特定属性选择类型： [lang |= “en”]{}; 这个规则会选择lang属性等于en或者以en-开头的所有元素