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

CSS2/impl

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

（暂放） 原文链接 http://www.w3.org/TR/CSS2/

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

關於 CSS2.1 規範

CSS2.1 介紹

規範符合：要求與建議

定義

English
替換元素
Error creating thumbnail: Unable to save thumbnail to destination

一個含有內容超出 CSS 布局模型的元素，例如：圖像、嵌入文件、applet。舉例來說，HTML IMG 元素的內容會用屬性 "src" 指定的圖像替換。替換元素常有固有尺寸 — 固有寬度、固有高度與固有比例。舉例來說，點陣圖具有絕對單位的固有寬度與固有長度（由此可以決定絕對比例）。另一方面，其他文件可不有任何的固有尺寸（舉例來說，空白的 HTML 文件）。

若替換元素文件的尺寸可能洩漏隱密資訊給第三方，使用者代理可假設替換元素沒有任何的固有尺寸。舉例來說，若一個 HTML 文件根據使用者的銀行結餘改變固有大小，則使用者代理可以假裝該文件沒有固有尺度。

CSS 渲染模型不定義替換元素的內容的處理。

4 语法和基本数据类型

目录
4.1语法
4.1.1 Tokenization
4.1.2 关键字
4.1.2.1 供应商指定扩展
4.1.2.2 Informative Historical Notes
4.1.3 字符和大小写
4.1.4 语句
4.1.5 @规则
4.1.6 块
4.1.7 规则集，声明块和选择器
4.1.8 声明和属性
4.1.9 注释
4.2 处理解析错误的规则
4.3 值
4.3.1 整数和实数
4.3.2 长度
4.3.3 百分数
4.3.4 URLs 和 URIs
4.3.5 计数器
4.3.6 颜色
4.3.7 字符串
4.3.8 未支持的值
4.4 CSS 样式表说明
4.4.1 引用字符编码中未描述的字符

選擇器

指配屬性值、層疊與繼承

指定值、計算值與實際值

English

使用者代理在解析文件並建構文件樹之後，必須為樹中每一個元素的每一個適用於目標媒介型態的屬性只配取值。

屬性最後的取值是由四個步驟計算的結果：網頁作者指定的取值（「指定值」），經過處理變成用於繼承的取值（「計算值」），再在必要的時候轉化成絕對值（「使用值」），最後根據本地環境的限制轉換成最終值（「實際值」）。

指定值
Error creating thumbnail: Unable to save thumbnail to destination

使用者代理必須先透過以下各機制（以優先順序排列）為每一個屬性指配指定值：

  1. 若透過層疊得到了一個取值，除了這個值是 'inherit' 的時候，指定值由下面的「'inherit' 值」定義之外
    Error creating thumbnail: Unable to save thumbnail to destination
    ，使用這個取值。
  2. 否則，若屬性會繼承且元素不是文件樹的根，使用父元素的計算值。
  3. 否則使用屬性的初始值。屬性的定義表格記載了各屬性的初始值。

計算值

English

指定值在層疊的時候經處理變成計算值，舉例來說，URI 變成絕對 URI，'em' 與 'ex' 單位計算成像素或是絕對長度。取值的計算不需要透過渲染文件得到。

若使用者代理不能解析某個 URI 成為絕對 URI，則計算值為原指定值。

屬性的指定值由屬性定義表格的「計算值：」欄位給予的方法決定
Error creating thumbnail: Unable to save thumbnail to destination
。

就算在屬性根據「適用於：」欄位不適用的情形，計算值仍然存在。然而，有些屬性依屬性適不適用於某個元素來決定元素屬性的計算值。

使用值

計算值是在不呈現文件的情形下最大處理的結果。然而，有些值只能在文件排版的時候才能決定，舉例來說，如果一個元素的寬度設為元素包含塊的某個百分比，這個寬度就不能在決定包含塊的寬度之前決定。使用值是解決剩下的依賴關係之後的計算值，是絕對值。

實際值

觀念上來說使用值是渲染用的取值，但是使用者代理可能會在給定的環境下不能使用這個值。舉例來說，使用者代理可能只能渲染整數個像素的邊框，因此只能近似計算寬度，又或使用者代理可能被迫只能用黑白兩色。實際值是使用者代理近似使用值的結果。

繼承

如同上面所述，有些取值會被一個文件樹中一個元素的子元素繼承。每一個屬性的屬性定義表格描述了屬性繼承與否。

假設有一個 H1 元素裡面有一個著重元素（EM）： 
<H1>標題<EM>很</EM>重要！</H1>
若網頁作者沒有為 EM 元素指定顏色，著重的「很」字會繼承父元素的顏色，因此，如果 H1 的顏色為藍色，EM 也會是藍色的。

當繼承發生時，元素繼承計算值。父元素的計算值同時成為子元素的指定值與計算值。

舉例來說，給定以下的樣式表： 
body { font-size: 10pt }
h1 { font-size: 130% }

與文件片段： 

<BODY>
   <H1>一個<EM>大</EM>標題</H1>
 </BODY>
H1 元素的 'font-size' 屬性的計算值會是 '13pt'（130% 乘以 10pt ― 父元素的值）。由於 'font-size' 的計算值會繼承，EM 屬性的計算值也會是 '13pt'。如果使用者代理沒有 13pt 的字型，H1 與 EM 'font-size' 的實際值都可能會是 '12pt'（舉例來說）。
注：請注意繼承是透過文件樹進行的，匿名盒不會截取繼承。

'inherit' 值

English
每一個屬性都可以有 'inherit' 作為層疊值。'inherit' 代表給定元素的指定值是該元素父元素的計算值
Error creating thumbnail: Unable to save thumbnail to destination
。'inherit' 值可以用來強迫取值的繼承發生，也可以用在一般不繼承的屬性上。 若根元素的某個屬性設有 'inherit' 值，使用者代理會指派屬性的初始值到該屬性上
Error creating thumbnail: Unable to save thumbnail to destination
。
在下面的範例中，BODY 元素設有 'color' 與 'background' 屬性。對於其他元素，'color' 的取值會繼承且底色會是透明的。在使用者樣式表的一部分使用這些規則等於是迫使整份文件以白底黑字呈現。 
body {
  color: black !important; 
  background: white !important;
}

* { 
  color: inherit !important; 
  background: transparent !important;
}

@import 規則

層疊

English
  • 網頁作者：
  • 使用者：
  • 使用者代理：

層疊序

使用者代理必須使用下面的排序方式找找出一個元素的屬性值：

  1. 對於目標媒介型態找出所有適用於目標元素與屬性的所有宣告。當宣告對應的選擇器批配目標元素且目標媒介批配所有包含宣告的 @media 規則構成的媒介列與所有到達樣式表的路徑上的媒介列的時候，本規範稱該宣告適用於目標元素與屬性。
  2. 以重要性（一般或重要）與來源（網頁作者、使用者或使用者代理）排列。以下是優先度遞增的排序：
    1. 使用者代理宣告
    2. 使用者一般宣告
    3. 網頁作者一般宣告
    4. 網頁作者重要宣告
    5. 使用者重要宣告
  3. 將有相同重要性與來源的規則以特異性排序：比較特異的選擇器會覆蓋比較一般的。偽元素與偽類別分別以一般元素與一般類別計算。
  4. 最後，以設定的順序排序：若兩個宣告有相同的重要性、來源與特異性，則後面設定的優先度較高。匯入的樣式表裡面的宣告在樣式表本身裡的任何宣告的前面。
儘管可以將各個宣告設為 "!important"，上述策略相較於讀者，給予網頁作者樣式表較高的優先度。使用者代理必須給使用者取消某個特定網頁作者樣式的能力，例：透過下拉式選單。符合 UAAG 1.0 關口 4.14 即可滿足這個條件。[UAAG10]
Error creating thumbnail: Unable to save thumbnail to destination

!important 規則

English

CSS 以維持網頁作者樣式表與使用者樣式表之間力量的平衡為目標。預設上，網頁作者樣式表會覆蓋使用者樣式表（參見層疊規則 3）。

然而，為求平衡，"!important" 宣告（宣告後面接一個 DELIM token "!" 和關鍵字 "keyword"）的優先順序在一般宣告之前，網頁作者與使用者樣式表皆可含有 "!important" 宣告，而使用者 "!important" 宣告會覆蓋網頁作者 "!important" 宣告。本 CSS 功能給予使用者特殊要求（大一點的字型、顏色組合等等）的控制方法以限制網頁作者的呈現選擇，增進了文件的親和力。

宣告縮寫屬性（如：'background'）為 "!important" 等同於宣告縮寫屬性的所有子屬性為 "!important"
Error creating thumbnail: Unable to save thumbnail to destination
。
下面範例中的使用者樣式表的第一個規則有一個 "!important" 宣告，覆蓋了網頁作者樣式表的對應宣告。第二個宣告也因為有 "!important" 標記獲得優先。然而，使用者樣式表的第三個規則不是 "!important"，因此優先度不及網頁作者樣式表的（使用縮寫設定樣式的）第二個規則。另外，因為第二個網頁作者規則為 "!important"，第三個網頁作者規則的優先度也輸給第二個規則，這說明 "!important" 宣告同樣在網頁作者樣式表裡也有作用。 
/* 以下是使用者樣式表的一部分 */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }

/* 以下是網頁作者樣式表的一部分 */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }

計算選擇器的特異性

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

媒介型態

盒模型

視覺布局模型

視覺布局模型介紹

盒生成的控制

定位方案

常規流

浮動

絕對定位

'display'、'position' 與 'float' 的關係

English

影響盒生成與布局的三個屬性 — 'display'、'position' 與 'float' — 的關係如下：

  1. 若 'display' 的取值是 'none'，則 'position' 與 'float' 不適用。在這種情形下，元素不產生盒子。
  2. 否則，若 'position' 的取值是 'absolute' 或 'fixed'，則盒子為絕對定位，'float' 的計算值為 'none'，
    Error creating thumbnail: Unable to save thumbnail to destination
    且使用者代理根據以下的表設定 'display'。盒子位置取決於 'top'、'right'、'bottom' 與 'left' 屬性與盒子的包含塊。
  3. 否則，若 'float' 有不是 'none' 的值，則盒子為浮動盒且使用者代理根據以下的表設定 'display'。
    Error creating thumbnail: Unable to save thumbnail to destination
  4. 否則，若元素是根元素，除了 CSS2.1 未定義若指定值是 'list-item' 時計算值是 'block' 還是 'list-item' 以外，使用者代理根據以下的表設定 'display'。
    Error creating thumbnail: Unable to save thumbnail to destination
  5. 否則，'display' 的計算值為指定的值。
指定值 計算值
Error creating thumbnail: Unable to save thumbnail to destination
inline-table table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block block
其他 與指定值相同

常規流、浮動與絕對定位的比較

表現層次

文字方向：'direction' 與 'unicode-bidi' 屬性

視覺布局模型細節

視覺效果

生成內容、自動數列與列表

分頁媒介

顏色與背景

字體

文字

表格

表格介紹

CSS 表格模型

無名表格物件
Error creating thumbnail: Unable to save thumbnail to destination

English

非 HTML 的文件語言可不含有 CSS2.1 表格模型的所有元素。在這種情況下，使用者代理必須假設「失蹤」的元素存在以讓表格模型正常運作。所有表格元素皆會在自身周圍生成必要的無名物件，使得原來的元素與無名物件至少構成三層：'table'/'inline-table' 元素、'table-row' 元素與 'table-cell' 元素。消失的元素依照下列規則生成無名物件（例如，視覺表格布局用的無名盒）：

在這些規則中，我們使用下述詞彙：

行群組盒

一個 'table-row-group'、'table-header-group' 或 'table-footer-group'

真表格子盒

一個 'table-row' 盒、行群組盒、'table-column' 盒、'table-column-group' 盒或 'table-caption' 盒

真表格行父盒

一個 'table'、'inline-table' 或行群組盒

內部表格盒
Error creating thumbnail: Unable to save thumbnail to destination

一個 'table-cell' 盒、'table-row' 盒、行群組盒、'table-column' 盒或 'table-column-group' 盒

格容器
Error creating thumbnail: Unable to save thumbnail to destination

一個 'table-row' 盒或真表格行父盒

連續

若兩個兄弟盒的中間沒有僅含有空白的無名行內盒以外的兄弟，則稱這兩個兄弟為連續的。若一個兄弟盒序列裡的每一個盒都跟序列裡前面的盒連續，則稱這個兄弟盒序列為連續的。

在這些規則中，流外元素被視為是零寬度零高度的行內元素。這些元素也用同樣規則決定包含塊。

以下的步驟以三個階段進行。

  1. 移除不相關的盒子
    1. 使用者代理必須將 'table-column' 的所有子盒視為具有 'display: none'。
      Error creating thumbnail: Unable to save thumbnail to destination
    2. 若一個 'table-column-group' 的子盒 C 不是一個 'table-column'，則使用者代理必須將 C 視為具有 'display: none'。
      Error creating thumbnail: Unable to save thumbnail to destination
    3. 若盒子 D 是 A 的子嗣而中間不會產生 'table' 或 'inline-table' 盒，則稱 D 為 A 的真表格子嗣。若格容器 P 的子盒 C 是一個僅含有空白的無名行內盒，且 C 前面與後面的兄弟（若存在）是 P 的真表格子嗣且他們是 'table-caption' 盒或內部表格盒，則使用者代理必須將 C 視為具有 'display: none'。
      Error creating thumbnail: Unable to save thumbnail to destination
    4. 若盒子 B 是一個僅含有空白的無名行內盒，且 B 在兩個是內部表格盒或 'table-caption' 盒的兄弟之間，則使用者代理必須將 B 視為具有 'display: none'。
  2. 生成失蹤的子包裝：
    1. 若 'table' 或 'inline-table' 的子盒 C 不是一個真表格子盒，則生成一個無名 'table-row' 盒以包圍 C 與不是真表格子盒的連續兄弟。
    2. 若行群組盒的子盒 C 不是一個真表格子盒，則生成一個無名 'table-row' 盒以包圍 C 與不是 'table-row' 盒的連續兄弟。
    3. 若 'table-row' 盒的子盒 C 不是一個 'table-cell' 盒，則生成一個無名 'table-cell' 盒以包圍 C 與不是 'table-cell' 盒的連續兄弟。
  3. 生成失蹤的父盒：
    1. 對於由內部表格盒與 'table-caption' 盒組成的連續兄弟序列裡面的每一個 'table-cell' 盒 C，若 C 的父盒不是 'table-row'，生成一個無名 'table-row' 盒以包圍 C 與是 'table-cell' 盒的連續兄弟。
    2. 對於由真表格子盒組成的連續兄弟序列裡面的每一個真表格子盒 C，若 C 的父親不對
      Error creating thumbnail: Unable to save thumbnail to destination
      Error creating thumbnail: Unable to save thumbnail to destination
      則生成一個無名 'table' 或 'inline-table' 盒 T 以包圍 C 與是真表格子盒的連續兄弟。（若 C 的父盒是 'inline' 盒，則 T 必須 'inline-table' 盒，否則 C 必須是 'table' 盒。）
      • 若一個 'table-row' 盒的父盒不是行群組盒或 'table'/'lnline-table' 盒，則該盒的父親不對。
      • 若一個 'table-column' 盒的父盒不是 'table-column-group' 盒或 'table'/'lnline-table' 盒，則該盒的父親不對。
      • 若一個行群組盒、'table-column-group' 盒或 'table-caption' 盒的父盒不是 'table' 盒或 'inline-table' 盒，則該盒的父親不對。

使用者界面

Retrieved from "https://www.w3.org/html/ig/zh/wiki/index.php?title=CSS2/impl&oldid=2362"