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><!-- 样式 --></style>，这样较老浏览器会将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（它们都是静态的），等同于<body link='' vlink=''>。
动态伪类：焦点:focus，鼠标停留:hover，激活:active。（动态伪类可以用于任何元素）
建议伪类顺序：link-visited-focus-hover-active。
选择第一个子元素（:first-child)，很容易误解，是所有第一个子元素（在下面例子中，作为第一个子元素的元素包括第一个p，第一个li和strong及em）。
1 <div> 2 <p>helooo</p> 3 <ul> 4 <li>111</li> 5 <li><strong>222</strong></li> 6 </ul> 7 <p> 8 <em>333</em> 9 </p> 10 </div>
根据语言选择（:lang()），如*:lang(fr){color:red;} 这是将所有法语元素变成红色。
伪元素选择器：首字母:first-letter，用户代理动态构成假象元素<p: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，不允许负值。
第5章 字体
1，serif字体：这些字体成比例，而且有上下短线；sans-serif：这些字体是成比例的，而且没有上下短线；cursive：模仿人的手写体。
2，建议在所有的font-family规则中都提供一个通用字体，这样当用户代理无法提供特定字体时，就可以选择一个候选字体，如：font-family:Times,TimesNR,...,serif，当字体名包含# ￥ 空格之类的符号时就要加上引号。
3，font-weight：normal和bold分别对应400和700，font-weight是可以继承的，让字体更粗bolder，让字体更细lighter。
4，font-size：larger和smaller缩放因子1.2（通常），百分值是根据从父元素继承的大小，与相对大小关键字一样百分号可以积累。
1 p{font-size:12px;} 2 em{font-size:120%;} /* 12px*120% */ 3 strong{font-size:135%;} /* 12px*120%*135% */ 4 <p><em><strong></strong></em></p>
5，font-style：默认值normal，斜体italic，倾斜oblique。
6，font-variant（字体变形）：默认normal，小型大写字母文本small-caps。
7，font-stretch（字体拉伸）：wider...不过现在浏览器都还不支持%>_<%。
8，font-size-adjust（调整字体大小）：目前测试只有firefox支持，x的高度除以font-size的结果称为方面值。
9，font:（font-style font-variant font-weight）（font-size font-family）前三个顺序随意，后面两个固定且必须，line-height可以加在font-size后面且用'/'隔开。
10，@font-face{font-family:'';src:url();}会延迟文档显示。
第6章 文本属性
1，text-indent应用于块级（可以是数值 百分数 inherit），可以继承。
2，text-align用于块级（left（默认） right center justify（两端对齐） inherit），可继承。
3，line-height：em ex和百分数都是相对于元素的font-size值计算的。行间距=（line-height）-（font-size），然后行间距除以2分别加在内容区的顶部和底部就是行内框。
4，vertical-align：用于行内及替换元素，无继承性，默认baseline。sub使元素变为下标，super将元素的基线相对于父元素的基线升高。
5，word-spacing：字间隔，值可为正值 负值 0（narmal）；letter-spacing：字母间隔，值可为正值 负值 0（narmal）。
6，text-transform：uppercase，lowercase，capitalize（首字母大写），none（默认）。
7，text-decoration：underline，overline（上划线），line-through（贯穿），blink（文本闪烁），不能继承（为了使装饰匹配，必须显式的声明其装饰）。
8，text-shadow：水平阴影位置 垂直阴影位置（负值就是左上方） 模糊半径 颜色。
9，white-space：normal（忽略空格换行），pre（空白符不会忽略），nowrap（不换行），pre-wrap（保留空白符换行），pre-line（合并空白符保留换行符）。
10，direction（文本方向）：ltr，rtl；行内元素只有当unicode-bidi设置为embed或bidi-override时才会应用direction。
11，word-wrap：normal（只在允许的断字点换行），break-word（在长单词或url内部进行换行）；如果这一行放不下这个单词会做到下一行。
12，word-break：break-all（允许单词内换行），keep-all（只能在半角空格或连字符处换行）；如果这一行放不下会继，，续放。
第7章 基本视觉格式化（略看的）
1，内边距不能为负值，外边距可以，边框宽度据对不能为负值，border-color如果没设则取元素内容的前景色。
第8章 内边距、边框和外边距
1，margin（padding）可设置百分数值，是相对于父元素的width计算的；margin外边距会合并，padding内边距不会。
2，对于行内非替换元素：外边距通过改变元素内容在行中的起点来影响换行，margin不影响上下只影响左右；对于替换元素：margin会影响行高。
3，边框默认为none，边框宽度默认为medium（通常2px）。
4，border-style：dotted（点），dashed（虚线），double（双线），groove（3D 凹槽边框），ridge（3D 垄状边框），inset，outset（凸起）。
5，border-width：thin，medium（默认），thick，length。
6，border-color：color，transparent（透明边框）。
7，padding：对于有背景色和内边距的行内非替换元素，背景可以向元素上面和下面延伸。
8，无论替换元素是块级还是行内元素，内边距都会围绕其内容，背景色将填入该内边距（例如图片底部与文字对齐，input与文字居中对齐，而不会覆盖）。
第9章 颜色和背景
1，color是可以继承的；background-color不能继承（默认transparent），如果一个元素没有指定的颜色，那么背景应当是透明的，这样其祖先元素的背景才能可见。
2，所有的背景属性都不能继承。只要有背景图像就应该同时包含一个背景颜色。
3，background-repeat：repeat（默认），repeat-x，repeat-y，no-repeat。
4，background-position：0% 0%（默认），left，center，right，top，bottom，length。如果只出现一个关键字，则认为另外一个关键字是center。如果有两个值必须一起出现，水平值在前垂直值在后。
5，background-attachment：scroll，fixed。
第10章 浮动和定位
1，浮动元素周围的外边距不会合并，如果要浮动一个非替换元素则必须声明width。
2，浮动元素的包含块是其最接近的块级祖先元素，此外，浮动元素会生成一个块级框。
3，浮动规则：①浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界；
②浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非出现浮动元素的顶端在先出现浮动元素的底端下面（这样就不会重叠）。
③左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边（不会重叠）。
④浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
4，负外边距可能导致浮动元素移到父元素的外面。
5，行内框与一个浮动元素重叠时，其边框背景和内容都在该浮动元素之上显示；块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，内容在之上。
6，clear工作原理：它会增加元素的上外边距，使之最后落在浮动元素的下面，这实际上会忽略为清除元素（设置clear的元素）顶端设置的外边距宽度。
清除区域：在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着元素设置clear时，它的外边距并不改变。之所以向下移是因为清除区域造成的。
7，position：static（默认），元素框正常生成；
relative，元素框偏离某个距离；
absolute，元素框从文档流完全删除，相对于其包含块定位，元素定位后生成一个块级框；
fixed，元素框表现类似于absolute，不过其包含块是视窗本身。
元素可以定位到其包含块的外部。
8， 偏移属性：top，bottom（百分数相对于包含块的高度），left，right（相对于包含块的宽度）。默认值是auto。
9，min-width max-width使元素不至于太宽或太高，而且可以相对安全地混合使用不同的单位。
10，overflow：visible（默认），hidden，scroll，auto。用于块级和替换元素。
11，clip：rect(top,right,bottom,left)，auto。所有偏移都是距左上角的偏移（不允许百分数可以是负值），用于绝对定位元素。
12，visibility：visible（默认），hidden（不可见但还会影响文档布局），collapse（同于hidden）。
13，绝对定位元素的包含块是最接近的position值不为static的祖先元素；如果值过度受限，用户代理会忽略right（bottom）的值（从左向右读）。
14，z-index：auto（默认），integer。
15，固定定位：元素会完全从文档流中去除。
16，相对定位：移动走了之后，原位置空白，可以覆盖其他内容；若过度受限，一个值会重置为另一个值的相反数。
第11章 表布局
1，display：inline（默认），none，blcok，list-item，table等等。
2，border-collapse：collapse（合并边框），separate（默认分隔边框），应用于display值为table或inline-table的元素。
3，border-spacing（边框间隔）：默认为0，length（除非为separate，否则忽略该属性）。
4，empty-cells（空单元格）：show（默认），hide。
5，table-layout：auto（默认），fixed。
第12章 列表与生成内容
1，列表类型（list-style-type）：disc（默认），circle等等。
2，列表项图像（list-style-image）：none（默认），url()。
3，列表标志位置（list-style-position）：outside（默认），inside。
以上均用于display值为list-item的元素。
4，使用外边距和内边距实现缩进：ul{margin-left:0;padding-left:1em}或ul{margin-left:1em;padding-left:0}。
5，指定内容（content）：normal（默认），attr(href)。
6，生成引号（quotes）：' " ' ' " '。
7，counter-reset（设置计数器起点），counter-increment（递增一定的量），还需结合content属性和一个与计数器有关的值。
第13章 用户界面样式
1，系统字体：caption，icon，menu，message-box，small-caption，status-bar这些值只能用于font属性。
2，系统颜色：不建议使用，css3已废除。
3，光标（cursor）：auto（默认，用户代理确定最适合的）与default（系统默认的）不同，pointer（手），text（文本图标），crosshair（十字），move，url()等等。
4，轮廓样式（outline-style）：none，dotted，dashed，solid等等，轮廓与边框不同在于只能指定一个关键字，可以画在边框外面。
5，轮廓宽度（outline-width）：thin，medium（默认），thick，length。
6，轮廓颜色（outline-color）：color，invert（默认）。（outline:color style width）。
第14章 非屏幕媒体
1，media：screen，print，all等等（用于link标签中）。
