《CSS权威指南》脉络

CSS和文档

  • CSS的出现和特点
  • <link><style>@import
  • CSS注释
  • 内联样式
  • @import必须写在CSS文档的开头

选择器

  • 基本结构
  • 元素选择器(分组选择器、通配选择器)
  • 类选择器/ID选择器
  • 属性选择器(具体属性、部分属性)
  • 后代选择器、兄弟选择器(>, +
  • 伪类/伪元素选择器
  • ^=, $=, ~=, *=, |=用在属性选择中的部分匹配里,eg:span[class~="bar"]
    其中~=匹配空格隔开的字符,*=匹配部分字符串,|=匹配完整字符串或以字符串开头
  • 常用的伪类选择器有
    • :link 拥有href属性的未访问地址
    • :visited
    • :focus 当前获得输入焦点的元素
    • :hover
    • :active 被用户激活的元素
    • :first-child 第一个子元素,类似地还有:last-childnth-child()
    • :lang() 根据语言选择
    • :first-letterfirst-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-familyfont-stylesrc等)
  • 衬线字体包括Times,Georgia;非衬线字体包括Helvetiva,Geneva,Verdana,Arial;Monospace字体包括Courier,Courier New
  • 字体名称中包含空格或特殊字符时,建议用引号包裹
  • 一般地,400对应normal,700对应bold
  • 字体大小是可以继承的,不过继承的是计算值而不是百分数
  • italic是单独的字体风格,oblique则是正常文本的倾斜版本
  • small-caps表示小型大写字母

文本属性

  • 缩进(text-indent
  • 水平对齐(text-align
  • 垂直对齐(line-heightvertical-align
  • 字间隔和字母间隔(word-spacingletter-spacing
  • 文本转换(text-transfrom
  • 文本装饰(text-decoration
  • 文本阴影(text-shadow
  • 空白符处理(white-space
  • 文本方向(directionunicode-bidi
  • text-indent为负值时表示悬挂缩进效果
  • line-height有继承性,表示文本基线(baseline)间的距离,继承的仍然是计算值
  • 行内元素的行框由行间距和内容区组成
  • vertical-align只应用于行内元素、替换元素和单元格,且不能继承。它可以取百分数和长度值,相对于自身line-height计算。
    • 在基线对齐时,将元素的底部和行框的基线对齐
    • 取值为subsuper时,元素的基线(或底端)将升高或降低
    • 取值bottomtop时,相对行框的顶端和底端
    • 取值为middle时,会把行内元素的中点与行框基线上方0.5ex(约为0.25em,因x-height而异)处对齐
    • 取值为数值时,会相对于父元素行框基线升高
      最后,父元素的行框的行高会因此做调整
  • text-transformuppercase, lowercase, capitalize等几种选择,有继承性
  • text-decorationunderline, overline, line-through, blink等几种选择,没有继承性
  • text-shadow先确定阴影颜色,前两个长度值确定偏移距离,第三个值确定模糊半径,可以同时设置多个阴影效果
  • white-space行为如下表
空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

盒模型

  • 基本框与包含块
  • 正常流/非替换元素/替换元素/块级元素/行内元素
  • 水平属性(widthmargin/border/padding-left/right
  • 垂直属性(heightmargin/border/padding-top/bottom
  • 行内元素(em框、内容区、行间距、行内框、行框)
  • 元素的显示方式(displayinline-blockrun-in
  • 在水平属性中只有width和外边距可以设置为auto,其余属性必须设置为特定的值或默认为0。使用auto将会弥补实际值和所需总和的差距,当格式化属性过度受限时,会强制把margin-right设置为auto。相反,不止一个auto出现时,若width不为auto,则会将元素居中,出现三个auto时,外边距都会设置为0。
  • 垂直属性类似上面,不一样的是,元素间的外边距会合并,留下较大的外边距。
  • 对于非替换元素,元素行内框高度等于line-height的值;对于替换元素,则由内容区高度决定
  • 行内元素的边框边界由font-size决定,与line-height无关。类似,内外边距不会影响行框的形成和布局。
  • 行内替换元素并没有自己的基线,所以说相对较好的方案是将其行内框底部和基线对齐。
  • inline-block元素的width未定义或声明为auto时,元素会收缩来适应到框宽度刚好足够包含该内容

边距和边框

  • 基本元素框
  • 外边距(负外边距和垂直外边距合并)
  • 行内元素的外边距
  • 边框
  • 内边距
  • 行内元素的内边距
  • 外边距的空白不能放置其他元素
  • 内外边距设置为百分数时,相对于父元素的宽度计算,这样做是为了避免高度上导致无限循环
  • 对于行内元素,只有line-heightfont-sizevertical-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-widthmax/min-height
  • 内容溢出(overflowclip
  • 元素可见性(visibility
  • 绝对定位、固定定位、相对定位
  • z-index
  • 浮动元素的外边距不会合并
  • 浮动的非替换元素需要指定width,否则宽度将趋于0
  • 浮动元素的包含块为距离最近的块级祖先元素
  • 行内框和浮动元素重叠时,边框和内容都在浮动内容之上;块级元素重叠时,内容在之上,边框和背景在之下显示
  • clear只应用于块级元素,清除区域不允许浮动元素进入
  • absolute元素会形成一个块级框
  • top等属性应用在absolute元素时,描述其距离外边距边界的距离
  • 可以通过top, left, right, bottom这样的定位信息确定绝对定位元素的内容区大小
  • clip通过rect(top,right,bottom,left)确定绝对定位元素的剪裁区域
  • 绝对定位元素的静态位置为其positionstatic时的位置
  • 对于绝对定位元素,垂直方向或水平方向设置auto可以垂直或水平居中
  • 对于相对定位,如遇到过度受限的情况,一个值会设置为另一个的相反数,保证自洽。

表布局

  • 表显示值(即相关display
  • 以行为主
  • 匿名表对象插入法则
  • 表标题
  • 表单元格(border-collapse, border-spacing, empty-cells
  • 单元格边框合并
  • 表大小(table-layout, 高度, 对齐)
  • CSS的列和列组只能接受borderbackgroundwidthvisibility四种属性
  • 单元格垂直对齐有4种可选值,top, bottom, middle, baseline

列表和生成内容

  • 列表类型、列表项图像、列表标志位置
  • 插入生成内容(contentattr(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组成

非屏幕媒体

  • 分页媒体(sizepage等)
  • 投影样式
  • 声音样式(speakstressrichness等)
  • 可以在<link>标签的media属性里指定媒体类型,或是在CSS文件中通过@media xxx {}的形式指定