CSS

维基百科，自由的百科全书

跳转到： 导航, 搜索
消歧義
關於CSS的其他意思，詳見CSS (消歧义)。

Cascading Style Sheets（层叠样式表／串樣式列表），简写为CSS，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。目前最新版本是CSS 2.1，为W3C的候选推荐标准。下一版本CSS 3仍然在开发过程中。

目录

[编辑] 概述

一个网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的结构（用HTML或其他相关的语言写的）与文件的显示（CSS）分隔开来。这个分隔有许多好处：

  1. 文件的可读性被加强
  2. 文件的结构更加灵活
  3. 作者和读者可以自己决定文件的显示
  4. 文件的结构简化了。

CSS还可以使用其他的显示方式，比如声音（假如浏览器有阅读功能的话）或给盲人用的感受装置。此外CSS还可以与XHTML、XML或其他结构文件一起使用，唯一条件是显示这种文件的浏览器装备了接受CSS的功能。

HTML文件中的每一个class或id都可以有自己的显示特征，而且每一个没有id特性的HTML结构也可以有自己的显示特征。这些结构有的是HTML自己需要的，有的是专门为CSS设置的。

CSS信息可以来自：

  • 作者样式
    • 作者可以在他的HTML文件中确定一个外来的、独立的CSS文件
    • 作者可以将CSS信息包含在HTML文件内
    • 作者可以在一个HTML指令内结合CSS指令，这样做一般是为了在一个特殊情况下将总体的CSS指令抵消掉
  • 读者样式
    • 读者可以在他的浏览器内设立一个地区性的CSS文件。这个CSS文件可以用在所有的HTML文件上。假如作者的CSS文件与读者的相冲突，那么读者可以确定他想使用哪个
  • 浏览器的样式
    • 假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式

使用CSS的优点有：

  • 一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便
  • 不同的读者可以有不同的样式，比如有的读者需要字体比较大
  • HTML文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息

[编辑] 樣式規則

CSS的語法很簡單，它使用一組英語詞來表示不同的樣式和特徵。

一個式樣表由一組規則組成。每個規則由一個“選擇器”（selector）和一個定義部分組成。每個定義部分包含一組由半形分號（;）分離的定義。這組定義放在一對大括弧（{ }）之間。每個定義由一個特性，一個半形冒號（:）和一個值組成。

選擇器（Selector）
通常為檔中的元素（element），如 HTML 中的<BODY>，<P>，<strong>等標籤，多個選擇器可以半形逗號（,）隔開。
屬性（property）
CSS1、CSS2、CSS3 規定了許多的屬性，目的在控制選擇器的樣式。
值（value）
指屬性接受的設定值，可由各種關鍵字（keyword）組成，多個關鍵字時大都以空格隔開。
要針對沒有標籤定義範圍進行樣式設定時，可利用<div>與<span>標籤

例子：

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>

顯示為

這個段落將被顯示為黃底紅字粗體。

CSS檔內也可以包含注釋，注釋以/*開始，以*/結尾，例如： /* 注釋 */

[编辑] 缩写规则

使用 CSS 缩写可以减少 CSS 文件的大小，并使其更为易读[1]，例如：

1. 颜色缩写：16 进制的色彩值，如果每两位的值相同，可以进行缩写，例如：

  1. 000000 可以缩写为 #000，#336699 可以缩写为 #369;

2. 盒尺寸缩写：Property: Value1 Value2 Value3 Value4；四个值依次表示 Top，Right，Bottom，Left

3. 边框缩写

边框的属性如下：

     border-width: 1px;
     border-style: solid;
     border-color: #000;

可以缩写为一句：border: 1px solid #000;

4. 背景缩写

     background-color: #F00;
     background-image: url(Background.gif);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 0 0;

可以缩写为一句：background: #F00 url(Background.gif) no-repeat fixed 0 0;

[编辑] 历史

从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2007年为止，第三版还未完備。

[编辑] 採納的困難

儘管CSS1規格1996年就完成了，但一直到三年後還沒有一個瀏覽器徹底實現了這些規格。 2000年3月出版的微軟在麥金塔電腦上運行的Internet Explorer 5.0是第一個徹底貫徹CSS1的瀏覽器。此後許多其他瀏覽器也貫徹了CSS1和CSS2的一部分。但到2004年為止還沒有一個瀏覽器徹底貫徹了CSS2。尤其aural和paged等特性是被支持得最差的。

即使徹底貫徹了CSS1的瀏覽器也遇到了許多困難。許多CSS的貫徹互相矛盾、有錯或有其他稀奇古怪的地方。為了使他們的頁面在所有的瀏覽器中、在所有的系統上的顯示相同，作者往往要使用特別的技巧或結局特殊的困難。一個最著名的錯誤涉及到顯示方形的寬度，在Internet Explorer瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在Internet Explorer上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能（最新版8.0已改善方形寬度顯示問題）。

[编辑] 使用CSS

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:bold italic sans-serif;
        color:green;
    }
    </style>
</head>
<body>
    <h1>这个句子用綠色、粗体和斜体字显示</h1>
    <p>普通字。</p>
    <h1 style="color:red; background:green;">
    这个句子用大的、红色斜体字在绿色背景上显示，通用的 h1 样式在这里被取代了。
    </h1>
    <h1>这个句子用綠色、粗体和斜体字显示</h1>
</body>
</html>

[编辑] 一个读者定义的样式表的例子

文件highlightheaders.css的内容是：

H1 {color: white; background: orange !important; } 
H2 {color: white; background: green !important; }

这样的文件被贮存在读者的计算机内，他在浏览器内记录下显示时使用这个文件。!important表示在显示时使用读者的规定，而不是作者的规定。

[编辑] 常見的陷阱

有時一個網頁的作者會亂用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示指令的作者可能會在所有的HTML文件內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步，但它還是有許多同樣的缺點，而且維護時的工作量與混合使用差不多。

CSS與其他程式語言有著一些共同的陷阱。尤其在命名CSS的id和class時，CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用bigred來命名一個用大紅字體的突出顯示的字節。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的字節應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是emphasized，它描寫的是這個class的用意，而不是它是如何被顯示的。

另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會依賴在HTML文件內與HTML指令結合的CSS指令來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個文件就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。）

HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的文件比傳統的使用表格的文件要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div指令。

另一個陷阱是為了克服常見的瀏覽器錯誤而引入特別的CSS指令，這些指令當然是為了克服已知的錯誤而引入的，但它們使一個CSS文件的維護性能降低，有時這樣的CSS文件的維護量甚至比過去的HTML文件的維護量還大。

有時一個作者可能會過度地使用CSS來決定他的文件應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對讀者來說這可能會是一個不方便。

[编辑] CSS的要求

1996年12月发表的CSS1的要求有：

  • 支持字体的大小、字形、强调
  • 支持字的颜色、背景的颜色和其他元素
  • 支持文章特征如字母、词和行之间的距离
  • 支持文字的排列、图像、表格和其他元素
  • 支持边缘、围框和其他关于排版的元素
  • 支持id和class

W3C管理CSS1要求

1998年5月W3C发表了CSS2，其中包括新的内容如绝对的、相对的和固定的定位元素、媒体型的概念、双向文件和一个新的字型。W3C管理CSS2要求

CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。它现在是一个要求候选者。

CSS3正在发展中。W3C发表一个CSS3发展过程报告。

[编辑] CSS的限制

使用“完整”的CSS的缺點包括：

瀏覽器支援的不一致性 
瀏覽器的漏洞或缺乏支援的CSS功能，導致不同的瀏覽器顯示出不同的CSS版面編排。例如在微軟Internet Explorer 6.0的舊版本 ，執行了許多自己的CSS 2.0屬性，曲解了很多重要的屬性，例如：width，height，和float[2]。許多所謂的CSS人員，必須在最熱門的或常用的瀏覽器中達到一致的版面編排。在不同的瀏覽器中，要達到像素精準的版面編排，有時候是不可能的。
CSS沒有父層選擇器 
CSS選擇器無法提供元素的父層或繼承性，以符合某種程度上的標準。先進的選擇器（例如 XPath）有助於複雜的樣式設計。然而，瀏覽器的性能和增加彩現的問題關係著父層選擇器，卻是CSS的工作群組拒絕建議的主要原因。
不能明確地指定繼承性 
樣式的繼承性，建立在瀏覽器中DOM元素的層級和具體的規則上，參照CSS2說明中的章節6.4.1。[3]
垂直控制的侷限 
元素的水平放置普遍地易於控制，垂直控制則非憑直覺性的、較迂迴的甚至是不可能的。簡單來說，例如：垂直地圍繞一個元素、頁尾的放置不能高於可見視窗（viewport，視窗或螢幕的可見範圍[4]）的底部範圍、需要複雜而非憑直覺性的樣式規則，或是簡單但不被廣泛支援的規則。
顯示的缺乏 
目前的CSS沒有辦法明確又簡單的顯示屬性值（例如：margin-left: 10% - 3em + 4px;）。這在很多情況下都是非常有用的，例如：總欄位中計算欄位的尺寸限制。無論如何，CSS WG[5]發表了CSS侷限性的草案，而Internet Explorer 5 以後的版本支援相似功能的語法顯示。
缺乏正交性 
同樣的效果可以用不同的屬性來完成，這經常會造成困擾。例如position、display與float定義了不同的配置方式，而且不能有效的交替使用。 一個display: table-cell元素不能指定 float或是position: relative，因為指定float: left的元素不應該受到display效果的影響。再者，沒有考慮到新建立屬性所造成的影響，例如在表格中你應該使用border-spacing而不是margin-*來指定表格元素。這是因為依照CSS準則，表格內部元素是沒有邊界（margin）的。

[编辑] 注释

  1. ^ 常用 CSS 缩写语法总结
  2. ^ Internet Explorer vs. the Standards, a primer on standards violations in Explorer
  3. ^ Assigning property values, Cascading, and Inheritance
  4. ^ http://www.w3.org/TR/CSS21/visuren.html#viewport
  5. ^ CSS3 Values and Units

[编辑] 参看

[编辑] 外部链接

您可以在維基教科書中查找此百科条目的相關電子教程：
查 • 論 • 編 • 歷
網頁技術與標準
文档呈现语言 HTML* - XHTML* - XML* - XForms* - DHTML*
样式格式描述语言 CSS* - XSL*
动态网页技术 CGI - ASP - ASP.NET - ColdFusion - JSP - PHP - Ruby on Rails
客户端交互技术 ActiveX - Java Applet - Flash - Flex - AJAX - XMLHTTP* AIR- Silverlight - JavaFX
客户端脚本语言 JavaScript - JScript - VBScript - ECMAScript - ActionScript
标识定位语言 URL - URI - XPath - URL重寫
文档纲要语言 DTD* - XML Schema*
来自“http://zh.wikipedia.org/wiki/CSS”
个人工具