css权威指南--笔记

第1章 css和文档

    1，元素：替换元素（img input），非替换元素（大多数span）。

    2，link：rel（代表关系：stylesheet，候选样式表：alternate stylesheet）；type（text/css）；media：（all（所有表现媒体， screen，print），title（配合候选使用）。

    3，@import url(sheet1.css) 需在style内使用，放在其他css规则之前。

    4，向后可访问性：，这样较老浏览器会将style忽略，能理解css的浏览器能正常读取样式表。

    5，css注释：/* */。

第2章 选择器

    1，对声明分组时，一定要在各个声明的最后使用分号。

    2，p.warming.help {background:red;} 只匹配class包含warming和help的p元素，如果p包含warming和其他的则不能匹配。

    3，实际上，浏览器并不检查html中id的唯一性，但这会导致编写dom更困难。

    4，属性选择器：h1[class] {...} 

                         h1[class=''] {...}完全匹配

                         h1[class~=''] {...}部分匹配 [class^='']以什么开头 [class$='']以什么结尾 [class*='']包含什么的所有元素

                         *[lang|='en']特定属性选择器，会选择lang属性等于en或以en-开头的所有元素。

    5，选择子元素：h1>strong；选择相邻兄弟元素h1+p（h1和p有共同父元素，最终选择p）。

    6，链接伪类：未访问链接:link，访问过链接:visited（它们都是静态的），等同于

。

         动态伪类：焦点:focus，鼠标停留:hover，激活:active。（动态伪类可以用于任何元素）

         建议伪类顺序：link-visited-focus-hover-active。

         选择第一个子元素（:first-child)，很容易误解，是所有第一个子元素（在下面例子中，作为第一个子元素的元素包括第一个p，第一个li和strong及em）。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span>     <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>helooo<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>111<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>222<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>         <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>333<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>

        根据语言选择（:lang()），如*:lang(fr){color:red;} 这是将所有法语元素变成红色。

        伪元素选择器：首字母:first-letter，用户代理动态构成假象元素；

                            第一行:first-line；

                            之前和之后:before :after。

第3章 结构和层叠

    1，实际上，所有样式冲突的解决都是由层叠来处理。

        选择器的特殊性：id选择器（0,1,0,0）；类 属性 伪类（0,0,1,0）；各个元素和伪元素（0,0,0,1）；通配选择器（0,0,0,0）；内联样式（1,0,0,0）。

        重要性：!important放在声明的结束分号之前。

    2，例外：应用到body元素的背景样式可以传递到html元素（html是文档的根元素），相应的可以定义其画布。

        大多数框模型属性都不能继承（包括外边距 内边距 背景 边框），继承的值没有特殊性，0特殊性比无特殊性要强。

    3，声明权重由大到小：读者的重要声明>创作人员的重要声明>创作人员的正常声明>读者的正常声明>用户代理声明。 

        通过将伪类链接在一起，可以缓解特殊性和顺序带来的问题。

第4章 值和单位

    1，函数式rgb颜色：rgb(color)，color用一个百分数（0%-100%）或者整数三元组（0-255）表示。

        十六进制rgb颜色：将三个介于00-FF的十六进制数连起来，就可以设置一种颜色。

        web安全颜色：在256色计算机系统上总能避免抖动的颜色。rgb值20%和51的倍数，0% 0也是，十六进制值00,33,66,99，cc，ff。

    2，绝对长度单位：in cm mm pt pc。

        相对长度单位：1个em定义为一种给定字体的font-size值（这个值随元素的不同而不同），ex指所用字体中小写x的高度，px非常适合用于度量图像大小（一小网格就是1像素）。

    3，a{color:inherit}可以让链接使用继承的color值而非用户代理的默认样式。

    4，角度值：度（deg），梯度（grad），弧度（rad），都允许度数。

        时间值：ms，s，不允许负值。

        频率值：Hz，MHz，不允许负值。