陈颂光
全栈工程师,承接从编译器到网站的各类软件开发与咨询,也可以聊历史哲学。
关注我的 GitHub

CSS概览

CSS(层叠样式表)用于指定外观,最常用于指定网页的外观,但也可用于指定图形用户界面的外观(如Java FX)等等。

CSS的角色实际上是MVC模型中的V,把样式从内容和控制分开的好处是显而易见的:

  • 提高可携性,减低对个别厂商、平台和设备的依赖性
  • 提高可维护性,关于外观的部分确立出来后有利于保持一致性且可由专人管理
  • 更紧凑易读,节省带宽且便于理解和修改
  • 灵活性,可以简单地控制样式的有效范围
  • 具备通用性,可以在多种场合用同一方法使用同一组样式
  • 对残疾人更为友好

CSS的文档见http://www.w3.org/tr/css。CSS2.1的中文翻译见http://www.ayqy.net/doc/css2-1/aural.html#propdef-azimuth

使用CSS

在网页中使用CSS

在HTML文件中可以直接嵌入CSS样式表,方法是放在<STYLE type="text/css"></STYLE>之间,但强烈建议不要这样,因为通常有多个HTML文件需要使用同一样式表。一般来说,CSS样式表应放在独立的文件中,然后在HTML文件中用<LINK rel="stylesheet" href="CSS文件路径" type="text/css">引用它。这些代码应放在HTML的HEAD范围内。另外,很多HTML标签可指定style属性,其值为一些CSS声明只对所在元素有效,通常也很少用这形式。

对XML文件应用CSS

要对XML文件应用CSS,可以在XML文件中加入处理指令:

<?xml-stylesheet type="text/css" href="CSS文件路径"?>

其中CSS文件中应对每个用到的XML标签指定display属性,它的值为blockinline之一。

当用浏览器打开指定样式表的XML文件时,就会进行渲染。

原理

一般模型

CSS的工作原理:

  1. 解析源文件并创建文档树
  2. 确定目标媒体类型
  3. 收集与文件有关的适用于目标媒体的所有样式表
  4. 对文档树每个元素标注各个可用于目标媒体属性的值
    1. 如果层叠产生了一个值,就使用它
    2. 否则,如果属性是继承的并且元素不是文档树的根,使用其双亲元素的计算值
    3. 否则使用属性的默认值(参考属性定义)
  5. 生成格式化结构
  6. 把格式化结构传送到目标介质

其中样式表有三个来源:

  • 作者(如编写网站的人)
  • 用户(如打开浏览器的人)
  • 用户代理(如浏览器) 如果不同样式表有冲突,按最特殊优先的惯用原则(除非用户要求忽略作者的样式表)。同样地,若多条规则都可用,也这样处理。更准确地,为了找出一个元素-属性组合的值,用户代理必须应用以下顺序:
    1. 找出目标媒体类型下,所有适用于该元素和目标属性的声明。如果相关选择器匹配目标元素,并且目标媒体也匹配列在所有含有声明的@media规则中的媒体,并且路径上所有链接的样式表都得到了,则应用声明
    2. 根据重要性(常规或者重要,重要声明后面加上!important)以及来源(编写者,用户或者用户代理)排序,升序优先级为:
    1. 用户代理声明
    2. 用户常规声明
    3. 编写者常规声明
    4. 编写者重要声明
    5. 用户重要声明
      1. 相同重要性和来源的规则根据选择器的特殊性排序:更特殊的选择器将重写一般的。伪元素和伪类被分别算作常规元素和类。一个选择器的特殊性是下计算:
        • 如果声明来自一个style属性而不是一条选择器样式规则,算1,否则就是0 (= a) - 选择器中ID属性的数量 (= b) - 选择器中其它属性和伪类的数量 (= c) - 选择器中元素名和伪元素的数量 (= d) 4个数连起来a-b-c-d(在一个基数很大的数字系统中)表示特殊性
      2. 最后,根据指定顺序排序:如果两个声明的权重,来源和特殊性都相同,后指定的生效。引入的样式表中的声明被认为在样式表本身的所有声明之前。

由于历史原因,HTML有一些外观属性,只有以下例外:abbr、accept-charset、accept、accesskey、action、alt、archive、axis、charset、checked、cite、class、classid、 code、codebase、 codetype、colspan、coords、data、datetime、declare、 defer、dir、disabled、enctype、for、headers、href、hreflang、 http-equiv、id、ismap、label、lang、language、longdesc、maxlength、 media 、method、multiple、name、nohref、object、onblur、onchange、 onclick、ondblclick、onfocus、onkeydown、onkeypress、onkeyup、onload、 onload、onmousedown、onmousemove、onmouseout、onmouseover 、onmouseup、 onreset、onselect、onsubmit、onunload、onunload、profile、prompt、 readonly、rel、rev、rowspan、scheme、scope、selected、shape、span、 src、standby、start、style、summary、 title、type(LI、OL和UL元素上的除外)、usemap、value、valuetype、version。对于外观属性,应翻译成相应的特殊性为0的CSS规则,并且就当它们像是被插在编写者样式表开头的一样。对于其它文档,可以同样处理,或视为用户代理样式。

格式化方法

与TeX类似,CSS也用盒子为布局单位。每个盒都有一块内容区(例如文本、图片等等)和周围可选的padding,border和margin区域。对于可视化媒体,文档树中的每个元素根据其盒模型生成0个或多个盒。这些盒的布局由(以下因素)控制:

  • 盒尺寸与类型 (块/内联)
  • 定位模式(常规流,浮动与绝对定位)
  • 文档树中元素间的关系
  • 外部信息(例如,视口大小,图片的内在尺寸等等)

连续媒体的用户代理一般会给用户提供一个视口(屏幕上的一个窗口或者视图区域),用户通过它来查阅文档。视口尺寸变化时,用户代理可能会改变文档的布局。当视口比渲染文档的画布区域小时,用户代理应该提供一种滚动机制。一个画布最多对应一个视口,但用户代理可能会渲染到多个画布上(即提供同一文档的不同视图)

语法

分词

以下用类lex的语法,各标记匹配的正则表达式如下:

ident       [-]?{nmstart}{nmchar}*
name        {nmchar}+
nmstart     [_a-z]|{nonascii}|{escape}
nonascii    [^\0-\237]
unicode     \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape      {unicode}|\\[^\n\r\f0-9a-f]
nmchar      [_a-z0-9-]|{nonascii}|{escape}
num         [0-9]+|[0-9]*\.[0-9]+
string      {string1}|{string2}
string1     \"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2     \'([^\n\r\f\\']|\\{nl}|{escape})*\'
badstring   {badstring1}|{badstring2}
badstring1  \"([^\n\r\f\\"]|\\{nl}|{escape})*\\?
badstring2  \'([^\n\r\f\\']|\\{nl}|{escape})*\\?
badcomment  {badcomment1}|{badcomment2}
badcomment1 \/\*[^*]*\*+([^/*][^*]*\*+)*
badcomment2 \/\*[^*]*(\*+[^/*][^*]*)*
baduri      {baduri1}|{baduri2}|{baduri3}
baduri1     url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}
baduri2     url\({w}{string}{w}
baduri3     url\({w}{badstring}
w           [ \t\r\n\f]*

%%

IDENT         {ident}
ATKEYWORD     @{ident}
STRING        {string}
BAD_STRING    {badstring}
BAD_URI       {baduri}
BAD_COMMENT   {badcomment}
HASH          #{name}
NUMBER        {num}
PERCENTAGE    {num}%
DIMENSION     {num}{ident}
URI           url\({w}{string}{w}\)
              |url\({w}([!#$%&*-\[\]-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE u\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})?
CDO           <!--
CDC           -->
:             :
;             ;
{             \{
}             \}
(             \(
)             \)
[             \[
]             \]
S             [ \t\r\n\f]+
COMMENT       \/\*[^*]*\*+([^/*][^*]*\*+)*\/
FUNCTION      {ident}\(
INCLUDES      ~=
DASHMATCH     |=
DELIM         any other character not matched by the above rules, and neither a single nor a double quote

其中,若\后接换行,则两者都被忽略;若\后接一个到六个十六进制数字,则相当于Unicode代码点为指定十六进制数的字符;若\后接其它字符,则相当于该字符(已到文件结束则视忽略)。

约定在厂商特定的扩展中,CSS标识符形如-厂商-有意义名字'或_厂商-有意义名字’,如-moz-box-sizing是一个Mozilla特定的属性。

CSS本身区分大小写,至于HTML标签名由于不由CSS解读,不与此矛盾。

基本语法

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property S* ':' S* value;
property    : IDENT;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'
              | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'
              ] S*;
unused      : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;
@规则 用途
@charset 指定CSS文件的编码方式(如有,必须放在文件最前面)
@font-face  
@import <URL> <适用目标媒体类型> , ... ; 导入适用于目标媒体(不指定表示所有)的CSS文件(如有,必须放在文件除@charset外的最前面)
@media <适用目标媒体类型> , ... { 语句 ... } 用于指定仅适用于指定目标媒体类型的一些语句
@page  
目标媒体类型 说明 媒体组
all 适用于所有设备  
braille 用于盲文触觉反馈设备 continuous/tactile/grid/interactive/static
embossed 用于分页盲文打印机 paged/tactile/grid/static
handheld 用于手持设备(典型的小屏幕,有限带宽) continuous/paged/visual/audio/speech/grid/bitmap/interactive/static
print 用于分页资料和在屏幕上用打印模式看的文档。 paged/visual/bitmap/static
projection 用于投影展示,例如投影仪。 paged/visual/bitmap/interactive
screen 主要用于彩色计算机屏幕 continuous/visual/audio/bitmap/interactive/static
speech 用于语音合成器 continuous/speech/interactive/static
tty 用于使用固定间距字符网格(例如,电传打字机,终端设备或者显示功能受限的便携式设备)的媒体 continuous/visual/grid/interactive/static
tv 用于电视类设备(低分辨率,彩色,滚动受限的屏幕,音频都是可用的) continuous/paged/visual/audio/bitmap/interactive/static

对于不合语法的CSS,错误处理方式如下:

  • 属性不明或值不合法的声明会被忽略
  • @规则的关键字不明,则忽略到它所有的块结束
  • 若声明不合法,跳到声明结束(考虑配对的引号和括号)
  • 若语句不合法,跳到语句结束(考虑配对的引号和括号)
  • 若碰到文件结束,则结束所有块
  • 若字符串没有正常结束,则在行末结束字符串

选择器

选择器用于从文档树中选取规则的应用范围。

简单选择器由类型选择器(匹配同名的文档元素)或*(匹配所有文档元素),后面紧跟零个或多个:

  • 属性选择器(默认属性可能无法访问)
    • [attr]匹配所有有属性foo的元素
    • [attr=val]匹配所有有属性attr值为val的元素
    • [attr~=val]匹配所有有属性attr值作为空白分隔的列表时有元素为val的元素
    • [attr|=val]匹配所有有属性attr值作为-分隔的列表时前个元素为val的元素
    • [attr^=val]匹配所有有属性attr值以val开始的元素(CSS 3)
    • [attr$=val]匹配所有有属性attr值以val结束的元素(CSS 3)
    • [attr*=val]匹配所有有属性attr值有子串val的元素(CSS 3)
  • 形如#id的ID选择器
  • 形如.class的类选择器
  • 伪类选择器如:
    • :root匹配文档的根元素(CSS 3)
    • :nth-child(n)匹配作为其双亲的第n个孩子的元素(CSS 3)
    • :nth-last-child(n)匹配作为其双亲的倒数第n个孩子的元素(CSS 3)
    • :nth-of-type(n)匹配作为其双亲的第n个此类型的孩子的元素(CSS 3)
    • :nth-last-of-type(n)匹配作为其双亲的倒数第n个此类型的孩子的元素(CSS 3)
    • :first-child匹配作为其双亲的首个孩子元素
    • :last-child匹配作为其双亲的最后一个孩子的元素(CSS 3)
    • :first-of-type匹配作为其双亲的首个此类型的孩子的元素(CSS 3)
    • :last-of-type匹配作为其双亲的最后一个此类型的孩子的元素(CSS 3)
    • :only-child匹配作为其双亲的惟一一个孩子元素(CSS 3)
    • :only-of-type匹配作为其双亲的惟一一个此类型孩子的元素(CSS 3)
    • :empty匹配没有孩子(含文本结点)的元素(CSS 3)
    • :link匹配未被访问的链接
    • :visited匹配已被访问的链接
    • :active匹配用户正在操作的元素
    • :hover匹配鼠标停留的元素
    • :focus匹配获得焦点的元素
    • :target匹配作为链接目标的元素(CSS 3)
    • :lang(fr)匹配语言为fr的元素
    • :enabled匹配启用的元素(CSS 3)
    • :disabled匹配禁用的元素(CSS 3)
    • :checked匹配勾选了的元素(CSS 3)
    • ::first-line匹配元素文本的首行
    • ::first-letter匹配元素文本的首字符
    • ::before匹配生成到元素前的内容
    • ::after匹配生成到元素前的内容
    • :not(s)匹配不匹配简单选择器s的元素(CSS 3) 一个元素匹配简单选择器当且仅当它匹配其中所有匹配器

选择器由被空白、>+~分隔的一个或以上简单选择器组成(左结合):

  • A B匹配匹配选择器A的元素中匹配选择器B的后代
  • A > B匹配匹配选择器A的元素中匹配选择器B的孩子
  • A + B匹配匹配选择器A的元素的下一兄弟,如果它匹配选择器B
  • A ~ B匹配匹配选择器A的元素的下一匹配选择器B的兄弟(CSS 3)

另外,为方便见,A , B匹配满足选择器AB的所有元素。

常见值类型

属性的值除了可以是inheritg表示采用与双亲元素的同一属性的值外,也可以是具体的值。

整数

用一个或多个十进制数字表示,前面可加正负号,不区分正负零。

实数

用零个或多个十进制数字后接.再接一个或多个十进制数字表示,前面可加正负号,不区分正负零。

长度

长度用一个数值后接一个标识符(数值为零时可忽略)组成,该标识符用于指定单位:

标识符 单位
em 当前字体大小
ex 当前字体的x(如有)的高度
in 英寸,约2.54cm
cm 厘米
mm 毫米
pt 1/72英寸
pc 相当于12pt
px 相当于0.75pt

百分比

表示为数值紧跟%

字符串

字符串由配对的'"包围,其中可用前述的转义序列。

URI

URI(包括URL和URN)记为url(字符串),其中URI可以是相对的(基URI为CSS文件)也可以是绝对的。

颜色

可以用#后紧接3个或6个十六进制数字以指定sRGB颜色空间中R、G、B分量的值。

另外,可用以下标识符指代一些颜色:

标识符 颜色
maroon #800000
red #ff0000
orange #ffA500
yellow #ffff00
olive #808000
purple #800080
fuchsia #ff00ff
white #ffffff
lime #00ff00
green #008000
navy #000080
blue #0000ff
aqua #00ffff
teal #008080
black #000000
silver #c0c0c0
gray #808080

计数器

计数器用标识符表示。

常见属性

CSS2.1中的属性有:

盒子

盒子内容

名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
height <length> | <percentage> | auto | inherit auto 除不可替换的内联元素,表格列和列组(column group)外的所有元素 no 见下文 visual 内容高度
width <length> | <percentage> | auto | inherit auto 除不可替换的内联元素,表格行和行组(row group) 外的所有元素 no 参照包含块的宽度 visual 内容宽度
max-height <length> | <percentage> | none | inherit none 除不可替换的内联元素,表格列和列组(column group)外的所有元素 no 见下文 visual 最大高度
max-width <length> | <percentage> | none | inherit none 除不可替换的内联元素,表格行和行组(row group)外的所有元素 no 参照包含块的宽度 visual 最大宽度
min-height <length> | <percentage> | inherit 0 除不可替换的内联元素,表格列和列组(column group)外的所有元素 no 见下文 visual 最小高度
min-width <length> | <percentage> | inherit 0 除不可替换的内联元素,表格行和行组(row group)外的所有元素 no 参照包含块的宽度 visual 最小宽度
overflow visible | hidden | scroll | auto | inherit visible 块容器 no   visual 内容从盒子溢出时处理方式
clip <shape> | auto | inherit auto 绝对定位的元素 no   visual 可见区域
visibility visible | hidden | collapse | inherit visible   yes   visual 是否可见

其中<shape>形如rect(<top>, <right>, <bottom>, <left>)

盒子边缘

名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
border-color [ <color> | transparent ]{1,4} | inherit 见单独的各个属性   no   visual 各边界的颜色
border-style <border-style>{1,4} | inherit 见单独的各个属性   no   visual 盒子各边界的样式
border-top [ <border-width> || <border-style> || 'border-top-color' ] | inherit 见单独的各个属性   no   visual 盒子上边界的复合属性
border-right [ <border-width> || <border-style> || 'border-top-color' ] | inherit 见单独的各个属性   no   visual 盒子右边界的复合属性
border-bottom [ <border-width> || <border-style> || 'border-top-color' ] | inherit 见单独的各个属性   no   visual 盒子下边界的复合属性
border-left [ <border-width> || <border-style> || 'border-top-color' ] | inherit 见单独的各个属性   no   visual 盒子左边界的复合属性
border-top-color <color> | transparent | inherit color’属性的值   no   visual 上边界的颜色
border-right-color <color> | transparent | inherit color’属性的值   no   visual 右边界的颜色
border-bottom-color <color> | transparent | inherit color’属性的值   no   visual 下边界的颜色
border-left-color <color> | transparent | inherit color’属性的值   no   visual 左边界的颜色
border-top-style <border-style> | inherit none   no   visual 盒子上边界的样式
border-right-style <border-style> | inherit none   no   visual 盒子右边界的样式
border-bottom-style <border-style> | inherit none   no   visual 盒子下边界的样式
border-left-style <border-style> | inherit none   no   visual 盒子左边界的样式
border-top-width <border-width> | inherit medium   no   visual 上边界的粗细
border-right-width <border-width> | inherit medium   no   visual 右边界的粗细
border-bottom-width <border-width> | inherit medium   no   visual 下边界的粗细
border-left-width <border-width> | inherit medium   no   visual 左边界的粗细
border-width <border-width>{1,4} | inherit 见单独的各个属性   no   visual 四边界的粗细
border [ <border-width> || <border-style> || 'border-top-color' ] | inherit 见单独的各个属性   no   visual 盒子边界的复合属性
margin-right <margin-width> | inherit 0 除display类型为table系列的除了table-caption,table和inline-table以外的所有元素 no 参照包含块的宽度 visual margin区域与border区域的右边距
margin-left <margin-width> | inherit 0 除display类型为table系列的除了table-caption,table和inline-table以外的所有元素 no 参照包含块的宽度 visual margin区域与border区域的左边距
margin-top <margin-width> | inherit 0 除display类型为table系列的除了table-caption,table和inline-table以外的所有元素 no 参照包含块的宽度 visual margin区域与border区域的上边距
margin-bottom <margin-width> | inherit 0 除display类型为table系列的除了table-caption,table和inline-table以外的所有元素 no 参照包含块的宽度 visual margin区域与border区域的下边距
margin <margin-width>{1,4} | inherit 见单独的各个属性 除display类型为table系列的除了table-caption,table和inline-table以外的所有元素 no 参照包含块的宽度 visual margin区域与border区域的四个边距
padding-top <padding-width> | inherit 0 除table-row-group,table-header-group,table-footer-group,table-row,table-column-group和table-column外的所有元素 no 参照包含块的宽度 visual border区域与padding区域的上边距
padding-right <padding-width> | inherit 0 除table-row-group,table-header-group,table-footer-group,table-row,table-column-group和table-column外的所有元素 no 参照包含块的宽度 visual border区域与padding区域的右边距
padding-bottom <padding-width> | inherit 0 除table-row-group,table-header-group,table-footer-group,table-row,table-column-group和table-column外的所有元素 no 参照包含块的宽度 visual border区域与padding区域的下边距
padding-left <padding-width> | inherit 0 除table-row-group,table-header-group,table-footer-group,table-row,table-column-group和table-column外的所有元素 no 参照包含块的宽度 visual border区域与padding区域的左边距
padding <padding-width>{1,4} | inherit 见单独的各个属性 除table-row-group,table-header-group,table-footer-group,table-row,table-column-group和table-column外的所有元素 no 参照包含块的宽度 visual border区域与padding区域的四边距

其中<border width>可为以下之一

  • thin表示细border
  • medium表示中等border
  • thick表示粗border
  • <length>

<border-style>值类型则可取以下之一:

  • none表示无边框,这时边框宽度的计算值为0
  • hiddennone相同,除非按照表格元素的边框冲突处理
  • dotted表示一系列点
  • dashed表示一系列短线段
  • solid表示一条线段
  • double表示两条实线。两条实线及它们之间的空隙之和等于border-width的值
  • groove表示看起来像是被刻进了画布(3D凹槽效果)
  • ridge表示看起来像是要从画布里突出来(3D凸槽效果)
  • inset表示让盒看起来像是被嵌进画布了(没有3D效果)
  • outset表示让盒看起来像是要从画布里出来了(没有3D效果)

盒子的定位

和TeX类似,CSS用盒子作为排版单位,从内部看盒子分为两类:

  • 块盒中的盒子会被分成行
  • 内联盒中的盒子横向分布 从外部看盒子分为两类:
  • 块级盒由块级元素生成
  • 内联级盒由内联级元素生成
名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
display inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline   no   all block让元素生成一个块级的块盒、inline-block让元素生成一个内联级块容器(内部会被格式化成一个块盒,而该元素本身会被格式化成一个原子内联级盒)、inline让元素生成一个或多个内联盒、list-item让元素生成一个主块盒和一个标记盒、none让元素不在格式化结构
float left | right | none | inherit none 所有(元素),除了9.7描述的 no   visual 对齐方式
clear none | left | right | both | inherit none 块级元素 no   visual 此盒在此前生成的所有指定类型浮动盒的下方
position static | relative | absolute | fixed | inherit static   no   visual 定位方式
top <length> | <percentage> | auto | inherit auto 定位的元素 no 参照包含块的高度 visual 上边界相对于外围块上边界(若absolute)或盒子自然上边界(若relative)的偏移
right <length> | <percentage> | auto | inherit auto 定位的元素 no 参照包含块的宽度 visual 右边界相对于外围块右边界(若absolute)或盒子自然右边界(若relative)的偏移
bottom <length> | <percentage> | auto | inherit auto 定位的元素 no 参照包含块的高度 visual 下边界相对于外围块下边界(若absolute)或盒子自然下边界(若relative)的负偏移
left <length> | <percentage> | auto | inherit auto 定位的元素 no 参照包含块的宽度 visual 上边界相对于外围块左边界(若absolute)或盒子自然左边界(若relative)的负偏移
z-index auto | <integer> | inherit auto 定位的元素 no   visual 堆叠层级,越大越前
direction ltr | rtl | inherit ltr 所有元素,除了下文描述的(情况) yes   visual 块的行书写方向
unicode-bidi normal | embed | bidi-override | inherit normal 所有元素,除了下文描述的(情况) no   visual Unicode双向混排方式
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline 内联级和table-cell元素 no 参照元素自身的line-height visual baseline把盒的基线(没有则下边界)与父级盒的基线对齐、middle把该盒的竖直中点和父级盒的基线加上父级的半x-height对齐、sub把该盒的基线降低到合适的位置作为父级盒的下标、super把该盒的基线提升到合适的位置作为父级盒的上标、text-top把该盒的top和父级的内容区的top对齐、text-bottom把该盒的bottom和父级的内容区的bottom对齐、<percentage>把该盒提升(正值)或者降低(负值)这个距离、<length> 把该盒提升(正值)或者降低(负值)这个距离、top把对齐子树的top与行盒的top对齐、bottom把对齐子树的bottom与行盒的bottom对齐
line-height normal | <number> | <length> | <percentage> | inherit normal   yes 参考元素自身的字体大小 visual 最小行高

分页

名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
page-break-after auto | always | avoid | left | right | inherit auto 块级元素(例外见下文) no   visual, paged 块之后的换页
page-break-before auto | always | avoid | left | right | inherit auto 块级元素(例外见下文) no   visual, paged 块之前的换页
page-break-inside avoid | auto | inherit auto 块级元素(例外见下文) no   visual, paged 块内换页
orphans <integer> | inherit 2 块容器元素 yes   visual, paged 须要留在页面底部的块容器的最小行数
widows <integer> | inherit 2 块容器元素 yes   visual, paged 须要留在页面顶部的块容器的最小行数

背景

名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
background-attachment scroll | fixed | inherit scroll   no   visual 背景相对视口固定还是随包含块滚动
background-color <color> | transparent | inherit transparent   no   visual 背景色
background-image <uri> | none | inherit none   no   visual 背景图片
background-position [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 0% 0%   no 参照该盒本身的尺寸 visual 背景图片的初始位置
background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit repeat   no   visual 背景是否平铺
background ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit 见单独的各个属性   no 允许’background-position’上的百分比 visual 背景的复合属性

内容生成

名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
content normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit normal :before和:after伪元素 no   all 伪元素的内容
quotes [<string> <string>]+ | none | inherit depends on user agent   yes   visual 各级开关引号
counter-increment [ <identifier> <integer>? ]+ | none | inherit none   no   all 增加指定计数器的值
counter-reset [ <identifier> <integer>? ]+ | none | inherit none   no   all 重设指定计数器的值(不指定数值则0)
list-style-image <uri> | none | inherit none 具有’display: list-item’的元素 yes   visual 列表项目标记
list-style-position inside | outside | inherit outside 具有’display: list-item’的元素 yes   visual 列表项目位置
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit disc 具有’display: list-item’的元素 yes   visual 列表项目标记样式
list-style [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit 见单独的各个属性 具有’display: list-item’的元素 yes   visual 列表项目复合属性

其中<counter>counter(name)counter(name, <list-style-type>)

文本

名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
color <color> | inherit 取决于用户代理   yes   visual 前景色
font-family [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit 取决于用户代理   yes   visual 字族(如’serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(装饰)、cursive(手写))
font-size <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium   yes 参照继承的字体大小 visual 字体大小对应的em(可用绝对的xx-small、x-small、small、medium、large、x-large、xx-large,相对的larger、smaller)
font-style normal | italic | oblique | inherit normal   yes   visual 字体样式
font-variant normal | small-caps | inherit normal   yes   visual 小型大写字母
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal   yes   visual 字体粗细
font [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit 见单独的各个属性   yes 见单独的各个属性 visual 字体的复合属性
text-align left | right | center | justify | inherit 如果’direction’为’ltr’,就是’left’,如果’direction’为’rtl’就是’right 块容器 yes   visual 对齐
text-decoration none | [ underline || overline || line-through || blink ] | inherit none   no(见下文)   visual 修饰
text-indent <length> | <percentage> | inherit 0 块容器 yes 参照包含块的宽度 visual 第一行文本的缩进
text-transform capitalize | uppercase | lowercase | none | inherit none   yes   visual 大小写转换
white-space normal | pre | nowrap | pre-wrap | pre-line | inherit normal   yes   visual 处理块内空白字符的方式
letter-spacing normal | <length> | inherit normal   yes   visual 字符间空白
word-spacing normal | <length> | inherit normal   yes   visual 单词间空白

其它

名字 可用值 默认值 适用于(默认为所有元素) 是否继承 百分比(默认不适用) 媒体组 用途
border-collapse collapse | separate | inherit separate table’和’inline-table’元素 yes   visual 表格边框
border-spacing <length> <length>? | inherit 0 table’和’inline-table’元素  yes   visual 相邻单元格边框距离
empty-cells show | hide | inherit show table-cell’元素 yes   visual 空单元格的背景和边框
table-layout auto | fixed | inherit auto table’和’inline-table’元素 no   visual 表格布局方法
caption-side top | bottom | inherit top table-caption’元素 yes   visual 表格标题位置
cursor [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto   yes   visual, interactive 光标样式
outline-color <color> | invert | inherit invert   no   visual, interactive 轮廓颜色
outline-style <border-style> | inherit none   no   visual, interactive 轮廓样式
outline-width <border-width> | inherit medium   no   visual, interactive 轮廓粗细
outline [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit 见单独的各个属性   no   visual, interactive 轮廓
关键词 css web