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属性，它的值为block或inline之一。

当用浏览器打开指定样式表的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*;

对于不合语法的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匹配满足选择器A或B的所有元素。

常见值类型

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

整数

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

实数

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

长度

长度用一个数值后接一个标识符（数值为零时可忽略）组成，该标识符用于指定单位：

百分比

表示为数值紧跟%。

字符串

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

URI

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

颜色

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

另外，可用以下标识符指代一些颜色：

计数器

计数器用标识符表示。

常见属性

CSS2.1中的属性有：

盒子

盒子内容

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

盒子边缘

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

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

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

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

盒子的定位

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

• 块盒中的盒子会被分成行
• 内联盒中的盒子横向分布 从外部看盒子分为两类：
• 块级盒由块级元素生成
• 内联级盒由内联级元素生成

分页

背景

内容生成

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

文本

其它