Warning:
This wiki has been archived and is now read-only.

CSS2

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

(暂放) 原文链接 http://www.w3.org/TR/CSS2/

本文档开放给所有人编辑,希望参与贡献请移步下面地址注册: http://www.w3.org/Help/Account/Request/Public

Contents

概要

本规范定义层叠样式表,第二版第一个版本(CSS2.1)。CSS2.1是一个样式表语言,允许作者和用户给结构化文档(例如:HTML文档和XML应用)添加样式(例如:字体和字距)。通过将文档的表现性样式和文档内容分离,CSS2.1简化了Web创作和站点的维护工作。

CSS2.1基于CSS2构建【CSS2】,CSS2基于CSS1【CSS1】构建。其支持指定媒体的样式表,所以作者可以为他们的文档定制在视觉浏览器,听觉设备,打印机,盲文设备,手持设备,等上的表现。它也支持内容定位,表格布局,国际化和用户界面相关的一些属性。

CSS2.1纠正了CSS2中的一些错误(最重要的是重新定义了绝对定位元素的 height/width,HTML的“style”属性和重新计算的'clip'属性,影像较大),并添加了一些已经被广泛实现,呼声很高的特性。但最重要的是CSS2.1是进化中的CSS的一个“快照”:包含所有在发布推荐日期之前已经被实现的特性。

CSS2.1的意图是取代CSS2。CSS2中的有些部分在CSS2.1中并未改变,有些做了修改,并且有些被删除了。移除的部分可能在未来的CSS3规范中重新出现。未来的规范应该参考CSS2.1(除非确实需要已经CSS2.1中移除的CSS2中的特性,并且他们应该仅引用CSS2中的那些特性,或者最好是参考CSS3中包含的类似特性)。

关于 CSS2.1 规范

详情:CSS2/about

CSS 2.1 vs CSS 2

阅读本规范

本规范的组织方式

常规

文档语言元素和属性

CSS 属性定义

取值
初始值
适用于
继承
百分比
媒介
计算值

速记属性

注释和实例

图像和长描述

鸣谢

CSS2.1 介绍

详情:CSS2/intro

HTML应用CSS2.1简单教程

XML应用CSS2.1简单教程

CSS2.1处理模型

画布

CSS2.1寻址模型

CSS设计原则

规范一致性:要求和建议

详情:CSS2/conform

定义

用户代理规范要求

错误状况

text/css 内容类型

语法和基本数据类型

详情:CSS2/syndata

语法

Tokenization

关键字

Vendor-specific extensions
Informative Historical Notes

字符及大小写

语句

At-规则

规则集、声明块和选择器

声明及属性

注释

解析錯誤的處理規則

整数和实数

长度

百分数

URLs 和 URIs

计数器

颜色

字符串

未支持的值

CSS 樣式表的呈現

引用字符编码中未描述的字符

选择器

详情:CSS2/selector

模式匹配

在css中,模式匹配规则决定了哪些样式规则将被应用到文档树中的元素上。而这些模式,我们称它为选择符,这些选择符可以是简单的元素名字也可以是复杂的上下文模式。如果模式中的所有条件对某一个元素都是符合的,那么这个选择符匹配上了这个元素。

文档元素名称的大小写敏感性是由文档的语言决定的。比如,html的元素名称是不区分大小写的,但是xml是区分大小写的。

下面的表格总结了 css2.1的选择符语法:

模式 含义 描述它的章节
* 匹配所有元素。

通用选择符

E 匹配所有E元素 (换言之, 一个类型为E的元素)。

类型选择符

E F

匹配E元素后代元素中的所有F元素。

上下文选择符

E > F

匹配E元素子代元素中的所有F元素。

子选择符

E:first-child

匹配E元素子代元素中的第一个子代元素。

:first-child 伪类

E:link


E:visited

匹配超链接没有被访问的所有E元素(:link) 或者已经被访问的所有E元素(:visited)。

:link伪类

E:active
E:hover


E:focus

匹配正处于某一用户行为的所有E元素。

动态伪类

E:lang(c)

匹配(人类)语言为c的所有E元素(文档语言指定了怎样确定语言)。

:lang() 伪类

E + F

匹配E元素相邻同胞元素中的所有F元素。

相邻同胞选择符

E[foo]

匹配有foo属性的所有E元素(无论foo属性的值是什么)。

属性选择符

E[foo="warning"]

匹配foo属性值恰好为warning的所有E元素。

属性选择符

E[foo~="warning"]

匹配foo属性值列表有一个是warning的所有E元素。

属性选择符

E[lang|="en"]

匹配lang属性值列表以en开头(从左边开始)的所有E元素。

属性选择符

DIV.warning 语言特定的

(在HTML中, 等同于DIV[class~="warning"]。)

类选择符

E#myid

匹配ID为myid的所有E元素。

ID选择符

选择器语法

指配屬性值、層疊與繼承

详情:CSS2/cascade

指定值、計算值與實際值

指定值

計算值

使用值

實際值

繼承

'inherit' 值

@import 規則

層疊

層疊序

!important 規則

計算選擇器的特異性

非 CSS 表象呈現提示的優先順序

媒介型態

详情:CSS2/media

媒体类型介绍

指定媒体相关的样式表

@media 规则

公认的媒体类型

媒体组

盒模型

详情:CSS2/box

盒子尺寸

外边距(margins)、内边距(padding)和边框(border)的实例

外边距属性:‘margin-top’、‘margin-right’、‘margin-bottom’、‘margin-left’和‘margin

折叠外边距

内边距属性:‘padding-top’、‘padding-right’、‘padding-bottom’、‘padding-left’和‘padding

边框属性

边框宽度:‘border-top-width’、‘border-right-width’、‘border-bottom-width’、‘border-left-width’和‘border-width

边框颜色:‘border-top-color’、‘border-right-color’、‘border-bottom-color’、‘border-left-color’和‘border-color

边框样式:‘border-top-style’、‘border-right-style’、‘border-bottom-style’、‘border-left-style’和‘border-style

边框速记属性:‘border-top’、‘border-right’、‘border-bottom’、‘border-left’和‘border

双向上下文中行内元素的盒子模型

可视化格式模型

详情:CSS2/visuren

介绍

视点 Viewport

包含块 Containing blocks

控制框的生成 Controlling box generation

块级元素和块框 Block-level elements and block boxes

匿名块框 Anonymous block boxes

行内级别元素和行内盒 Inline-level elements and inline boxes

匿名行内盒 Anonymous inline boxes

插入盒

'display' 属性

定位方案Positioning schemes

選擇定位方案 ― 'position' 屬性

盒偏移 ― 'position''right''bottom''left'

常规流Normal flow

块格式化上下文 Block formatting contexts

行内格式化上下文 Inline formatting contexts

相对定位 Relative positioning

浮动 Floats

浮动的定位:'float'属性 Positioning the float: the 'float' property

控制紧接浮动的排列:'clear'属性

绝对定位 Absolute positioning

固定定位 Fixed positioning

'display'、'position' 與 'float' 的關係 Relationships between 'display', 'position', and 'float'

常规流向,浮动和绝对定位的对比 Comparison of normal flow, floats, and absolute positioning

常规流向 Normal flow

相对定位 Relative positioning

浮动一个盒 Floating a box

绝对定位 Absolute positioning

分层的呈现 Layered presentation

指定堆叠层次:'z-index'属性 Specifying the stack level: the 'z-index' property

文本方向:'direction''unicode-bidi'属性

視覺布局模型細節

详情:CSS2/visudet

包含块的定义

內容寬度 ― 'width' 屬性

計算寬度與邊界

行內非置換元素

行內置換元素

常規流中的塊級非置換元素

常規流中的塊級置換元素

浮動非置換元素

浮動置換元素

絕對定位非置換元素

絕對定位置換元素

常規流中的 'inline-block' 非置換元素

常規流中的 'inline-block' 置換元素

寬度最小值與最大值 ― 'min-width''max-width' 屬性

內容高度 ― 'height' 屬性

計算高度與邊界

行內非置換元素

行內置換元素、常規流中的塊級置換元素與浮動置換元素

常規流中 'overflow' 的計算值為 'visible' 的塊級非置換元素

絕對定位非置換元素

絕對定位置換元素

複雜情形

塊格式化上下文根的 'auto' 高度

高度最小值與最大值 ― 'min-height''max-height' 屬性

行高計算 ― 'line-height''vertical-align' 屬性

Leading 與半 Leading

視覺效果

详情:CSS2/visufx

溢出與剪裁

溢出 ― 'overflow' 屬性

剪裁 ― 'clip' 屬性

可見性 ― 'visibility' 屬性

生成内容,自动编号和列表

详情:CSS2/generate

:before 和 :after 伪元素

‘content’属性

引号标记

使用‘quotes’属性指定引号

使用‘content’属性插入引号

自动计数器和编号

嵌套计数器和作用域

计数器样式

通过‘display:none’在元素内计数

列表

列表:‘list-style-type’,‘list-style-image’,‘list-style-position’和‘list-style’属性

分頁媒介

分页媒体介绍

页面盒子:@page规则

页面边缘

页面选择器:选择左、右和第一页

页面盒子之外的内容

页面中断

页面中断属性:“page-break-before”、“page-break-after”、“page-break-inside

元素内中断:“orphans”、“widows

允许页面中断

强制页面中断

“最佳”页面中断

页面内容内的层叠

顏色與背景

详情:CSS2/colors

前景色彩 ― 'color' 屬性

背景

背景屬性 ― 'background-color''background-image''background-repeat''background-attachement''background-position''background' 屬性

字体

详情:CSS2/fonts

介绍

字体匹配算法

字体家族:'font-family'属性

通用字体家族

衬线字体
无衬线字体
手写体
梦幻体
等宽字体

字体样式:'font-style'属性

小型大写字母:'font-variant'属性

字体粗细:'font-weight'属性

字体大小:'font-size'属性

简写字体属性:'font'属性

文字

详情:CSS2/text

缩进:‘text-indent’属性

对齐:‘text-align’属性

修饰

下划线、上划线、着重号及闪烁:‘text-decoration’属性

字母及单词间距:‘letter-spacing’‘word-spacing’属性

大写:‘text-transform’属性

空格:‘white-space’属性

‘white-space’处理模型

折叠空格的双向实例

控制并整合字符细节

表格

详情:CSS2/tables

表格介紹

CSS 表格模型

無名表格物件

視覺布局模型中的表格

表格說明定位與對齊

表格內容的視覺布局

邊框

使用者界面(用户界面)

详情:CSS2/ui

光标:'cursor'属性

系统颜色

用户预设字体

动态轮廓:‘outline’属性

轮廓和焦点

放大