读书笔记 CSS权威指南 1~4章

终于考完了，寒假充值成功！可以做我自己的事了>_< 按照计划，今天看了100页CSS权威指南。最大的感受是，这本书有点out of date了。。不过它仍不失为是一本好书。让我来总结一下今天学到的东西吧

第一章 CSS和文档

第一章大致的介绍了HTML早起的混乱，为了给文字添加上样式，迫于压力出现了<font><big><em>等没有标签。这样的标签使得文档的结构变得不够语义化。（至少我是这么理解的。它们对SEO也非常不友好）在这样的背景下W3C在1995年发布了CSS。比起之前的样式标签，CSS无疑将样式从HTML文档中分离出来,书中称CSS为那个时代的“救星”。

元素分类

替换元素

替换元素是指用来替换元素内容的部分并非由文本内容直接表示。在XHTML中，我们最熟悉的替换元素例子就是img元素，它由文档本身之外的一个图像文件替换，实际上，img没有实际内容。

非替换元素

大多数的HTML和XHTML元素都是非替换元素，这意味着，其内容由用户代理（通常是一个浏览器）在元素本身生成的框中显示。例如span h。段落、标题、表单元格、列表和XHTML中的几乎所有元素都是非替换元素。

块级元素

块级元素生成一个元素框，（默认地）它会填充其父类元素的内容区，旁边不能有其他元素。换句话说，它在元素之前和之后生成了“分隔符”。我们最熟悉的HTML块元素是p和div。替换元素可以使块级元素，通常不是。列表项是块级元素的一个特例，它的列表项前的圆点或数字

警告

许多古老的浏览器无法处理不同样式的@import指令。可以适当利用这一点对浏览器隐藏样式。
windows的IE不会忽略任何的@import指令。即使是出现在其他指令后的@import也不会。

兼容性

CSS要求@import指令出现在样式表中的其他规则前。如果一个@import出现在其他规则之后，兼容用户代理会将其忽略。

第二章 选择器

规则结构

每个规则（或者直接叫它样式声明吧）有两个基本部分：选择器（selector）和声明块（declaration block）。声明块由一个或多个声明组成，每个声明则是一个属性-值对。每个样式表由一系列规则声明。

元素选择器与伪元素选择器

特殊性是0,0,0,1的选择器。选取所有指向的元素，没啥好说的。

类选择器

兼容性

在IE7之前的版本中，不同平台的IE都不能正确地处理多类选择器。这些较早的版本机关可以选择列表中的一个类名，但是要根据列表中的多个类名选择就不无法工作。因此，p.class1可以工作，p.class1.class2就会寻找所有class属性为class2的p标签（也就是不会管class1了>_<）

ID选择器

注意

实际中，浏览器通常并不检查HTML中ID的唯一性，这意味着如果你在HTML中设置了多个相同ID的元素，就可能为这些元素应用相同的样式，但是这是不正确的。
这样会导致在编写DOM脚本时更为困难，因为getElementByID这样的函数的前提是仅一个元素有给定的ID

测试

如果多个元素具有相同的ID时，chrome和Firefox浏览器会对所有相同ID应用相同样式

警告

一些较老的浏览器不区分类名和ID名的大小写，但是现在绝大多数浏览器都要区分大小写

属性选择器

大概长这样的 p[class] 或者 img[alt] 或者 a[href][title]这样的是简单属性选择器，表示设置了这些属性的标签。（不知道对不对>_< 改天check下）
大概长这样的。p[class=”class1”] 或者 img[alt=”img”] 或者a[href=”helloworld”]这样的选择了属性值为XX的标签。

注意

如果根据类属性值查找元素，p[class=”class1 class2”]和p.class1或者p.class2是不同的（当然不同了。。）前者是一个完全串匹配，而类选择器则不是。另外，要注意ID选择器与制定id属性选择器也不是一回事。换句话说，h1#id1和h1[id=”id1”]之间存在着很微妙但是很重要的差别。（什么差别呢。。明天看了补上吧）

部分属性值选择

大概长这样的p[class~=”class1”]的就是根据其中类名中任意一个词来选择。比如说这样的

    <p class="urgent warning"></p>

如果用p[class=”urgent”]是选不到的，因为它是一个完全串匹配，需要这样p[class~=”urgent”]才能选择到。（测试了下，真的是>_<）波浪号~就是部分选择器的关键。另外css还提供了另外三种部分选择器。他们分别是

1. [attr^= “bar”] 选择属性值以bar开头的所有元素（bar只是指代的，你懂的）
2. [attr$=”bar”]选择属性值以bar结尾的所有元素。
3. [attr*=”bar”]选择属性值中包含bar的所有元素（只要属性里面包含了这几个字就算，上面的例子中用p[calss*=urgen]也可以选择到这个元素）
4. [attr|=”bar”]这个不太懂

理解父子关系

这个我知道，JavaScript Dom编程艺术里说了，这个关系不是祖先关系，只是父子关系。也就是两个直接相连的元素之间关系。body元素是浏览器默认显示的所有元素的祖先。html元素则是整个元素的祖先。出于这个原因，html元素也被称为根元素。

注意

html和body元素是唯一个子元素影响父元素的父子关系，因为html元素的内容是由body来渲染的。

• 后代选择器
  

  后代选择器也称为包含选择或者上下文选择器（contextual selector）（可以类比下DOM里的“选择器”）

注意

后代选择器最好不要超过3层，甚至，所有的嵌套选择器都最好不要超过3层。（是的，也是听说的>_

测试

ul>li+li选中了第二和第三个li元素，我认为可能的解释是，ul>li选中ul下的所有li元素（也就是3个），li+li因此需要进行3次选择，第一个li选择了第二个li,第二个li选择了第三个li。因此总共选择了第二和第三个li（听起来蛮有道理的，令人信服，哈哈哈）

        <ul>
            <li>
                <p>a</p>
            </li>
            <li>
                <p>a</p>
            </li>
            <li>
                <p>a</p>
            </li>
        </ul>

兼容

windows平台的IE6之前的不支持子选择器和相邻选择器。IE7对其进行了支持。

伪类和伪元素

我觉得这个才是最有意思的。伪类做了一些本应该由JavaScript来完成的事，并且更优雅的实现了。虽然有点不太符合结构样式还有行为分离的原则，但确实是一种非常棒的选择器。书中举出了4中a标签常用的伪选择器:active :hover :visited :link。在介绍的时候首先引出了顺序对于样式影响的重要性。书中给出了4种伪类选择器最佳的书写顺序。LVHA（LoVe,HA）这样书写可以保证active和hover正确影响a标签样式。关于其他顺序产生的结果不再敖述。

兼容

window6之前只允许动态伪类选择器选择超链接,而不允许其他元素。IE7支持所有元素应用:hover，但是不支持对表单应用:focus。

注意

支持诸如:hover这种行为的用户代理器在触发时必须重绘文档。这要求重新显示该链接之后的所有内容。CSS规范支出，文档在第一次显示之后，用户代理不必重绘文档。所以你不能完全依赖预想的效果，也就是说，不要指望你预想的效果肯定发生，强烈建议避免依赖这种行为的设计。（可以用JavaScript来实现，也就多点代码）

选择第一个子元素：first-child

这个选择器很容易和DOM里面的first-child搞混。实际上，CSS中的first-child选择的就是第一个这个元素，举个例子。p:first-child{}这个选择器就是选择父类下第一个p元素，是不是很搞笑。。。它又没说父类是谁。可能是为了补充div>p吧，子结合符会选中div下所有的p元素，用div p:first-child就只选中了第一个。

兼容

IE6之前都不支持first-child，不过IE7支持

结合伪类

大概就是这样子的:active:hover 或者 :link:hover的。不要把互斥的伪类结合到了一起，选不到的。

兼容

windows平台的IE6之前都不支持这样结合伪类。:active:hover 和:link:hover的效果是一样的，只会看最后一个伪类。IE7对其进行了支持。

伪元素选择器

:first-line,:first-line还有:befor,:after 这个可以通过结合content还有border做三角形。

第三章 结构和层叠

继承（Inheritance）是从一个元素向其后代元素传递属性值所用的机制。还要考虑声明的特殊，另外需要考虑声明本身的来源。这个过程就成为层叠。

特殊性

对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。

Style属性的特殊性是1，0，0，0
ID选择器的特殊性是0，1，0，0
类选择器，属性选择器和伪类的特殊性为0，0，1，0
元素选择器伪元素的特殊性为0，0，0，1
通配符和结合符没有任何特殊性

注意

CSS2中内联样式声明的特殊性是1，0，0.换句话说它与ID选择器的特殊性相同，所以ID选择器很容易覆盖内联样式。

测试

最新版本chrome和Firefox下style属性优先于ID选择器

重要性

！important
重要性总是优先于特殊性。

继承

继承的值会沿子元素一直向下传播知道没有更多后代元素继承位置。值觉得不会向上传播，也就是不会把值传递给祖先元素。继承没有任何特殊性，连0都没有

注意

在HTML中，对于向上传播规则有一个例外，应用到body元素的背景样式可以传递到html元素。HTML元素相应的可以定义其画布。

注意

0的特殊性比无特殊性要强

层叠

按权重和来源排序
读者的重要声明，创作人员的重要声明。创作人员的正常声明。读者的正常声明，用户代理声明。
按特殊性排序
按顺序排序

注意

要记住，在CSS2中，内联样式声明与ID选择器的特殊性相等。在一个CSS2（非CSS2.1）用户代理中，认为style属性声明出现在文档样式表的最后，并且与样式表中所有的其他声明一样按权重，来源，
特殊性，顺序排序。（出现在最后也就是会覆盖掉其他样式表的样式）

小结

层叠样式表中最基本的一个方面很可能就是层叠了-冲突的声明要通过这个层叠过程排序，并由此确定最终的文档表示。这个过程的狠心是选择器以及相关声明的特殊性，以及继承机制。

第四章 值和单位

值

大概长这个样子的#FFF，#CCC都会被用户代理每位复制1次，然后就变成了这样#FFFFFF,#CCCCCC（知道就可以了）

Web安全色

Web安全色总能在256色的计算机上避免抖动。形如rgb（51的倍数）（能被20%整除）或者#（3的倍数）

绝对长度单位

in/cm/mm/pc

操作系统对绝对长度的处理

因为大多数显示器实际上每英寸像素（ppi px per in）都要高于72，有时还会高很多，达到120或更高。mac os会无法设置ppi，它会假定1就是1pt，因此这样会使得展示出现各种各样的问题。一般来说，绝对长度更适合针对打印设备。

相对长度单位

em/ex/px/rem

em

在CSS中，1个“em”定义为一个给定字体的font-size值。如果一个元素的font-size为14个像素，那么对于该元素，em就等于14px。

ex

与em不同，ex是指所用字体小写x的高度。因此，如果有2个段落，其中文本的大小为24点，但是使用了不同的字体，那么实际的ex值可能是不同的。这因为如此，不同字体中的x高度可能不同。

em和ex实际问题

实际中，很多用户代理的做法是：取em的值，再取其一般作为ex值。为什么呢？显然，大多数字体都没有内置ex的高度值，而且计算这个值相当困难。由于大多数字体的小写字母都是相应大写字母高度的一半，所以可以方便的假设1ex等于0.5em（写这么多的意思就是，不要用ex了）

像素理论

在讨论像素时，CSS规范建议如果一个显示类型的设置与96ppi不同，用户代理应当把像素度量缩放为一种“参考像素”。CSS建议将90ppi作为参考像素，不过CSS2.1建议96ppi。

URL

URL可以分为2种，相对路径和绝对路径。书上说最好使用绝对路径。为啥呢，因为下面这种情况

<link rel="stylesheet" href="http://www.baidu.com/style/basic.css">

然后在basic.css中如果一个@import指向另一个样式表:

@import url(special/toppings.css)

那么此时的url实际上的地址应该读作http://www.baidu.com/style/special/toppings.css

inherit

在CSS2.1中有一个关键字是所有属性共有的，这就是inherit。inherit使一个属性的值与其父元素的值相同。大部分情况下不必指定继承，因为大多数属性本身会自然地继承。不过inherit还是很有用的。

例如

#toolbar{background:blue;color:white}

<div id="toolbar">
    <a href="" >hello</a>
</div>

这段代码中a标签的颜色会是浏览器的首选项设置来应用样式（一般情况下是蓝色的）

（这里有问题啊，不是说好的继承会向下一直延伸知道不能再延伸了吗。。还有，继承的优先级不应该大于系统浏览器的默认设置吗）