階層 かいそう 式 しき 樣式 ようしき 表 ひょう (英語 えいご :C ascading S tyle S heets ,缩写:CSS ;又 また 称 しょう 串 くし 樣式 ようしき 列 れつ 表 ひょう 、级联样式表 ひょう 、串 くし 接 せっ 样式表 ひょう 、阶层式 しき 样式表 ひょう )是 ぜ 一种用来为结构化文档(如HTML 文 ぶん 档或XML 应用)添加 てんか 样式(字体 じたい 、间距和 わ 颜色等 とう )的 てき 计算机 つくえ 语言 ,由 ゆかり W3C 定 てい 义和维护。CSS3 現在 げんざい 已 やめ 被 ひ 大 だい 部分 ぶぶん 現代 げんだい 瀏 りゅう 覽 らん 器 き 支援 しえん ,而下一 いち 版 はん 的 てき CSS4 仍在开发中 ちゅう 。
CSS不 ふ 仅可以静态地修 おさむ 饰网页,还可以配合 はいごう 各 かく 种脚本 ほん 语言动态地 ち 对网页各元素 げんそ 进行格式 かくしき 化 か 。CSS 能 のう 够对网页中元 ちゅうげん 素 もと 位置 いち 的 てき 排 はい 版 ばん 进行像 ぞう 素 もと 级精确控制 せい ,支持 しじ 几乎所有 しょゆう 的 てき 字体 じたい 字 じ 号 ごう 样式,拥有对网页对象 ぞう 和 わ 模型 もけい 样式编辑的 てき 能力 のうりょく 。
CSS不能 ふのう 单独使用 しよう ,必须与 あずか HTML 或 ある XML 一起 かずき 协同工作 こうさく ,为HTML或 ある XML起 おこり 装 そう 饰作用 よう 。本文 ほんぶん 主要 しゅよう 介 かい 绍用于装饰HTML网页的 てき CSS技 わざ 术。其中HTML负责确定网页中有 ちゅうう 哪些内容 ないよう ,CSS确定以何种外观(大小 だいしょう 、粗 そ 细、颜色、对齐和 わ 位置 いち )展 てん 现这些元素 げんそ 。CSS可 か 以用于设定 てい 页面布 ぬの 局 きょく 、设定页面元素 げんそ 样式、设定适用于所有 しょゆう 网页的 てき 全局 ぜんきょく 样式。CSS可 か 以零散 ち 地 ち 直接 ちょくせつ 添加 てんか 在 ざい 要 よう 应用样式的 てき 网页元素 げんそ 上 じょう ,也可以集中 しゅうちゅう 化 か 内 ない 置 おけ 于网页、链接式 しき 引入网页以及导入式 しき 引入网页。[ 1]
CSS最 さい 重要 じゅうよう 的 てき 目 め 标是将文 まさふみ 件 けん 的 てき 内容 ないよう 与 あずか 它的显示分 ぶん 隔 へだた 开来。在 ざい CSS出 で 现前,几乎所有 しょゆう 的 てき HTML文 ぶん 件 けん 内 ない 都 と 包含 ほうがん 文 ぶん 件 けん 显示的 てき 信 しん 息 いき ,比 ひ 如字体 じたい 的 てき 颜色、背景 はいけい 应该是 ぜ 怎样的 てき 、如何 いか 排列 はいれつ 、边缘、连线等 とう 等 とう 都 と 必须一 いち 一 いち 在 ざい HTML文 ぶん 件 けん 内 ない 列 れつ 出 で ,有 ゆう 时重复列出 で 。CSS使 し 作者 さくしゃ 可 か 以将这些信 しん 息 いき 中 ちゅう 的 てき 大 だい 部分 ぶぶん 隔 へだた 离出来 でき ,简化HTML文 ぶん 件 けん ,这些信 しん 息 いき 被 ひ 放 ひ 在 ざい 一 いち 个辅助 すけ 的 てき ,用 よう CSS语言写 うつし 的 てき 文 ぶん 件 けん 中 ちゅう 。HTML文 ぶん 件 けん 中 ちゅう 只 ただ 包含 ほうがん 结构和 わ 内容 ないよう 的 てき 信 しん 息 いき ,CSS文 ぶん 件 けん 中 ちゅう 只 ただ 包含 ほうがん 样式的 てき 信 しん 息 いき 。
比 ひ 如HTML中 ちゅう h2
标志这一个二级标题,它在级别上 うえ 比 ひ 一 いち 级标题h1
低 てい ,比 ひ 三 さん 级标题h3
高 こう 。这些信 しん 息 いき 都 と 是 ぜ 结构上 じょう 的 てき 信 しん 息 いき 。
一般来说级别越高的标题其字体也越大,h1
的 てき 字体 じたい 最大 さいだい ,因 いん 为一般来说字体越大它表示的内容就越重要,此外一般标题都使用粗体字,来 らい 突出 とっしゅつ 它们的 てき 重要 じゅうよう 性 せい 。一般 いっぱん 来 らい 说h2
使用 しよう 粗 そ 体 からだ 字 じ ,其字体 じたい 比 ひ h3
大 だい ,比 ひ h1
小 しょう 。这些信 しん 息 いき 是 ぜ 显示用 よう 的 てき 信 しん 息 いき 。
在 ざい CSS出 で 现前,假 かり 如作者 しゃ 要 よう 确定h2
标题的 てき 颜色、字形 じけい 、大小 だいしょう 或 ある 其他显示特 とく 征 せい 的 てき 话,他 た 要 よう 使用 しよう HTML中 ちゅう 的 てき font
或 ある 其他样式指令 しれい ,光 ひかり h2
不 ふ 够,因 いん 为h2
只 ただ 是 ぜ 一 いち 个结构指令 しれい 。假 かり 如一个标题要用斜体字、红色的 てき 字 じ 符 ふ 、白色 はくしょく 的 てき 底 そこ 色 しょく 的 てき 话,作者 さくしゃ 要 よう 这样写 うつし :
<h2><font color="red" bgcolor="white"><i>使用 しよう CSS</i></font></h2>
这些显示用 よう 的 てき 指令 しれい 使 し 得 とく 一 いち 个HTML变得非常 ひじょう 复杂,要 よう 維護也比较困难。假 かり 如所有 しょゆう 的 てき 二级标题都要这样来显示的话,所有 しょゆう 的 てき 二级标题的指令都要这么复杂。此外读者无法改 あらため 变这些规定 じょう ,假 かり 如一个读者更喜欢蓝色的标题的话,他 た 无法改 あらため 变标题的颜色,因 いん 为文件 けん 的 てき 作者 さくしゃ 特 とく 别规定 てい 了 りょう 标题的 てき 颜色。
使用 しよう CSS的 てき 话h2
指令 しれい 只 ただ 规定文章 ぶんしょう 的 てき 结构,其显示 しめせ 由 よし 样式表 ひょう 来 らい 规定,上面 うわつら 的 てき 例 れい 子 こ 可 か 以变成 なり 这样:
<h2>使用 しよう CSS</h2>
服 ふく 从的样式表 ひょう 可 か 以规定 じょう h2
指令 しれい 使用 しよう 斜体 しゃたい 字 じ ,红色字 じ 和白 わじろ 色 しょく 背景 はいけい :
h2 { color: red; background: white; font-style: italic; }
这样显示与 あずか 内容 ないよう 就分开了(由 ゆかり 于CSS的 てき 优点,W3C现在正 ただし 在 ざい 考 こう 虑将HTML中 ちゅう 的 てき 许多显示用 よう 的 てき 指令 しれい 废弃掉)。HTML只 ただ 表 ひょう 达文章 ぶんしょう 的 てき 结构,CSS表 ひょう 达所有 しょゆう 的 てき 显示。CSS可 か 以指示 しじ 颜色、字形 じけい 、排列 はいれつ 、大小 だいしょう 以及其他许多非 ひ 视觉的 てき 表 ひょう 达方式 しき ,比 ひ 如将一篇文件的内容读出来。
CSS样式信 しん 息 いき 可 か 以包含 ほうがん 在 ざい 一个附件中或包含在HTML文 ぶん 件 けん 内 ない 。读者可 か 以使用 しよう 多 た 个样式 しき 表 ひょう ,在 ざい 重 じゅう 复的情 じょう 况下他 た 可 か 以选择其中 ちゅう 之 の 一 いち 。不同 ふどう 的 てき 媒介 ばいかい 可 か 以使用 しよう 不同 ふどう 的 てき 样式表 ひょう 。比 ひ 如一个文件 けん 在 ざい 荧光屏 へい 上 うえ 的 てき 显示可 か 以与在 ざい 打 だ 印 しるし 机 つくえ 中 ちゅう 打 だ 印 しるし 出来 でき 的 てき 显示不同 ふどう 。这样作者 さくしゃ 可 か 以为不同 ふどう 的 てき 媒体 ばいたい 设计最 さい 佳 けい 的 てき 显示方式 ほうしき 。此外CSS的 てき 目 め 标之一是让读者有更大的控制显示的自由。假 かり 如一个读者觉得斜体字的标题读起来很困难,他 た 可 か 以使用 しよう 自己 じこ 的 てき 样式表 ひょう 文 ぶん 件 けん ,这个样式表 ひょう 可 か 以“层叠”使用 しよう ,他 た 可 か 以只改 あらため 变红色 しょく 斜体 しゃたい 字 じ 这个样式而保留 ほりゅう 所有 しょゆう 其他的 てき 样式。
包含 ほうがん CSS的 てき XHTML文 ぶん 件 けん 示 しめせ 例 れい
编辑
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "zh" >
< head >
< style type = "text/css" >
body {
background : #fff ;
color : #777 ;
}
h1 {
font-weight : bold ;
font-style : italic ;
font-family : sans-serif ;
color : green ;
}
</ style >
</ head >
< body >
< h1 > 這個句 く 子 こ 用 よう 綠色 みどりいろ 、粗 そ 體 からだ 和 わ 斜體 しゃたい 字 じ 顯示 けんじ </ h1 >
< p > 普通 ふつう 字 じ 。</ p >
< h1 style = "color:red; background:green;" >
這個句 く 子 こ 用 よう 大 だい 的 てき 、紅色 こうしょく 斜體 しゃたい 字 じ 在 ざい 綠色 みどりいろ 背景 はいけい 上 じょう 顯示 けんじ ,通用 つうよう 的 てき h1樣式 ようしき 在 ざい 這裡被 ひ 取 と 代 だい 了 りょう 。
</ h1 >
< h1 style = "color: green;" >< strong >< em > 這個句 く 子 こ 用 よう 綠色 みどりいろ 、粗 そ 體 からだ 和 わ 斜體 しゃたい 字 じ 顯示 けんじ </ em ></ strong ></ h1 >
</ body >
</ html >
CSS由 よし 多 た 組 ぐみ 「規則 きそく 」組成 そせい 。每 まい 個 こ 規則 きそく 由 よし 「選擇 せんたく 器 き 」(selector)、「屬性 ぞくせい 」(property)和 かず 「值」(value)組成 そせい :
選擇 せんたく 器 き (Selector):多 た 個 こ 選擇 せんたく 器 き 可 か 以半形 がた 逗號,
隔 へだた 開 ひらき 。
屬性 ぞくせい (property):CSS1、CSS2、CSS3規定 きてい 了 りょう 許多 きょた 的 てき 屬性 ぞくせい ,目的 もくてき 在 ざい 控 ひかえ 制 せい 選擇 せんたく 器 き 的 てき 樣式 ようしき 。
值(value):指 ゆび 屬性 ぞくせい 接受 せつじゅ 的 てき 設定 せってい 值,多 た 個 こ 關 せき 鍵 かぎ 字 じ 時 じ 大 だい 都 と 以空格 かく 隔 へだた 開 ひらき 。
屬性 ぞくせい 和 わ 值之间用半 はん 形 かたち 冒 おかせ 號 ごう :
隔 へだた 开,屬性 ぞくせい 和 わ 值合称 しょう 为「特性 とくせい 」。多 た 个特性 せい 间用;
隔 へだた 开,最 さい 后 きさき 用 よう 大 だい 括 くく 號 ごう { }
括 くく 起 おこり 来 らい 。
要 よう 針 はり 對 たい 沒 ぼつ 有 ゆう 標 しるべ 籤 くじ 定義 ていぎ 範圍 はんい 進行 しんこう 樣式 ようしき 設定 せってい 時 じ ,可 か 利用 りよう <div>
與 あずか <span>
標 しめぎ 籤 くじ
CSS裡 うら 現在 げんざい 共有 きょうゆう 5種 しゅ 基本 きほん 選擇 せんたく 器 き (Basic Selectors)[ 2] 和 わ 2种伪选择器 き 。不同 ふどう 选择器 き 的 てき 优先级别和 わ 运作性能 せいのう 往往 おうおう 存在 そんざい 差 さ 异。[ 3]
標 しめぎ 籤 くじ 選擇 せんたく 器 き (h1、p等 とう )——elementname
類別 るいべつ 選擇 せんたく 器 き (class)——.elementname
ID選擇 せんたく 器 き (ID)——#elementname
萬 まん 用 よう 選擇 せんたく 器 き ——* ns|* *|*
屬性 ぞくせい 選擇 せんたく 器 き (也翻译为“通 つう 配 はい 符 ふ 选择器 き ”)——[attribute]
屬性 ぞくせい 选择器 き 允 まこと 许用户自定 てい 义属性 せい 名称 めいしょう ,而不仅仅限 げん 于id,class属性 ぞくせい 。屬性 ぞくせい 选择器 き 共有 きょうゆう 7種 しゅ [ 4] [ 5] 。
代 だい 碼
说明
[attribute]
元素 げんそ 有 ゆう attribute
的 てき 屬性 ぞくせい 。
[attribute="value"]
屬性 ぞくせい attribute
裡 うら 是 ぜ value
[attribute~="value"]
屬性 ぞくせい attribute
裡 うら 使用 しよう 空白 くうはく 分 ぶん 開 ひらき 的 てき 字 じ 串 くし 裡 うら 其中一 いち 個 こ 是 ぜ value
[attribute|="value"]
屬性 ぞくせい attribute
裡 うら 是 ぜ value
或 ある 者 もの 以value-
开头的 てき 字 じ 符 ふ 串 くし
[attribute^="value"]
屬性 ぞくせい attribute
裡 うら 最前 さいぜん 的 てき 是 ぜ value
[attribute$="value"]
屬性 ぞくせい attribute
裡 うら 最後 さいご 的 てき 是 ぜ value
[attribute*="value"]
屬性 ぞくせい attribute
裡 うら 有 ゆう value
出現 しゅつげん 過 か 至 いたり 少 しょう 一 いち 次 じ
CSS里 さと 现在共有 きょうゆう 4种組合 くみあい 选择符 ふ (Combinators):[ 2]
符号 ふごう
说明
A > B
子 こ 代 だい 选择器 き ,选择A下 した 一 いち 层的元素 げんそ B
A ~ B
兄弟 きょうだい 选择器 き ,选择与A同 どう 层的元素 げんそ B
A + B
相 あい 邻兄弟 きょうだい 选择器 き ,选择与A相 あい 邻的元素 げんそ B(不能 ふのう 被 ひ 任 にん 何 なん 元素 げんそ 相 しょう 隔 へだた )
A B
后 きさき 代 だい 选择器 き ,包含 ほうがん 选择符 ふ
例 れい 子 こ :
p {
font-size : 110 % ;
font-family : garamond , sans-serif ;
}
h2 {
color : red ;
background : white ;
}
. highlight {
color : red ;
background : yellow ;
font-weight : bold ;
}
在 ざい 這個例 れい 子 こ 中有 ちゅうう 三 さん 個 こ 選擇 せんたく 器 き :p
、h2
和 わ .highlight
,color: red
是 ぜ 一 いち 個 こ 定義 ていぎ ,其中color
是 ぜ 屬性 ぞくせい ,red
是 これ color
的 てき 值。
在 ざい 這裏HTML中 ちゅう 的 てき 結構 けっこう P
(段落 だんらく )和 わ H2
(2級 きゅう 標題 ひょうだい )獲得 かくとく 了 りょう 不同 ふどう 的 てき 樣式 ようしき 。每 まい 個 こ 段落 だんらく 的 てき 字體 じたい 的 てき 大小 だいしょう 比 ひ 包含 ほうがん 這個段落 だんらく 的 てき 結構 けっこう 的 てき 字體 じたい 的 てき 大小 だいしょう 要 よう 大 だい 10%,其字形 がた 是 ぜ Garamond
,假 かり 如Garamond
沒 ぼつ 有 ゆう 的 てき 話 ばなし 那 な 麼使用 しよう 一般 いっぱん 的 てき sans-serif
字形 じけい 。2級 きゅう 標題 ひょうだい 的 てき 字 じ 用 よう 紅色 こうしょく ,底面 ていめん 是 ぜ 白色 はくしょく 的 てき 。這個例 れい 子中 こなか 的 てき 第 だい 三 さん 個 こ 規則 きそく 規定 きてい 了 りょう 一 いち 個 こ class
的 てき 樣式 ようしき 。通過 つうか class
屬性 ぞくせい 每 ごと 個 こ HTML結構 けっこう 都 と 可 か 以被指定 してい 為 ため 這個class
,例 れい 如:
<P class="highlight">這個段落 だんらく 將 はた 被 ひ 顯示 けんじ 為 ため 黃 き 底 そこ 紅 べに 字 じ 粗 そ 體 からだ 。</P>
顯示 けんじ 為 ため
這個段落 だんらく 將 はた 被 ひ 顯示 けんじ 為 ため 黃 き 底 そこ 紅 べに 字 じ 粗 そ 體 からだ 。
除 じょ 使用 しよう <style>
之 これ 外 がい ,也可於HTML 內直接 ちょくせつ 使用 しよう style="/*CSS在 ざい 這裡*/"
︰
< p style = "color:red; background:yellow; font-weight:bold;" >
這個段落 だんらく 同樣 どうよう 會 かい 被 ひ 顯示 けんじ 為 ため 黃 き 底 そこ 紅 べに 字 じ 粗 そ 體 からだ 。
</ p >
CSS中 ちゅう 还提供 ていきょう 了 りょう 偽 にせ 元素 げんそ 選擇 せんたく 器 き 和 わ 虛 きょ 擬 なずらえ 類別 るいべつ 選擇 せんたく 器 き ,但 ただし 用途 ようと 单一一 いち 些,常 つね 与 あずか 其它选择器 き 组合在 ざい 一 いち 起 おこり 使用 しよう 。偽 にせ 元素 げんそ 的 てき 元素 げんそ 主要 しゅよう 用 よう 于选取 と 与 あずか 另一个选择器选中对象临近的元素。虛 きょ 擬 なずらえ 類別 るいべつ 選擇 せんたく 器用 きよう 于选中 ちゅう 处于特定 とくてい 状 じょう 态或具有 ぐゆう 特定 とくてい 性 せい 质的元素 げんそ 。
引入CSS规则的 てき 多 た 种方式 しき 及其层叠性 せい
编辑
CSS可 か 以有多 た 种引入方 いりがた 式 しき ,一个网页可以引入多个CSS文 ぶん 件 けん ,同 どう 一 いち 种CSS规则可 か 以被反 はん 复多次 じ 添加 てんか 。这使得 とく CSS的 てき 使用 しよう 方式 ほうしき 非常 ひじょう 灵活,但 ただし 也会频繁地 ち 出 で 现规则冲突。同 どう 时对一个网页元素设定无法并存的2种样式 しき 时,就会引起冲突。CSS的 てき 特色 とくしょく 之 の 一就是其解决规则冲突的方案。CSS的 てき 规则冲突可 か 以分为不同 どう 来 らい 源 みなもと 之 の 间的规则冲突和 わ 同 どう 一来源内部的规则冲突。CSS分 ぶん 层次、立体 りったい 化 か 的 てき 比 ひ 较不同 どう 规则的 てき 优先级的方式 ほうしき ,就是所 しょ 谓层叠性(cascading)的 てき 体 からだ 现。
首 くび 先 さき 说来源 げん 的 てき 多 た 样性,CSS信 しん 息 いき 可 か 以来 いらい 自 じ :
作者 さくしゃ 样式
作者 さくしゃ 可 か 以在他 た 的 てき HTML文 ぶん 件 けん 中 ちゅう 确定一 いち 个外来 がいらい 的 てき 、独立 どくりつ 的 てき CSS文 ぶん 件 けん (外部 がいぶ 样式表 ひょう ),其优先 さき 级最低 さいてい
作者 さくしゃ 可 か 以将CSS信 しん 息 いき 包含 ほうがん 在 ざい HTML文 ぶん 件 けん 内 ない (内部 ないぶ 样式表 ひょう )
作者 さくしゃ 可 か 以在一 いち 个HTML指令 しれい 内 ない 结合CSS指令 しれい (内 うち 联样式 しき ),其优先 さき 级最高 だか 。一般这样做是为了在特殊情况下,把 わ 上面 うわつら 来 らい 源 げん 的 てき CSS抵消掉
客 きゃく 户端自 じ 定 てい 义样式 しき (client-side style sheet)
浏览网页的 てき 用 よう 户可以自己 じこ 在 ざい 本地 ほんじ 计算机上 きじょう 自己 じこ 写 うつし 1个CSS文 ぶん 件 けん ,然 しか 后 きさき 就可以在浏览器 き 内通 ないつう 过设置 おけ 好 こう 特定 とくてい 选项,来 らい 加 か 载自己 じこ 的 てき CSS文 ぶん 件 けん 。这个CSS文 ぶん 件 けん 可 か 以用在 ざい 所有 しょゆう 的 てき HTML文 ぶん 件 けん 上 じょう 。当 とう 网页作者 さくしゃ 没 ぼつ 有 ゆう 设定某 ぼう 项规则,但 ただし 存在 そんざい 对应的 てき 用 よう 户自定 てい 义规则时,用 よう 户的规则就会起 おこり 作用 さよう 。假 かり 如作者 しゃ 的 てき CSS文 ぶん 件 けん 与 あずか 读者的 てき 相 しょう 冲突,浏览器 き 会 かい 采 さい 用 よう 作者 さくしゃ 的 てき 规则。如果读者有 ゆう 特殊 とくしゅ 要求 ようきゅう ,可 か 以通过在自 あらじ 定 てい 义规则末尾 まつび 添加 てんか !important
提 ひさげ 升 ます 自 じ 定 てい 义规则的显示优先权。(网页作者 さくしゃ 也可以使用 しよう !important
给规则提升 ます 权限,但 ただし 是 ぜ 优先级别比 ひ 不 ふ 过由用 よう 户写的 てき !important
声明 せいめい ,!important
对于网页作者 さくしゃ 的 てき 意 い 义仅在 ざい 于网页开发阶段 だん 的 てき 规则冲突测试)
浏览器 き 样式
假 かり 如外部 ぶ 没 ぼつ 有 ゆう 特 とく 别指定 してい 一个样式的话,一般浏览器自己有一个内在的样式。由 よし 于不同 どう 浏览器 き 的 てき 默 だま 认样式 しき 并不一致 いっち ,所以 ゆえん 讲究美 び 观的网页的 てき 设计者 しゃ 一般喜欢去掉这个默认的样式。
其次还需知道 ともみち 规则特殊 とくしゅ 性 せい (specificity)的 てき 概念 がいねん 。某 ぼう 个规则的特殊 とくしゅ 性 せい 也常被 ひ 称 しょう 为该规则的 てき 具体 ぐたい 程度 ていど 。规则特殊 とくしゅ 性 せい 的 てき 高低 こうてい 次序 じじょ 如下(依 よ 次 じ 递减):
行内 こうない 样式
ID选择器 き
class选择器 き
标签选择器 き
通用 つうよう 选择器 き (也就是 ぜ 通 どおり 配 はい 符 ふ 选择器 き ,用 もちい 得 え 少 しょう )
特殊 とくしゅ 性 せい 优先原 げん 则是最 さい 重要 じゅうよう 的 てき 优先级比较规则。当 とう 引起冲突的 てき 2种规则的特殊 とくしゅ 性 せい 存在 そんざい 差 さ 异时(例 れい 如一个是通 どおり 过ID选择器 き 指定 してい 样式,另一个是通过class选择器 き 指定 してい 样式),引擎将 はた 优先采 さい 用 よう 特殊 とくしゅ 性 せい 更 さら 高 だか 的 てき 样式。规则的 てき 特殊 とくしゅ 性的 せいてき 比 ひ 较是最 さい 优先的 てき 。如果能 のう 直接 ちょくせつ 判断 はんだん 出 で 特殊 とくしゅ 性的 せいてき 差 さ 异,就无需考虑其它规则了。
不同 ふどう 来 き 源 げん 的 てき 规则之 の 间的优先原 げん 则是第 だい 二 に 重要 じゅうよう 的 てき 。当 とう 规则来 らい 源 みなもと 相 しょう 同 どう 时(同 どう 为外部 ぶ 样式或 ある 同 どう 为内部 ぶ 样式),下 した 一步就需要比较不同类型来源的优先级别。总地来 らい 说,记住“行内 こうない 样式优先于内部 ぶ 样式,内部 ないぶ 样式又 また 优先于外部 ぶ 样式”即 そく 可 か 应对多数 たすう 常 つね 见的情 じょう 形 がた 。像 ぞう 网页浏览者 しゃ 自 じ 定 てい 义样式 しき 表 ひょう 的 てき 优先级别如何 いか ,只 ただ 有 ゆう 浏览器 き 的 てき 设计者 しゃ 才 ざい 需要 じゅよう 考 こう 虑,与 あずか 网页设计者 しゃ 的 てき 关系不 ふ 大 だい 。
如果考 こう 虑有可能 かのう 出 で 现的更 さら 复杂的 てき 来 らい 源 げん 冲突,内容 ないよう 就比较多了 りょう 。但 ただし 一般在写样式时,应尽可能 かのう 避免这些复杂情 じょう 形 がた 的 てき 出 で 现。具体 ぐたい 来 らい 说,一般情形下的采纳样式效果的优先级顺序为:[ 6]
行内 こうない 样式
内部 ないぶ 样式
在 ざい HTML中通 なかとおり 过<link>
标签直接 ちょくせつ 引入的 てき 外部 がいぶ 样式表 ひょう
在 ざい CSS中通 なかとおり 过@import
语句间接引入的 てき 外部 がいぶ 样式表 ひょう
浏览网页的 てき 用 よう 户自己 じこ 定 てい 义的样式表 ひょう (需要 じゅよう 手 しゅ 动加载)
浏览器 き 默 だま 认的样式(如标题有默 だま 认大小 しょう 、段落 だんらく 之 の 间有默 だま 认间距等,不同 ふどう 浏览器 き 的 てき 默 だま 认样式 しき 不完全 ふかんぜん 一 いち 样)
CSS中 ちゅう 还有用 よう !important
修 おさむ 饰的重要 じゅうよう 性 せい 声明 せいめい 。如果计入重要 じゅうよう 性 せい 声明 せいめい ,那 な 么在以上 いじょう 规则的 てき 最前 さいぜん 面 めん 还需要 よう 加 か 上 じょう 2条 じょう 规则:
用 よう 户从本地 ほんじ 加 か 载的重要 じゅうよう 自 じ 定 てい 义样式 しき
网页设计者 しゃ 设定的 てき 重要 じゅうよう 样式
设计重要 じゅうよう 性 せい 声明 せいめい 是 ぜ 为部分 ぶん 特殊 とくしゅ 用 よう 户和所有 しょゆう 开发者 しゃ 提供 ていきょう 方便 ほうべん 。一方 いっぽう 面 めん ,用 よう 户可以通过设置 おけ 自己 じこ 的 てき 色彩 しきさい 方案 ほうあん ,并对其使用 よう 重要 じゅうよう 性 せい 声明 せいめい 来 らい 提 ひさげ 升 ます 浏览体 たい 验。另一方面 ほうめん ,网页的 てき 设计者 しゃ 难免会 かい 遇 ぐう 到 いた 因 いん 规则冲突而导致特定 とくてい 样式规则失效 しっこう 的 てき 情 じょう 形 がた ,设计者 しゃ 可 か 以通过给不知 ふち 何故 なぜ 不 ふ 起 おこり 作用 さよう 的 てき 规则增加 ぞうか 重要 じゅうよう 性 せい 声明 せいめい ,看 み 看 み 是 これ 否 いや 有 ゆう 样式变化来 らい 确定是 ぜ 否 ひ 是 ぜ 不 ふ 小心 しょうしん 导致了 りょう 规则冲突而引起 おこり 特定 とくてい 规则被覆 ひふく 盖失效 しっこう 。
有 ゆう 时还会 かい 遇 ぐう 到 いた 选择器 き 优先级无法 ほう 直接 ちょくせつ 判断 はんだん ,而且规则的 てき 来 らい 源 げん 也相同 どう 的 てき 情 じょう 形 がた 。如果网页设计者 しゃ 很少使用 しよう 层次比 ひ 较复杂的选择器 き (比 ひ 如多级的后 きさき 代 だい 选择器 き ),那 な 么必须比较权重 じゅう 的 てき 情 じょう 况一般不会遇到(一般要么是可以直接根据前面的规则判断出优先性结果,或 ある 者 もの 是 ぜ 起 おこり 冲突的 てき 2条 じょう 规则的 てき 权重完全 かんぜん 一 いち 样,只 ただ 能 のう 继续去看 み 后 きさき 一条比较出现次序的机制)。此时,CSS还有一套分数加权(或 ある 者 もの 说是分数 ぶんすう 累 るい 积)的 てき 机 つくえ 制 せい 用 よう 于解决此类规则冲突。先 さき 列 れつ 出 で 基本 きほん 的 てき 分 ぶん 值:
1个行内 ない 样式占 うらない 1000分 ふん
1个id选择器 き 占 うらない 100分 ふん
1个class选择器 き 占 うらない 10分 ふん
1个标签选择器占 うらない 1分 ふん
组合使用 しよう 多 た 个基本 きほん 选择器 き 时,不同 ふどう 选择器 き 的 てき 得分 とくぶん 会 かい 累加 るいか 到 いた 一 いち 起 おこり 。最 さい 终得分 ぶん 高 だか 的 てき 选择器 き ,其指定 してい 的 てき 样式会 かい 胜出。
举例:
.type1 #id3{color: green; font-size: 20px;}
div p #id3{color: blue; background-color: grey;}
假 かり 设这2行 ぎょう 代 だい 码都能 のう 够选中 ちゅう 同 どう 一 いち 个ID为“id3”的 てき 元素 げんそ ,且都是 ぜ 出自 しゅつじ 同 どう 一来源的样式表。可 か 以看到 いた ,二者使用的优先级最高的选择器都是ID选择器 き ,起 おこり 冲突的 てき 样式设置是 ぜ 字体 じたい 颜色。一个给此元素设置字体颜色为绿色,另一个给此元素设置字体颜色为蓝色。按照评分规则,因 いん 为前一种代码使用了1个类选择器 き 和 わ 1个id选择器 き ,所以 ゆえん 得分 とくぶん 为10+100=110分 ふん ;后 きさき 一种代码使用了2个标签选择器和 わ 1个id选择器 き ,所以 ゆえん 得分 とくぶん 为1+1+100=102分 ふん 。因 よし 为110分 ふん >102分 ふん ,所 しょ 以前 いぜん 一种规则胜出,目 もく 标元素的 すてき 最 さい 终文字 もじ 颜色应该是 ぜ 绿色。
当 とう 权重比 ひ 较仍然 しか 不能 ふのう 分 ぶん 出 で 优先级胜负时,最 さい 后 きさき 就是把 わ 守 もり 关底的 てき “靠 もたれ 后 きさき 优先”的 てき 原 げん 则了,也就是 ぜ 后 きさき 定 てい 义的样式优先级较高 だか 。如果起 おこり 冲突的 てき 规则来 らい 源 みなもと 相 しょう 同 どう ,而且得分 とくぶん 也相同 どう ,那 な 么最后 きさき 的 てき 冲突解 かい 决法则就是 ぜ 看 み CSS代 だい 码出现的先 さき 后 きさき 顺序。后 きさき 出 で 现的规则会 かい 覆 くつがえ 盖掉与之 の 优先级相当 そうとう 的 てき 先 さき 出 で 现的规则。也可称 しょう 作 さく “后 きさき 发制人 じん ”、“后 きさき 来者 らいしゃ 居 きょ 上 じょう ”或 ある “后 きさき 浪 なみ 推前浪 なみ ”原 はら 则,随 ずい 便 びん 你怎么称呼 しょうこ 。这种原 げん 则的适用情 じょう 形 がた 很常见,所 しょ 以此规则也很重要 じゅうよう 。
此章节
需要 じゅよう 扩充 。
(2018年 ねん 4月 がつ 21日 にち )
此章节
需要 じゅよう 扩充 。
(2018年 ねん 4月 がつ 21日 にち )
此章节
需要 じゅよう 扩充 。
(2018年 ねん 4月 がつ 21日 にち )
包含 ほうがん 块是CSS定位 ていい 属性 ぞくせい 所 しょ 依 よ 托 たく 的 てき 理 り 论模型 がた 。
层叠上下 じょうげ 文 ぶん 规则决定了 りょう 当 とう 有 ゆう 网页元素 げんそ 位置 いち 发生部分 ぶぶん 重合 じゅうごう 时,重合 じゅうごう 部分 ぶぶん 的 てき 上下 じょうげ 叠放次序 じじょ 。层叠上下 じょうげ 文 ぶん 规则详细规定了 りょう 当 とう 浮动、定位 ていい 以及z轴数值同时出现时,元素 げんそ 叠放次序 じじょ 的 てき 总规则。
格式 かくしき 化 か 上下 じょうげ 文 ぶん 有 ゆう 特殊 とくしゅ 的 てき 布 ぬの 局 きょく 性 せい 质,巧妙 こうみょう 创建格式 かくしき 化 か 上下 じょうげ 文 ぶん 可 か 以解决方便 びん 地 ち 达到几种特殊 とくしゅ 目的 もくてき :[ 7]
避免垂直 すいちょく 方向 ほうこう 不同 ふどう 元素 げんそ 的 てき 相 しょう 邻外边距自 じ 动合并
清 きよし 除 じょ 因 いん 为为子 こ 元素 げんそ 设置了 りょう 浮动而可能 かのう 造成 ぞうせい 的 てき 父 ちち 元素 げんそ 高度 こうど 塌陷
实现一 いち 列 れつ 宽度固定 こてい 、一列宽度不固定的双列宽度自适应布局
CSS檔內也可以包含 ほうがん 注釋 ちゅうしゃく ,注 ちゅう 釋放 しゃくほう 在 ざい /*
和 わ */
之 これ 间。一般的浏览器也识别以双斜杠(//
)开头的 てき 这种注 ちゅう 释,但 ただし 是 ぜ 这是不 ふ 规范的 てき 做法。
哈肯·維姆·萊 ,Opera 公司 こうし 首席 しゅせき 技術 ぎじゅつ 長 ちょう 和 わ CSS 網 あみ 頁 ぺーじ 標準 ひょうじゅん 共同 きょうどう 創始 そうし 人 じん
HTML 规范虽然规定了 りょう 网页中 ちゅう 的 てき 标题、段落 だんらく 应该使用 しよう 的 てき 标签,但 ただし 是 ぜ 没 ぼつ 有 ゆう 涉 わたる 及这些内容 ないよう 应该以何种样式 しき (比 ひ 如大小 しょう 、位置 いち 、间距、缩进等 とう 属性 ぞくせい )呈 てい 现在浏览器 き 中 ちゅう 。从1990年代 ねんだい 初 はつ HTML被 ひ 发明开始,样式表 ひょう 就以各 かく 种形式 しき 出 で 现了。不同 ふどう 的 てき 浏览器 き 结合了 りょう 它们各自 かくじ 的 てき 样式语言,读者(也就是 ぜ 浏览网页的 てき 用 よう 户)可 か 以使用 しよう 这些样式语言来 らい 调节网页的 てき 显示方式 ほうしき 。一开始样式表是给读者用的,最初 さいしょ 的 てき HTML版本 はんぽん 只 ただ 含有 がんゆう 很少的 てき 显示属性 ぞくせい ,读者来 らい 决定网页应该怎样被 ひ 显示。
1993年 ねん ,Robert Raisch提出 ていしゅつ 了 りょう 一 いち 种名为“RRP”的 てき 样式规则建 けん 议。但 ただし 这个RRP只 ただ 允 まこと 许网页使用 しよう 1个样式 しき 表 ひょう ,不 ふ 像 ぞう 现在的 てき CSS能 のう 支持 しじ 同 どう 时加载多个。不 ふ 久 ひさ 后 きさき 出 で 现的Mosaic 浏览器 き 就采用 よう 增加 ぞうか 新 しん 种类的 てき HTML标签实现样式的 てき 表 ひょう 达,以满足 あし 设计师的要求 ようきゅう ,这也与现在的 てき CSS设计原 げん 则不符 ふ 。随 ずい 着 ぎ HTML自 じ 带的样式功 こう 能 のう 的 てき 增加 ぞうか ,外来 がいらい 定 てい 义样式 しき 的 てき 语言逐渐减弱了 りょう 。1993年 ねん 发布的 てき 这个Mosaic浏览器 き 是 ぜ 第 だい 一 いち 款用户界面 めん ,并支持 しじ 书签、图标按钮和 わ 图片显示。[ 8] 之 これ 前 まえ 的 てき 浏览器 き 都 と 是 ぜ 纯文字 もじ 浏览器 き 。即 そく 使 つかい 在 ざい 今 こん 天 てん ,只 ただ 使用 しよう 操作 そうさ 系 けい 统命令 れい 行 ぎょう 自 じ 带的Telnet 命令 めいれい ,也可以查看 み 网页的 てき 源 みなもと 代 だい 码。[ 9]
后 きさき 来 らい ,台湾 たいわん 人 じん 魏 たかし 培 つちかえ 源 げん 开发的 てき ViolaWWW 浏览器 き 使用 しよう 了 りょう 一种规则具有层次嵌套性的样式表,并第1个支持 しじ 通 どおり 过<link>
标签引用 いんよう 外部 がいぶ 样式表 ひょう 。FOSI最早 もはや 支持 しじ 以相对尺寸 しゃくすん 值来表示 ひょうじ 字体 じたい 大小 だいしょう 。函数 かんすう 式 しき 风格的 てき DSSSL语言支持 しじ 在 ざい 样式表 ひょう 中 ちゅう 进行定 てい 义变量 りょう 、继承变量、定 てい 义函数 すう 等 とう 功 こう 能 のう ,但 ただし 是 ぜ 语法复杂。1994年 ねん ,万 まん 维网之 の 父 ちち 蒂姆·伯 はく 纳斯-李 り 在 ざい 欧 おう 美 び 众多高 こう 能 のう 物理 ぶつり 研究 けんきゅう 者 しゃ 和 わ 技 わざ 术人员的支持 しじ 下 か ,于美国 こく 麻 あさ 省 しょう 理工 りこう 学院 がくいん 创立了 りょう 万 まん 维网联盟 (W3C),其职责是提供 ていきょう 网络标准化 か 建 けん 议。[ 10] 1994年 ねん ,Håkon W Lie提出 ていしゅつ 层叠HTML样式表 ひょう (Cascading HTML Style Sheets,CHSS)。CHSS既 すんで 支持 しじ 用 よう 户自定 てい 义样式 しき 表 ひょう ,也支持 しじ 网页作者 さくしゃ 样式表 ひょう ,而且可 か 以满足 あし 不同 ふどう 规则以百分比 ひゃくぶんひ 的 てき 方式 ほうしき 组合使用 しよう 。它的权重规则计算方式 ほうしき 不 ふ 够直观,当 とう 不同 ふどう 规则混合 こんごう 时会得 えとく 到 いた 什么实际效果 こうか 并不容易 ようい 从代码中看 み 出 で 。1996年 ねん ,出 で 现了与 あずか CSS语法很像的 てき 表 ひょう 现指明 あかり 语言(Presentation Specification Language,简称"PSL 96")。PSL 96除 じょ 表 ひょう 达样式 しき 外 がい ,也支持 しじ 条件 じょうけん 判断 はんだん 等 とう 功 こう 能 のう ,还可根 ね 据 すえ 对浏览器信 しん 息 いき 的 てき 判断 はんだん 来 らい 使用 しよう 不同 ふどう 的 てき 样式,但 ただし 未 み 获得青 あお 睐。
1994年 ねん ,哈肯·維姆·萊 提出 ていしゅつ 了 りょう CSS的 てき 最初 さいしょ 建 けん 议[ 11] 。伯 はく 特 とく ·波 は 斯当 とう 时正在 ざい 设计一 いち 个叫做Argo 的 てき 浏览器 き ,他 た 们决定 じょう 一 いち 起 おこり 合作 がっさく 设计CSS。当 とう 时已经有过一些样式表语言的建议了,但 ただし CSS是 ぜ 第 だい 一 いち 个含有 がんゆう “层叠”的 てき 主意 しゅい 的 てき 。在 ざい CSS中 ちゅう ,一个文件的样式可以从其他的样式表中继承下来。读者在 ざい 有 ゆう 些地方 ちほう 可 か 以使用 しよう 他 た 自己 じこ 更 さら 喜 き 欢的样式,在 ざい 其他地方 ちほう 则继承,或 ある “层叠”作者 さくしゃ 的 てき 样式。这种层叠的 てき 方式 ほうしき 使 し 作者 さくしゃ 和 わ 读者都 と 可 か 以灵活 かつ 地 ち 加入 かにゅう 自己 じこ 的 てき 设计,混合 こんごう 各人 かくじん 的 てき 爱好。哈肯·萊于1994年 ねん 在 ざい 芝 しば 加 か 哥的 てき 一次会议上第一次展示了CSS的 てき 建 けん 议,1995年 ねん 他 た 与 あずか 波 なみ 斯一起再次展示这个建议。当 とう 时W3C刚刚建立 こんりゅう ,W3C对CSS的 てき 发展很感兴趣,它为此组织了一 いち 次 じ 讨论会 かい 。哈肯、波 なみ 斯和其他一 いち 些人(比 ひ 如微 ほろ 软的 てき 托 たく 馬 ば 斯·里 ざと 爾 しか 登 とう )是 ぜ 这个项目的 もくてき 主要 しゅよう 技 わざ 术负责人。1996年 ねん 底 そこ ,CSS已 やめ 经完成 かんせい 。1996年 ねん 12月 [來 らい 源 みなもと 請求 せいきゅう ] ,哈肯·萊与伯 はく 特 とく ·波 は 斯发布 ぬの 了 りょう CSS规范的 てき 第 だい 1个版本 はんぽん 。这也成 なり 了 りょう 哈肯·萊的博士 はかせ 论文的 てき 一 いち 部分 ぶぶん 。当 とう 时已有 ゆう 的 てき 主流 しゅりゅう 浏览器 き 的 てき 内 ない 核 かく 架 か 构完全 ぜん 不 ふ 适合解析 かいせき CSS的 てき 语法,加 か 上 じょう 早年 そうねん 设计师滥用 よう HTML标签来 き 表 おもて 达样式 しき (这导致“标签汤”(tagsoup)这一骂名的出现)、且漠不 ふ 关心代 だい 码校验[ 12] ,所以 ゆえん CSS等 とう 到 いた 几年之 の 后 きさき 才 ざい 流行 りゅうこう 起 おこり 来 らい 。1998年 ねん ,浏览器 き 市 し 场份额被微 ほろ 软公司 こうし 的 てき Internet Explorer 4和 わ 网景公司 こうし 的 てき Netscape Navigator 4两大浏览器 き 巨 きょ 头所占 うらない 据 すえ 。[ 10] CSS出 で 现后,微 ほろ 软的IE浏览器 き 走 はし 在 ざい 了 りょう 逐步实现CSS第 だい 1版 はん 标准的 てき 前列 ぜんれつ 。但 ただし 是 ぜ 因 いん 为不重 じゅう 视问题修补,导致遗留Bug 很多,这也使 し 得 とく IE浏览器 き 长期为人们诟病 びょう 。网景 则把重心 じゅうしん 放 ひ 在 ざい 了 りょう 网页脚本 きゃくほん 语言的 てき 开发上 じょう ,但 ただし 很快被 ひ 微 ほろ 软模仿。网景在 ざい 90年代 ねんだい 末 まつ 和 わ 微 ほろ 软展开的浏览器 き 大 だい 战 中 ちゅう 最 さい 终一败涂地 ち ,走 はし 向 こう 破 やぶ 产边缘,但 ただし 网景也成功 せいこう 推出了 りょう 日 び 后 きさき 广泛流行 りゅうこう 于网页设计中的 てき JavaScript语言。浏览器 き 大 だい 战使得 とく 网页设计人 じん 员深受其害 がい ,因 いん 为不同 どう 浏览器 き 支持 しじ 的 てき 语法规则不 ふ 太一 たいち 样,网页设计人 じん 员不得 とく 不 ふ 为IE浏览器 き 和 わ 网景浏览器 き 的 てき 浏览器 き 分 ぶん 别设计一套网页。[ 10] 新 しん 成立 せいりつ 的 てき 民 みん 间设计人员团体 たい “網 あみ 頁 ぺーじ 標準 ひょうじゅん 計 けい 劃 ”(WaSP)发动水 すい 军将W3C的 てき 建 けん 议宣扬为标准,并批评还未 み 加盟 かめい W3C标准的 てき 业界厂商。[ 10]
1997年初 ねんしょ ,W3C组织了 りょう 专门管 かん CSS的 てき 工作 こうさく 组,其负责人是 ぜ 克 かつ 里 さと 斯·里 さと 雷 かみなり 。这个工作 こうさく 组开始 はじめ 讨论第 だい 1版 はん 中 ちゅう 没 ぼつ 有 ゆう 涉 わたる 及到的 てき 问题,其结果 はて 是 ぜ 1998年 ねん 5月 がつ 出版 しゅっぱん 的 てき 第 だい 2版 はん 规则。網 あみ 頁 ぺーじ 標準 ひょうじゅん 計 けい 劃的7位 い 成 なり 员成立 せいりつ 了 りょう “CSS武士 ぶし 团”(CSS Samurai),指出 さしで Opera浏览器 き 和 わ IE浏览器 き 在 ざい 支持 しじ CSS方面 ほうめん 存在 そんざい 的 てき 诸多问题。Opera公司 こうし 着手 ちゃくしゅ 解 かい 决了问题,但 ただし 微 ほろ 软并未 み 解 かい 决。網 あみ 頁 ぺーじ 標準 ひょうじゅん 計 けい 劃也积极劝说网景公司 こうし 和 わ Macromedia 公司 こうし 分 ぶん 别改进其产品对CSS标准的 てき 支持 しじ 。2003年 ねん ,Dave Shea推出了 りょう 一 いち 个名为“CSS禅 ぜん 意 い 花 はな 园”("CSS Zen Garden")的 てき 站点,向 こう 人 ひと 们展示 てんじ 出 で 仅通过应用 よう 不同 ふどう 页面样式规则,就可以实现对网页艺术风格的 てき 焕然一新 いっしん 。这个网站在 ざい 网页设计相 しょう 关人群 ぐん 中 ちゅう 产生了 りょう 不 ふ 小 しょう 影 かげ 响。[ 10]
从2006年 ねん 到 いた 2009年 ねん ,“DIV+CSS”布 ぬの 局 きょく 逐步取 と 代 だい 缺乏 けつぼう 灵活性 せい 的 てき 传统表 ひょう 格 かく 布 ぬの 局 きょく ,无表格 かく 网页设计 成 なり 为网页内容 ないよう 布 ぬの 局 きょく 的 てき 主流 しゅりゅう 方案 ほうあん 。此时也出现了一些为了跟风而滥用DIV布 ぬの 局 きょく 的 てき 情 じょう 况,比 ひ 如将<h1>
和 わ <h2>
等 とう 本身 ほんみ 已 やめ 有 ゆう 语义的 てき 标签也改用 よう <div>
标签替 がえ 代 だい 。[ 13]
CSS3引入的 てき 简单动画功 こう 能 のう 使 し 得 とく CSS也开始 はじめ 涉 わたる 足 あし 以往 いおう 只 ただ 应由JavaScript负责的 てき 效果 こうか 交互 こうご 工作 こうさく 。到 いた 2017年 ねん 为止,第 だい 3版 はん 规则还未完備 かんび 。
於1994年 ねん ,哈肯·維姆·萊 和 わ 伯 はく 特 とく ·波 は 斯合作 がっさく 設計 せっけい CSS。他 た 們在1994年 ねん 首 くび 次 じ 在 ざい 芝 しば 加 か 哥的 てき 一次会议上第一次展示了CSS的 てき 建 けん 议。
1996年 ねん [ 12] 12月发表的 てき CSS1的 てき 要求 ようきゅう 有 ゆう :[ 14]
支持 しじ 字体 じたい 的 てき 大小 だいしょう 、字形 じけい 、强 つよ 调
支持 しじ 字 じ 的 てき 颜色、背景 はいけい 的 てき 颜色和 わ 其他元素 げんそ
支持 しじ 文章 ぶんしょう 特 とく 征 せい 如字母 はは 、词和行 ぎょう 之 の 间的距离
支持 しじ 文字 もじ 的 てき 排列 はいれつ 、图像、表 おもて 格和 かくわ 其他元素 げんそ
支持 しじ 边缘、围框和 わ 其他关于排 はい 版 ばん 的 てき 元素 げんそ
支持 しじ id和 わ class
1998年 ねん [ 12] 5月W3C发表了 りょう CSS2[ 15] ,其中包括 ほうかつ 新 しん 的 てき 内容 ないよう 如:
绝对的 てき 、相 あい 对的和 わ 固定 こてい 的 てき 定位 ていい 元素 げんそ 、媒体 ばいたい 型 がた 的 てき 概念 がいねん 、
双 そう 向 こう 文 ぶん 件 けん 和 わ
一 いち 个新的 てき 字 じ 型 がた 。
CSS2.1修 おさむ 改 あらため 了 りょう CSS2中 ちゅう 的 てき 一 いち 些错误,删除了 りょう 其中基本 きほん 不 ふ 被 ひ 支持 しじ 的 てき 内容 ないよう 和 わ 增加 ぞうか 了 りょう 一些已有的浏览器的扩展内容。[ 16]
CSS3标准已 やめ 部分 ぶぶん 公布 こうふ ,但 ただし 仍未全部 ぜんぶ 制 せい 订完毕,还会有 ゆう 其它新 しん 内容 ないよう 继续加入 かにゅう 。W3C网站上 じょう 有 ゆう 专页展示 てんじ CSS3发展的 てき 进展[ 17] 。
CSS3的 てき 標 しるべ 誌 し 。
CSS3分 ふん 成 なり 了 りょう 不同 ふどう 類別 るいべつ ,稱 しょう 為 ため 「modules」。而每一 いち 個 こ 「modules」都 みやこ 有 ゆう 於CSS2中 ちゅう 額 がく 外 がい 增加 ぞうか 的 てき 功 こう 能 のう ,以及向後 こうご 兼 けん 容 よう 。CSS3早 さ 於1999年 ねん 已 やめ 經 けい 開始 かいし 制 せい 訂 てい 。[ 18] 直 ちょく 到 いた 2011年 ねん 6月 がつ 7日 にち ,CSS 3 Color Module終 おわり 於發布 はっぷ 為 ため W3C Recommendation。[ 19]
CSS3裡 うら 增加 ぞうか 了 りょう 不 ふ 少 しょう 功 こう 能 のう ,如:「border-radius」、「text-shadow」、「transform」以及「transition」。CSS3亦 また 支援 しえん 動畫 どうが (animation)及立體 りったい (preserved-3d)。
部分 ぶぶん 属性 ぞくせい (例 れい 如旋转类属性 ぞくせい (如:transform),动画类属性 せい ,立体 りったい 类属性 せい ),由 ゆかり 於現時 じ 不同 ふどう 瀏 りゅう 覽 らん 器 き 支持 しじ 程度 ていど 不同 ふどう ,需要 じゅよう 加 か 上 じょう 不同 ふどう 的 てき 浏览器 き 前 ぜん 綴 つづり 来 らい 区分 くぶん 。
W3C 於2011年 ねん 9月 がつ 29日 にち 開始 かいし 了 りょう 設計 せっけい CSS4[ 20] [ 21] 。直 ちょく 至 いたり 現時 げんじ 只 ただ 有 ゆう 極少 きょくしょう 數 すう 的 てき 功 こう 能 のう 被 ひ 部分 ぶぶん 網 あみ 頁 ぺーじ 瀏 りゅう 覽 らん 器 き 支援 しえん ,如使用 しよう 在 ざい HTML而非SVG上 じょう 的 てき pointer-events[ 22] 。
CSS4增加 ぞうか 了 りょう 一些更方便的选择器,并简化 か 了 りょう 一些现有选择器的用法。
浏览器 き 内 ない 核 かく 主要 しゅよう 负责解析 かいせき 网页内容 ないよう 样式以及进行脚本 きゃくほん 处理(现在分 ぶん 别由浏览器 き 内部 ないぶ 的 てき 页面渲染引擎和 わ JavaScript引擎 分 ぶん 工 こう )。其中页面渲染就是正 ぜせい 确识别出CSS代 だい 码并在 ざい 窗 まど 口中 くちじゅう 显示出 で 对应的 てき 内容 ないよう 样式。开发一 いち 个可支持 しじ CSS语法解析 かいせき 的 てき 浏览器 き 并非易 えき 事 ごと ,CSS规则繁 しげる 杂,尤 ゆう 其是需要 じゅよう 考 こう 虑不同 ふどう 的 てき CSS规则之 の 间会存在 そんざい 相互 そうご 影 かげ 响的问题。自 じ 从Mozilla基金 ききん 会 かい 将 はた Gecko 排 はい 版 ばん 引擎单独发布后 きさき ,现在有 ゆう 众多浏览器 き 厂商采 さい 用 よう 由 よし 第 だい 三方发布的页面渲染引擎,独立 どくりつ 开发新 しん 页面渲染引擎的 てき 机 つくえ 构很少 しょう 。
首 くび 先 さき 是 ぜ 标准实现程度 ていど 的 てき 问题。儘管CSS1标准在 ざい 1996年 ねん 就制订完成 かんせい 了 りょう ,但 ただし 一 いち 直 ちょく 到 いた 3年 ねん 後 ご 還 かえ 沒 ぼっ 有 ゆう 一個瀏覽器實現了其中的全部语法规则。上市 かみいち 的 てき 各 かく 个浏览器都 と 只 ただ 是 ぜ 实现了 りょう 对一部分 ぶぶん 规则的 てき 支持 しじ 。2000年 ねん 3月 がつ ,由 ゆかり 微 ほろ 軟在麥 むぎ 金 きん 塔 とう 電腦 でんのう 平台 ひらだい 上 うえ 发布的 てき 5.0版 はん Internet Explorer (IE)是 ぜ 第 だい 1個 いっこ 全部 ぜんぶ 實現 じつげん CSS1的 てき 瀏 りゅう 覽 らん 器 き 。此後許多 きょた 其他瀏 りゅう 覽 らん 器 き 也实现了CSS1和 わ CSS2的 てき 一 いち 部分 ぶぶん 。但 ただし 到 いた 2004年 ねん 為 ため 止 とめ 還 かえ 沒 ぼっ 有 ゆう 一個瀏覽器实现了全部CSS2规则。尤 ゆう 其aural和 わ paged等 とう 特性 とくせい 是 ぜ 被 ひ 支持 しじ 得 とく 最 さい 差 さ 的 てき 。
其次,支持 しじ 某 ぼう 种特性 せい ,不 ふ 代表 だいひょう 用 よう 起 おこり 来 らい 就没有 ゆう 问题。旧 きゅう IE版本 はんぽん 就以Bug多 た 而闻名 めい 。其中声名 せいめい 狼藉 ろうぜき 的 てき IE 6存在 そんざい 元素 げんそ 堆 うずたか 叠Bug、幽 かそけ 灵字符 ふ ,方 ぽう 块神秘 ひ 消失 しょうしつ 等 とう 稀 まれ 奇 き 古 こ 怪 かい 的 てき 设计缺陷 けっかん 。[ 23] 微 ほろ 软自从在第 だい 1轮浏览器 き 大 だい 战 中 ちゅう 胜出后 きさき ,就依仗独霸市场的优势,轻视修 おさむ 补IE Bug的 てき 呼声 よびごえ ,导致其市场份额后来 らい 又 また 逐渐被 ひ 其它浏览器 き 蚕食 さんしょく ,产生第 だい 2轮浏览器大 だい 战。
另外还有代 だい 码跨浏览器 き 兼 けん 容 よう 性 せい 的 てき 问题。“能 のう 够在任 ざいにん 何 なん 浏览器 き 中 ちゅう 显示”并不意味 いみ 着 ぎ “在任 ざいにん 何 なん 一个浏览器中显示的效果相同”。[ 12] 即 そく 使 つかい 是 ぜ 徹底 てってい 实现了 りょう CSS1的 てき 瀏 りゅう 覽 らん 器 き 也遇到 いた 了 りょう 許多 きょた 困難 こんなん 。許多 きょた CSS的 てき 实现机 つくえ 制 せい 互相矛盾 むじゅん 、有 ゆう 錯或有 ゆう 其它稀 まれ 奇 き 古 こ 怪 かい 的 てき 地方 ちほう 。為 ため 了 りょう 使 し 他 た 們的頁 ぺーじ 面 めん 在 ざい 任意 にんい 系統 けいとう 上 じょう 的 てき 任意 にんい 浏览器 き 中 ちゅう 的 てき 顯示 けんじ 效果 こうか 一致 いっち ,网页作者 さくしゃ 往往 おうおう 要 よう 被 ひ 迫 せり 写 うつし 出 で 繁 しげる 琐的代 だい 码或使用 しよう 各 かく 种奇技 わざ 淫 いん 巧 たくみ 。一個最著名的錯誤涉及到顯示方形的寬度,在 ざい IE瀏 りゅう 覽 らん 器 き 中 ちゅう 方形 ほうけい 的 てき 寬 ひろし 度 ど 的 てき 顯示 けんじ 有 ゆう 錯誤 さくご ,其結果 けっか 是 ぜ 方形 ほうけい 的 てき 寬 ひろし 度 ど 在 ざい 許多 きょた 瀏 りゅう 覽 らん 器 き 中 ちゅう 被 ひ 正確 せいかく 地 ち 顯示 けんじ ,但 ただし 在 ざい IE上方 かみがた 形 がた 的 てき 寬 ひろし 度 ど 太 ふとし 窄。雖然這個錯誤 さくご 有 ゆう 解決 かいけつ 的 てき 辦法,但 ただし 它限制 せい 了 りょう 其他一 いち 些功能 のう (IE 8.0已 やめ 經 けい 改善 かいぜん 方形 ほうけい 寬 ひろし 度 ど 顯示 けんじ 問題 もんだい )。旧版 きゅうばん IE还有与 あずか 其它浏览器 き 计算方式 ほうしき 不 ふ 一样的方盒模型。
网页 的 てき 讀者 どくしゃ 和 わ 作者 さくしゃ 都 と 可 か 以使用 しよう CSS来 らい 决定文 ぶん 件 けん 的 てき 颜色 、字体 じたい 、排 はい 版 ばん 等 とう 显示特性 とくせい 。CSS最 さい 主要 しゅよう 的 てき 目的 もくてき 是 ぜ 将文 まさふみ 件 けん 的 てき 内容 ないよう 与 あずか 显示分 ぶん 隔 へだた 开来。这有许多好 こう 处:
文 ぶん 件 けん 的 てき 可 か 读性加 か 强 きょう
文 ぶん 件 けん 的 てき 结构更 さら 加 か 灵活
作者 さくしゃ 和 わ 读者可 か 以自己 じこ 决定文 ぶん 件 けん 的 てき 显示
文 ぶん 件 けん 的 てき 结构简化了 りょう
另外,在 ざい HTML中 ちゅう :
一 いち 个整个网站或其中一部分网页的显示信息被集中在一个地方,要 よう 改 あらため 变它们很方便 ほうべん
不同 ふどう 的 てき 读者可 か 以有不同 ふどう 的 てき 样式,比 ひ 如有的 てき 读者需要 じゅよう 字体 じたい 比 ひ 较大
HTML文 ぶん 件 けん 本身 ほんみ 的 てき 范围变小了 りょう ,它的结构简单了 りょう ,它不需要 じゅよう 包含 ほうがん 显示的 てき 信 しん 息 いき
CSS还可以控制 せい 其他参 さん 数 すう ,例 れい 如声音 おん (假 かり 如浏览器有 ゆう 阅读功 こう 能 のう 的 てき 话)或 ある 给視障 さわ 者 しゃ 用 よう 的 てき 感受 かんじゅ 装置 そうち 。
CSS明 あかり 顯 あらわ 的 てき 缺點 けってん 包括 ほうかつ :
瀏 りゅう 覽 らん 器 き 不同 ふどう 的 てき 支援 しえん
瀏 りゅう 覽 らん 器 き 对CSS的 てき 支持 しじ 没 ぼつ 有 ゆう 统一,造成 ぞうせい 不同 ふどう 的 てき 瀏 りゅう 覽 らん 器 き 顯示 けんじ 效果 こうか 不同 ふどう 。例 れい 如在微 ほろ 軟Internet Explorer 的 てき 舊 きゅう 版本 はんぽん 6.0,有 ゆう 許多 きょた 独 どく 有 ゆう 的 てき CSS 2.0屬性 ぞくせい ,但 ただし 錯誤 さくご 顯示 けんじ 很多重要 じゅうよう 的 てき 屬性 ぞくせい ,例 れい 如:width
,height
,和 わ float
[ 24] 。許多 きょた CSS编写人員 じんいん 为了尽 つき 可能 かのう 在 ざい 常用 じょうよう 的 てき 各 かく 个瀏覽 らん 器 き 中 ちゅう 達 たち 到 いた 一致 いっち 的 てき 版 ばん 面 めん 編 へん 排 はい ,要 よう 写 うつし 很多针对各 かく 个浏览器的 てき 不同 ふどう 的 てき CSS代 だい 码。当 とう 版 はん 面 めん 编排很复杂时,要 よう 在 ざい 各 かく 个浏览器裏 うら 取得 しゅとく 相 しょう 同 どう 效果 こうか 是 ぜ 不可能 ふかのう 的 てき 。
CSS沒 ぼつ 有 ゆう 父 ちち 選擇 せんたく 器 き
CSS選擇 せんたく 器 き 無法 むほう 提供 ていきょう 元素 げんそ 的 てき 繼承 けいしょう 性 せい 。先進 せんしん 的 てき 選擇 せんたく 器 き (例 れい 如XPath )有 ゆう 助 じょ 於複雜 ふくざつ 的 てき 樣式 ようしき 設計 せっけい 。然 しか 而,瀏 りゅう 覽 らん 器 き 的 てき 性能 せいのう 和 わ 增加 ぞうか 彩 いろどり 現 げん 的 てき 問題 もんだい ,關係 かんけい 著 ちょ 父 ちち 層 そう 選擇 せんたく 器 き ,卻是CSS的 てき 工作 こうさく 群 ぐん 組 ぐみ 拒絕 きょぜつ 建議 けんぎ 的 てき 主要 しゅよう 原因 げんいん 。 而CSS4 則 のり 計 けい 劃包括 ほうかつ 類似 るいじ 功 こう 能 のう 。
不能 ふのう 明確 めいかく 地 ち 指定 してい 繼承 けいしょう 性 せい
樣式 ようしき 的 てき 繼承 けいしょう 性 せい ,建立 こんりゅう 在 ざい 瀏 りゅう 覽 らん 器 き 中 ちゅう DOM元 もと 素的 すてき 層 そう 級 きゅう 和 わ 具體 ぐたい 的 てき 規則 きそく 上 じょう ,參照 さんしょう CSS2說明 せつめい 中 ちゅう 的 てき 章節 しょうせつ 6.4.1。[ 25]
垂直 すいちょく 控 ひかえ 制 せい 的 てき 局限 きょくげん
元素 げんそ 的 てき 水平 すいへい 放置 ほうち 普遍 ふへん 地 ち 易 えき 於控制 せい ,垂直 すいちょく 控 ひかえ 制 せい 則 そく 不 ふ 然 しか 。簡單 かんたん 來 き 說 せつ ,垂直 すいちょく 地 ち 圍繞 いじょう 一 いち 個 こ 元素 げんそ 、頁 ぺーじ 尾 お 的 てき 放置 ほうち 不能 ふのう 高 だか 於可見 みる 視 し 窗 まど (viewport,視 し 窗 まど 或 ある 螢 ぼたる 幕 まく 的 てき 可 か 見 み 範圍 はんい [ 26] )的 てき 底部 ていぶ 範圍 はんい 。这需要 よう 複雜 ふくざつ 的 てき 樣式 ようしき 規則 きそく ,或 ある 是 ぜ 規則 きそく 簡單 かんたん ,但 ただし 不 ふ 被 ひ 廣 こう 泛支援 しえん 。
没 ぼつ 有 ゆう 算 ざん 术功能 のう
直 ちょく 至 いたり CSS 2.1的 てき CSS沒 ぼつ 有 ゆう 辦法明確 めいかく 簡單 かんたん 地 ち 进行计算(例 れい 如:margin-left: 10% - 3em + 4px;
)。计算功 こう 能 のう 在 ざい 很多情況 じょうきょう 下 か 都 と 是非 ぜひ 常 つね 有用 ゆうよう 的 てき ,例 れい 如:總 そう 欄 らん 位 い 中 ちゅう 計算 けいさん 欄 らん 位 い 的 てき 尺寸 しゃくすん 限 げん 制 せい 。無論 むろん 如何 いか ,CSS WG[ 27] 發表 はっぴょう 了 りょう CSS局限 きょくげん 性 せい 的 てき 草案 そうあん 。IE 5至 いたり IE 7提供 ていきょう expression()
函数 かんすう (即 そく 所 しょ 谓的CSS表 ひょう 达式 )来 らい 执行计算功 こう 能 のう ,例 れい 如left: expression(document.body.offsetWidth - 110 + "px");
。为了與 あずか CSS标准看 じゅんかん 齐,并且该函数 すう 性能 せいのう 差 さ ,微 ほろ 軟从IE 8开始停止 ていし 支持 しじ 此函数 すう 。
CSS 3中 ちゅう 具有 ぐゆう calc()
表 おもて 达式以执行 ぎょう 计算功 こう 能 のう [ 28] [ 29] 。
p {
margin : calc ( 1 rem - 2 px ) calc ( 1 rem - 1 px )
}
缺乏 けつぼう 唯一 ゆいいつ 性 せい
同樣 どうよう 的 てき 效果 こうか 可 か 以用不同 ふどう 的 てき 屬性 ぞくせい 來 らい 完成 かんせい ,這对不 ふ 少 しょう 的 てき CSS編 へん 寫 うつし 人員 じんいん 造成 ぞうせい 困 こま 擾。例 れい 如position
、display
與 あずか float
定義 ていぎ 了 りょう 不同 ふどう 的 てき 配置 はいち 方式 ほうしき ,而且不能 ふのう 有效 ゆうこう 的 てき 交替 こうたい 使用 しよう 。一 いち 個 こ display: table-cell
元素 げんそ 不能 ふのう 指定 してい float
或 ある 是 ぜ position: relative
,因 いん 為 ため 指定 してい float: left
的 てき 元素 げんそ 不 ふ 應 おう 該受到display
效果 こうか 的 てき 影響 えいきょう 。再 さい 者 しゃ ,沒 ぼつ 有 ゆう 考慮 こうりょ 到 いた 新 しん 建立 こんりゅう 屬性 ぞくせい 所 しょ 造成 ぞうせい 的 てき 影響 えいきょう ,例 れい 如在表 ひょう 格 かく 中 ちゅう 你應該使用 しよう border-spacing
而不是 ぜ margin-*
來 らい 指定 してい 表 ひょう 格 かく 元素 げんそ 。這是因 いん 為 ため 依 よ 照 あきら CSS準則 じゅんそく ,表 ひょう 格 かく 內部元素 げんそ 是 ぜ 沒 ぼつ 有 ゆう 邊 べ 界 かい (margin)的 てき 。
使用 しよう CSS缩写可 か 以减少 しょう CSS文 ぶん 件 けん 的 てき 大小 だいしょう ,并使其更为易读[ 30] 。例 れい 如:颜色缩写(缩写16进制的 てき 色彩 しきさい 值)、盒尺寸 しゃくすん 缩写、边框缩写、背景 はいけい 缩写和 わ 文字 もじ 缩写。
优先采 さい 用 よう 用 よう 户样式 しき 表 ひょう 中 ちゅう 指定 してい 的 てき 重要 じゅうよう 规则是 ぜ 一 いち 项为色弱 しきじゃく 或 ある 色盲 しきもう 人士 じんし 提供 ていきょう 便利 べんり 的 てき 设计考 こう 虑。
莫振杰. HTML与 あずか CSS进阶教程 きょうてい 1. 中国 ちゅうごく 北京 ぺきん : 人民 じんみん 邮电出版 しゅっぱん 社 しゃ . 2016年 ねん . ISBN 978-7-115-43295-7 (中 ちゅう 文 ぶん (中国 ちゅうごく 大 だい 陆)) .