CSS权威指南学习笔记

最近基本看完了CSS权威指南，把其中一些东西记录下来，当成学习笔记吧。

css的关键字往往由空格分隔，只有一种情况例外，在font属性中，有一种情况可以使用/分隔两个关键字，如：h2{font : large/50% sans-serif;}
font允许的其他关键字都用空格分隔

选择器

• 统配选择器

*{color:gray;}

• 根据部分属性值选择
  [class~=”warning”] /*选择class属性中带有warning的元素(whole word)*/
  [class^=”warning”] /*选择class属性中以warning开头的元素*/
  [class$=”warning”] /*选择class属性中以warning结尾的元素*/
  [class*=”warning”] /*选择class属性中包含warning的元素*/
  [class|=”warning”] /*选择class属性中以warning开头或者等于warning的元素*/
• 后代选择器
  层次间隔是无限的，不论嵌套有多深 li em{...}
• 子选择器
  只选择其子元素 li > em{...}
• 相邻元素选择器
  紧接在h1元素后面的p元素h1 + p{...}
• 伪类选择器
  
  • 链接伪类
    a:link{...} //未访问的（有href属性）
    a:visited{...} //已访问的
  • 动态伪类
    :focus 拥有焦点的元素
    :hover 鼠标指针停留的元素
    :active 被用户输入激活的元素，如点击鼠标的元素
• 伪元素选择器
  首字母p:first-letter{color:red} //将p元素的首字母变为红色
  首行 p:first-line{color:red} //将p元素的首行变为红色
  伪元素必须出现在该伪元素的选择器的最后面，如 p:first-line em 就是不合法的
  设置之前之后的样式
  h2:before{content : "[]";color: silver} 在h2元素之前插入一个[]，颜色为银色
  h2:after{content : "[]";color: silver} 在h2元素之后插入一个[]，颜色为银色

特殊性

特殊性值表述为4部分，如0,0,0,0

1. 对于选择器中给定的各个ID属性值，+0,1,0,0
2. 对于选择器中给定的类属性值，属性选择或伪类，+0,0,1,0
3. 对于选择器重给出的各个元素和伪元素，+0,0,0,1
4. 结合符合通配选择器对特殊性没有任何贡献
5. style属性中的声明，+1,0,0,0
6. !important：重要声明

颜色

命名颜色：aqua(浅绿色) fuchsia(紫红色) lime(绿黄色) olive(橄榄色) red(红色) white(白色) black(黑色) gray(灰色) maroon(栗色) orange(橘色) silver(银色) yellow(黄色) blue(蓝色) green(绿色) navy(深蓝色) purple(紫色) teal(蓝绿色)

• color//前景色
• background-color//背景色
• background-image//背景图片
• background-repeat//背景重复，有四个参数repeat, repeat-x, repeat-y, no-repeat
• background-position//背景定位，left, center, right, top, bottom，若只指定一个关键字，另一个关键字默认为center，若用百分号数值或长度数值，则是相对于右上角的宽和高
• background-attachment//fixed（图像相对可视区固定，防止图像滚动）, scroll（默认值）
• background-size//可选值为：width height，百分数width height，cover(把背景图像扩展至足够大，使其完全覆盖背景区域)，contain(把背景图像扩展至最大尺寸，使其宽度和高度完全适应内容区域)

字体

• font-family//字体
• font-weight//字体的粗细
• font-size//字体大小
• font-style//字体风格，如italic(斜体)
• font-variant//字体变形
• font//以上各个属性的简写
  font-style font-variant font-weight font-size font-family前三个属性值可以按任何顺序来写，也可以忽略，font-size和font-family不仅要以此顺序，还不可省略，可以在font-size处增加一个line-height用/分隔
  

  一个em定义为一种给定字体的font-size

文本

• text-indent
  用于段落首行的缩进，如3em，若是百分数则相对于父元素的宽度，不能用于行内元素和替换元素，可以继承
• text-align
  文本的水平对齐方式如left，只应用于块级元素
• line-height
  行高，指文本行基线之间的距离，如果是相对值则是相对于自己的font-size
• vertical-align
  垂直对齐，接受8个关键字baseline(默认,基线对齐), sub(下标), super(上标), bottom(底端对齐（行内元素底端）), text-bottom(底端对齐（行内文本底端）), middle(居中对齐), top(), text-top()，只应用于行内元素和替换元素，其百分数值要相对于元素的line-height来计算
• word-spacing
  字间隔（单词），接受正或负长度值，用于增加或减少字之间的标准间隔，对中文无效
• letter-spacing
  字母间隔
• text-transform
  文本转换，none(默认值，不做处理), uppercase(大写), lowercase(小写), capitalize(首字母大写)
• text-decoration
  文本装饰，underline(下划线), overline(上划线), line-through(贯穿线（删除线）), blink(闪烁)，不能继承
• text-shadow
  文本阴影，如text-shadow:green 5px 1em，定义一个向右偏移5像素，向下偏移1em的绿色阴影，还可以增加一个可选长度值，定义阴影的模糊半径
• white-apace
  处理空白符，会影响空格，tab，换行等空白符

值 空白符 换行符 自动换行 pre-line 合并 保留 允许 normal 合并 忽略 允许 nowrap 合并 忽略 不允许 pre 保留 保留 不允许 pre-wrap 保留 保留 允许

元素的背景会延伸到内边距，但不会延伸到外边距
一个行内元素中若有负上外边距的图片，则会把图片上面的一行向下拉
行内替换元素默认位于基线上，最好的修正办法是将包含图像的表单元格的font-size和line-height都设置为1px，这会使行框的高度只能放下1像素的图像。或者应用一个负的下外边距，将元素向下拉

边框

• border-style//none（边框消失，宽度为0，默认值）, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
• border-top-style
• border-right-style
• border-bottom-style
• border-left-style
• border-width//有三个关键字：thin, medium, thick
• border-top-width
• border-color//transparent为透明
• border-bottom//可以设置长度，样式和颜色，顺序无所谓
• border//可以设置长度，样式和颜色，顺序无所谓
• border-collapse//设置表格的边框是否被合并为单一的边框，collapse(合并)/separate(分开，默认)

浮动和定位

• float
  left, right, none，一个元素浮动时，其他内容会环绕该元素，其他内容的外边距不会与浮动元素的外边距合并，要浮动一个非替换元素，必须为该元素声明一个width，否则此元素的宽度将会趋于0。浮动元素会生成一个块级框。
• clear
  left, right, both 防止左边/右边/两边有浮动元素
• overflow
  visible(默认), hidden, acroll, auto，元素的内容在元素之外的解决方案，可见、不可见、不可见但有滚动条、不可见但只在必要时提供滚动条
• clip
  为元素的内容设置形状，rect(top, right, bottom, left)，如果值为auto，相当于裁剪边界设置为适当的内容边界，不允许百分数
• visibility
  visible, hidden, collapse，元素的可见性，当不可见时，文档还是会影响文档的布局，就好像还可见一样，collapse在表中使用，如果用于非表元素与hidden含义相同
• 包含块
  
  1. 根元素的包含块由用户代理建立
  2. 非根元素，position值为relative或static，包含块由最近的块级框、表单元格或行内快祖先框的内容边界构成
  3. 非根元素，position值为absolute，包含块设置为最近的position值不为static的祖先元素

元素绝对定位时还会为其后代元素建立一个包含块，如果除bottom外某个任意偏移属性设置为auto，会有一种特殊的行为。
如下规则{top: auto; left:0}，其顶端要相对于为定位前本来的顶端位置对齐，也就是说其position为static时顶端的位置。left和right设置为auto，也适用同样的基本规则。
如下规则{left: 0; right: auto}，元素的width会被设置为收放得正好合适，也就是元素的内容区宽度恰好只能包含其内容
如未指定height/width，元素的高度/宽度收缩为内容的高度/宽度

如果左右外边距不为auto，而是一个确定的值，并且导致此元素在水平方向上受限，则会忽略right
替换元素的规则为

1. 如果width设置为auto，width的实际使用值由元素内容的固有宽度决定
2. 从左向右读的语言中，如果left设置为auto，则把auto替换为静态位置
3. 如果left或right仍为auto（也就是说未在上一步中被替换），则将margin-left或margin-right的auto值替换为0
4. 如果此时margin-left或margin-right都还定义为auto，则把他们设置为相等的值，从而将元素在其包含块中居中
5. 在此之后，如果只剩下一个auto值，则将其修改为等于等式的余下部分

在使用相对定位时，它会从其正常位置移走，不过原来所占的空间并不会消失
如果一个相对定位元素过度受限如{top: 10px; bottom: 20px}，一个值会重置为另一个值的相反数，因此bottom=-top，也就是{top: 10px; bottom: -10px}，从左向右读的语言中right总是等于-left

一种居中技巧如下

浮动元素规则

• 浮动元素的左外边界不能超出其包含块的左内边界
• 浮动元素的左外边界必须是文档中之前出现的左浮动元素的右外边界。除非后出现浮动元素的顶端在先出现浮动元素的底端下面
• 左浮动元素的右外边界不会在其右浮动元素的左外边界右边
• 一个浮动元素的顶端不能比其父元素的内顶端更高，如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素
• 浮动元素的顶端不能比之前所有浮动元素的顶端更高
• 如果源文档中一个浮动元素之前出现另一个浮动元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高
• 左浮动元素的左边有另一个浮动元素，前者的右外边界不能在其包含块的右边界的右边
• 浮动元素必须尽可能高的放置
• 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远，位置越高，就会向左或向右浮动得越远
• 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示
• 块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

当给浮动元素应用一个负的外边距或者浮动元素过宽过高导致其超过父元素的宽高时，可能会与正常流中的内容发生重叠，重叠有以下两个规则
- 行内框与一个浮动元素重叠时，其边框，背景和内容都在该浮动元素之上显示
- 块框与一个浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示

清除浮动

如果希望某个元素不会放在左浮动元素的右边，可以声明clear:left

css1和css2中clear原理为增加元素的上外边距，使之最后落在浮动元素的下边，这回忽略为清除元素顶端设置的外边距宽度，也就是说清除元素的上外边距可能会调整

css2.1中引入了清除区域。清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。这意味着元素设置clear时，它的外边距并不改变，之所以会向下移是这个清除区造成的，其上外边距和清除区会按照外边距合并的规则合并

列表与生成内容

• list-style-type
  disc(实心圆), circle(空心圆), square(方块), decimal(1,2,3,…), decimal-leaqding-zero(01,02,03,…), upper-alpha(A,B,C,…), lower-alpha(a,b,c,…), upper-roman(I,II,III,…), lower-roman(i,ii,iii,…), none，只能用于display为list-item的元素，用于改变列表项的标志类型，可继承
• list-style-image
  url(xxx.gif)，可以在list-style-image之后加上list-style-type防止图像未能正确加载
• list-style-positon
  标志出现在列表项内容之外还是内容内部，inside, outside(默认)
• list-style
  值可以是任何顺序，只要有一个值，其他的会被填入默认值

列表的缩进，有的浏览器应用{margin-left: 40px}，有的引用{padding-left: 40px}，如果想改变列表缩进的距离，需同时指定内边距和外边距，已确保浏览器兼容

为了向文档中插入生成内容，可以使用:before和:after伪元素，这些伪元素会根据content属性把生成内容放在一个元素的前面或后面
css规范明确禁止浮动或定位:before和:after内容，还禁止使用列表样式属性和表属性

• :before或:after选择器的主体为块级元素，display值接收none, inline, block, marker，其他都处理为block
• :before或:after选择器的主体为块行内元素，display值接收none, inline，其他都处理为inline

P{color:green}p:after{content:": : :"}/*以上生成内容为green*/p:after{content:": : :";color:"red"}/*生成内容为red*/

content//string(如果其中包含标签会被原样显示，换行使用\A，长串需要分行书写的话需要在行末加), uri, counter(计数器), attr(当前元素某个属性中的值)

/*生成引号*/p{quotes: '"' '"'} p:before{content: open-quotes} p:after{content: close-quotes}