《CSS权威指南》脉络

发表于 更新于 分类于 Disqus： 本文字数： 4.7k 阅读时长 ≈ 8 分钟

CSS和文档

  • CSS的出现和特点

  • <link>、<style>和@import

  • CSS注释

  • 内联样式

  • @import必须写在CSS文档的开头

选择器

  • 基本结构

  • 元素选择器（分组选择器、通配选择器）

  • 类选择器/ID选择器

  • 属性选择器（具体属性、部分属性）

  • 后代选择器、兄弟选择器（>, +）

  • 伪类/伪元素选择器

  • ^=, $=, ~=, *=, |=用在属性选择中的部分匹配里，eg：span[class~="bar"]，
    其中~=匹配空格隔开的字符，*=匹配部分字符串，|=匹配完整字符串或以字符串开头

  • 常用的伪类选择器有

    • :link 拥有href属性的未访问地址
    • :visited
    • :focus 当前获得输入焦点的元素
    • :hover
    • :active 被用户激活的元素
    • :first-child 第一个子元素，类似地还有:last-child和nth-child()
    • :lang() 根据语言选择
    • :first-letter和first-line针对元素第一个字母和第一行文本
    • :before和:after

层叠关系

  • 优先级顺序（ID > 类、属性、伪类 > 元素、伪元素 > 通配或结合符, > 继承的属性）

  • 内联样式和!important的特殊性

  • 继承

  • 层叠规则

  • 来源权重关系（读者重要声明 > 创作者的重要声明 > 创作者正常声明 > 读者正常声明 > 用户代理声明）

  • LVHA（:link - :visited - :hover - :active的声明顺序）

  • 一个声明出现的越后，它的权重越大

值和单位

  • 数字

  • 百分数

  • 颜色（具名、rgb/rgba、十六进制）、Web安全颜色

  • 长度单位（in/cm/mm/pt/pc/px，em/ex/rem/vw/vh/vmin/vmax）

  • URL（url(protocol://server/pathname)或url(pathname)）

  • 关键字

  • 角度/时间/频率

  • CSS2.1中有一个所有属性共有的关键字：inherit

字体

  • 通用字体（serif/sans-serif/monospace/cursive/fantasy）

  • 指定字体

  • 字体加粗（100~900，lighter/bolder）

  • 字体大小（xx-small ~ xx-large；绝对大小；百分数）

  • 字体风格和变形（font-style，font-variant）

  • font属性（[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>）

  • font-face规则（font-family，font-style，src等）

  • 衬线字体包括Times，Georgia；非衬线字体包括Helvetiva，Geneva，Verdana，Arial；Monospace字体包括Courier，Courier New

  • 字体名称中包含空格或特殊字符时，建议用引号包裹

  • 一般地，400对应normal，700对应bold

  • 字体大小是可以继承的，不过继承的是计算值而不是百分数

  • italic是单独的字体风格，oblique则是正常文本的倾斜版本

  • small-caps表示小型大写字母

文本属性

  • 缩进（text-indent）

  • 水平对齐（text-align）

  • 垂直对齐（line-height和vertical-align）

  • 字间隔和字母间隔（word-spacing和letter-spacing）

  • 文本转换（text-transfrom）

  • 文本装饰（text-decoration）

  • 文本阴影（text-shadow）

  • 空白符处理（white-space）

  • 文本方向（direction和unicode-bidi）

  • text-indent为负值时表示悬挂缩进效果

  • line-height有继承性，表示文本基线（baseline）间的距离，继承的仍然是计算值

  • 行内元素的行框由行间距和内容区组成

  • vertical-align只应用于行内元素、替换元素和单元格，且不能继承。它可以取百分数和长度值，相对于自身line-height计算。

    • 在基线对齐时，将元素的底部和行框的基线对齐
    • 取值为sub或super时，元素的基线（或底端）将升高或降低
    • 取值bottom或top时，相对行框的顶端和底端
    • 取值为middle时，会把行内元素的中点与行框基线上方0.5ex（约为0.25em，因x-height而异）处对齐
    • 取值为数值时，会相对于父元素行框基线升高
      最后，父元素的行框的行高会因此做调整

  • text-transform有uppercase, lowercase, capitalize等几种选择，有继承性

  • text-decoration有underline, overline, line-through, blink等几种选择，没有继承性

  • text-shadow先确定阴影颜色，前两个长度值确定偏移距离，第三个值确定模糊半径，可以同时设置多个阴影效果

  • white-space行为如下表

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

盒模型

  • 基本框与包含块

  • 正常流/非替换元素/替换元素/块级元素/行内元素

  • 水平属性（width，margin/border/padding-left/right）

  • 垂直属性（height，margin/border/padding-top/bottom）

  • 行内元素（em框、内容区、行间距、行内框、行框）

  • 元素的显示方式（display，inline-block和run-in）

  • 在水平属性中只有width和外边距可以设置为auto，其余属性必须设置为特定的值或默认为0。使用auto将会弥补实际值和所需总和的差距，当格式化属性过度受限时，会强制把margin-right设置为auto。相反，不止一个auto出现时，若width不为auto，则会将元素居中，出现三个auto时，外边距都会设置为0。

  • 垂直属性类似上面，不一样的是，元素间的外边距会合并，留下较大的外边距。

  • 对于非替换元素，元素行内框高度等于line-height的值；对于替换元素，则由内容区高度决定

  • 行内元素的边框边界由font-size决定，与line-height无关。类似，内外边距不会影响行框的形成和布局。

  • 行内替换元素并没有自己的基线，所以说相对较好的方案是将其行内框底部和基线对齐。

  • inline-block元素的width未定义或声明为auto时，元素会收缩来适应到框宽度刚好足够包含该内容

边距和边框

  • 基本元素框

  • 外边距（负外边距和垂直外边距合并）

  • 行内元素的外边距

  • 边框

  • 内边距

  • 行内元素的内边距

  • 外边距的空白不能放置其他元素

  • 内外边距设置为百分数时，相对于父元素的宽度计算，这样做是为了避免高度上导致无限循环

  • 对于行内元素，只有line-height，font-size和vertical-align可以改变元素行高，为替换元素设置的外边距会影响行高

  • 边框的默认属性为none medium <color>

  • 元素的背景会延伸到内边距

  • 左内/外边距应用到行内元素开始处，右内/外边距应用到行内元素结束处

背景与颜色

  • 前景色（color）

  • 背景色

  • 背景图片

  • 背景重复、背景定位（background-position）

  • 背景大小（background-size，CSS3新增）

  • 一般来说，前景包括元素的文本和边框

  • 前景色属性可以继承

  • 所有背景属性都不可继承

  • 背景图像放在指定的背景色之上

  • background简写属性为background-color || background-image || background-repeat || background-attachment || background-position

浮动和定位

  • 浮动元素

  • 浮动定位规则

  • 浮动行为和浮动内容的的重叠

  • 清除（clear）

  • 定位类型（position）

  • 宽高限制（max/min-width和max/min-height）

  • 内容溢出（overflow和clip）

  • 元素可见性（visibility）

  • 绝对定位、固定定位、相对定位

  • z-index

  • 浮动元素的外边距不会合并

  • 浮动的非替换元素需要指定width，否则宽度将趋于0

  • 浮动元素的包含块为距离最近的块级祖先元素

  • 行内框和浮动元素重叠时，边框和内容都在浮动内容之上；块级元素重叠时，内容在之上，边框和背景在之下显示

  • clear只应用于块级元素，清除区域不允许浮动元素进入

  • absolute元素会形成一个块级框

  • top等属性应用在absolute元素时，描述其距离外边距边界的距离

  • 可以通过top, left, right, bottom这样的定位信息确定绝对定位元素的内容区大小

  • clip通过rect(top,right,bottom,left)确定绝对定位元素的剪裁区域

  • 绝对定位元素的静态位置为其position为static时的位置

  • 对于绝对定位元素，垂直方向或水平方向设置auto可以垂直或水平居中

  • 对于相对定位，如遇到过度受限的情况，一个值会设置为另一个的相反数，保证自洽。

表布局

  • 表显示值（即相关display）

  • 以行为主

  • 匿名表对象插入法则

  • 表标题

  • 表单元格（border-collapse, border-spacing, empty-cells）

  • 单元格边框合并

  • 表大小（table-layout, 高度, 对齐）

  • CSS的列和列组只能接受border，background，width，visibility四种属性

  • 单元格垂直对齐有4种可选值，top, bottom, middle, baseline

列表和生成内容

  • 列表类型、列表项图像、列表标志位置

  • 插入生成内容（content，attr(xxx), quote）

  • 计数器（counter-reset, counter-increment）

  • 列表样式可以简写为<list-style-type> | <list-style-image> | <list-style-position>

  • 在quote属性里指定开闭字符串后，可以通过content，结合:before，:after伪类插入开闭quote的标记

用户界面样式

  • 系统字体（如caption等）

  • 系统颜色（已废弃）

  • 光标（cursor）

  • 轮廓（outline）

  • cursor有下面一些常见的值

    • pointer 用在超链接上
    • text 用来纯文本上
    • move 用来指示目标可以被拖动，相关的还有e-resize, ne-resize, se-resize等边缘的拖动标记
    • crosshair 用来指示可以选取范围，类似截屏的光标效果
    • wait 显示等待标记
    • progress 指示等待的状态，同时表示可以进行其他操作
    • help 显示帮助光标
    • url() 自定义光标图像，建议设置缺省值

  • outline的设置类似border，由outline-color, outline-style, outline-width组成

非屏幕媒体

  • 分页媒体（size和page等）

  • 投影样式

  • 声音样式（speak，stress，richness等）

  • 可以在<link>标签的media属性里指定媒体类型，或是在CSS文件中通过@media xxx {}的形式指定