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

第一章：CSS和文档

　　html是结构化语言，css是样式语言，html主要用来被强大的搜索引擎更好的索引，更好的让一个盲人通过语音浏览器来了解我们的网页，这也就是为什么说html是结构话语言，因为这是W3C规定的，大家都在遵循，统一的标准会给所有人带来便利（比如上面提到的盲人）。

　　从web的衰落开始谈起，当时web只是用简单的html来编写，大量的流行，为了更好的展示，于是出现了一些<font>，<center>等用来表现的标签，使得html非常的混乱。1996年，CSS已经成为一个成熟的推荐草案，它就是我们的救星，也就是上面说到的样式语言，顾名思义，就是用来改变网页的样式的，因为有了css强大的改变样式，开始从html中去除样式元素，例如 <font>、<center>，这也就是我们现在在写html代码中，尽量不要去使用的原因。

　　元素》元素是文档结构的基础，每一个元素都会生成一个Box（盒子）。元素分为替换和非替换元素，替换元素（replace element ）是指用来替换元素内容的部分并非由文档内容直接表示。 例如：img、input，非替换元素，意味着内容是由用户代理（通常是一个浏览器），在元素本身生成的框中显示。元素显示角色：块级元素，行内元素，行内元素不会在它之前或之后生成“分隔符”，块级元素不能继承自行内元素。

　　link 标记，css 使用这个标记来连接样式表和文档，外部样式表不能包含有任何html代码，只能包含css规则和css注释。属性rel(relation) 代表关系，关系为 stylesheet ，type总是 text/css ，这个值描述了使用link加载的数据的类型，href 属性的值是样式表的URL，可以是相对和绝对路径。media 属性，目前支持的就三个值：all 、print和 screen，all 、说明这个样式表应用于所有表现媒体，print 、 为视力正常的用户打印文档时使用，另外还会在显示文档的“打印预览”时使用，screen    在屏幕媒体（如桌面计算机监视器）中表现文档时使用，在这种系统上运行的所有web浏览器都是屏幕媒体用户代理，可以在多个媒体中，使用一个样式表，中间用逗号分隔，可以在多个媒体中，使用一个样式表，中间用逗号分隔。

　　候选样式表： rel 的属性值为 alternate stylesheet ，可以定义候选样式表，只有用户选择这个样式表才会用于文档表现。style 元素，可以用style元素包含样式表,它在文档中单独出现。加载外部样式表@import,@import 出现在样式表的开头，可以(一般)在css中引入。内链（内部自带）样式，在html中使用 style 设置一个内链样式。在使用中由于浏览器的不同，导致无法某些标记，向后可访问性，为了防止浏览器无法识别的标记，建议用 <!-- 和 --> 将其包含。

　　小结，利用CSS 会完全改变用户代理表现元素的方式，内链样式和外部样式的区别，外部样式使网站的所有信息都放在一个位置，不仅使网络的更新和维护相当容易，还有助于节省宽带，因为文档中去除了所有表现信息。在本节中提到了 display 用法，display    规定元素应该生成的框的类型，inline    此元素会被显示为内链元素，元素前后没有换行符，block    此元素会被显示为块级元素，元素前后会带有换行符，none    此元素不会被显示，list-item    此元素会作为列表显示

第二章：选择器

　　css基本规则，规则结构，每个规则有两个基本部分，选择器和声明块，声明块由一个或多个声明组成，每个声明则是一个属性对应一个值，告诉我们怎么写css。

　　元素选择器，最常见的选择器往往是html元素，换句话说，文档的元素就是最基本的选择器。分组，多个元素应用同一个样式，或者向一个元素或一组元素应用工多个样式。选择器分组，例如：h1,h2{color:#999999;}，声明分组，例如： h1{color:red;font-size:18px;}。通配选择器（*），类选择器，选择器p.waring 解释为：其class属性包含warning的所有段落。多类选择器，就是html元素可以有多个class值。

　　如何选择类选择器还是ID选择器，浏览器不会检测html中ID的唯一性，但是如果一个文档中有多个相同ID的值，这回编写DOM脚本困难，例如用 document.getElementById 的时候。我们给那些重要的，只出现一次的，使用ID选择器。

　　简单属性选择器，选择有class属性的所有h1标签，h1[class]{color:#fff;},对带有alt属性的图像应用某种样式，img[alt]{border:1px solid red;}。还可以根据多个属性进行选择，只需要将属性选择器链接在一起就行，例如 a[href][title]{font-weight:bold;}。根据具体属性选择，例如 a[href="http://www.baidu.com"]{样式}。根据部分属性属性值选择元素，使用"~="，img[title~="good"]{border:1px solid gray;} 选择title中包含good的所有图像。子串匹配属性选择器，
[class*="test"]    选择 class属性包含子串test的所有元素
[class^="test"] 选择 class属性以test开头的所有元素
[class$="test"] 选择 class属性以test结尾的所有元素，子串匹配属性选择器用于任何属性，例如：class,href,alt,title等等。特定属性选择类型，*[lang|="en"]{color:white;} 这个规则会选择lang属性等于en或者en开头的所有元素，也用于任何属性和值。

　　使用文档结构：后代选择器，关于后代选择器的一个重要方面，两个元素之间的层次间隔可以是无限的，不论你的嵌套层次有多深。选择子元素，如果你想选择一个任意的后代选择器，使用 大于号(>)，选择一个元素的子元素
选择相邻兄弟元素，使用加号（+），它们要有着共同的父元素。

　　伪类和伪元素，所有伪类和伪元素关键字前面都有一个冒号：，类选择器，ID选择器都适用于伪类。在CSS2.1 中，静态伪类有 link和visited ,动态伪类： focus,hover,active。伪类的顺序通常如下：link-visited-focus-hover-active,警告，IE6 之前只允许动态伪类选择超链接。选择第一个子元素，first-child，IE6之前不支持first-child ，IE7支持。结合伪类：a:link:hover{鼠标指针停留在未访问链接上时}，a:visited:hover{鼠标停留在已经访问链接上时}，IE6 不能识别这些组合，IE7可以。结合伪类：a:link:hover{鼠标指针停留在未访问链接上时}，a:visited:hover{鼠标停留在已经访问链接上时}，IE6 不能识别这些组合，IE7可以。

　　小结，通过选择器来创建css规则，可以使我们的样式表简洁、灵活、缩小文件大小、缩短下载时间。所以我们必须正确的编写选择器，能让用户代理正确的解释选择器。通过学习，让我更了解类选择器，对元素选择器从来用过到了解，伪元素或者伪类的实现，是由用户代理（这里指浏览器）动态构造的。对伪类细节更了解，上面提到的选择器：类选择器-》ID选择器-》元素选择器（基本选择器）-》多类选择器-》简单属性选择器-》后代选择器-》伪类选择器-》伪元素选择器。

第三章：结构和层叠

选择器的特殊性；用户代理会计算选择器的特殊性，将这个特殊性附加到规则中的各个声明，如果声明冲突，那么最高特殊性的声明就会胜出。
一个选择器的特殊性具体如下：
对于选择器中给定的各个ID属性值，加                  　　0,1,0,0
对于选择器中给定的各个类属性值、属性选择和伪类加    0,0,1,0
对于选择器中给定的各个元素和伪元素加                　  0,0,0,1
结合符合通配选择器对特殊性没有任何贡献                
内链样式的特殊性                                   　　　　 1,0,0,0

通配选择器特殊性，一个选择器中包含通配选择器和其他选择器，改选择器的特殊性不会因通配选择器的出现而改变。用 !important 表现重要性。

继承是css最基本的内容，有些属性不能被继承，例如属性border，0特殊性比无特殊性更强，例如，继承就没有特殊性，通配选择器比他要更强，所以尽量不要使用通配选择器。

层叠，!important 重要性会比内链样式权重高。
在声明权重方面考虑5级，权重由大到小依次为：
1，读者的重要声明（这里指用户）
2，创作人员的重要声明（创作人员指web开发人员）
3，创作人员的正常声明
4，读者的正常声明
5，用户代理声明

在CSS2中，认为style属性声明出现在文档样式表的最后。

非css表现提示，例如font元素，被处理为特殊性为0，只要有创作人员样式，并出现在创作人员样式的前面，就会被覆盖
总结：通过学习层叠，通过特殊性和顺序来确定样式的优先级，最后达到文档的表现。

第四章：值和单位

 　　在利用CSS能做的所有工作中，其基础都是单位。例如：数字，百分数，颜色，命名颜色，用RGB指定颜色，函数式RGB颜色rgb(color)，十六进制RGB颜色，web安全颜色，长度单位。绝对长度单位：英寸（in），厘米(cm)，毫米(mm)，点(pt)，派卡(pc)，相对长度单位：相对单位是因为它们是根据其他事物的关系来度量的。有三种相对长度单位，em,ex,px。 1em=14px,像素理论，像素不是最好的选择，em才是。url绝对路径和相对路径，关键字none，inherit 使一个属性的值与其父元素的值相同。可以在继承的时候使用。

　　总结：对于这一章了解不是太清楚，可能感觉用的不太多吧，大多都用了px，希望以后能好好的了解下