CSS
(层叠样式表)
CSS-shade.svg
扩展名.css
互联网媒体类型text/css
统一类型标识public.css
开发者哈肯·維姆·萊伯特·波斯全球資訊網協會
初始版本1996年12月17日,​24年前​(1996-12-17
格式类型样式表语言英语Style sheet language
标准第一版
第二版
第二版第一次修订
第三版各模組目前的規格化進度與規格書連結

階層式樣式表(英語:Cascading Style Sheets,缩写:CSS;又称串樣式列表级联样式表串接样式表阶层式样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。CSS 被分为不同等级:CSS1 现已废弃, CSS2.1 是推荐标准, CSS3 分成多个小模块且正在标准化中。[來源請求]CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在开发中。

概述

CSS不能单独使用,必须与HTMLXML一起协同工作,为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;
}

在這個例子中有三個選擇器:ph2.highlightcolor: red是一個定義,其中color是屬性,redcolor的值。

在這裏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)的概念。某个规则的特殊性也常被称为该规则的具体程度。规则特殊性的高低次序如下(依次递减):

  1. 行内样式
  2. ID选择器
  3. class选择器
  4. 标签选择器
  5. 通用选择器(也就是通配符选择器,用得少)

特殊性优先原则

特殊性优先原则是最重要的优先级比较规则。当引起冲突的2种规则的特殊性存在差异时(例如一个是通过ID选择器指定样式,另一个是通过class选择器指定样式),引擎将优先采用特殊性更高的样式。规则的特殊性的比较是最优先的。如果能直接判断出特殊性的差异,就无需考虑其它规则了。

不同来源的规则优先性

不同来源的规则之间的优先原则是第二重要的。当规则来源相同时(同为外部样式或同为内部样式),下一步就需要比较不同类型来源的优先级别。总地来说,记住“行内样式优先于内部样式,内部样式又优先于外部样式”即可应对多数常见的情形。像网页浏览者自定义样式表的优先级别如何,只有浏览器的设计者才需要考虑,与网页设计者的关系不大。

如果考虑有可能出现的更复杂的来源冲突,内容就比较多了。但一般在写样式时,应尽可能避免这些复杂情形的出现。具体来说,一般情形下的采纳样式效果的优先级顺序为:[6]

  1. 行内样式
  2. 内部样式
  3. 在HTML中通过<link>标签直接引入的外部样式表
  4. 在CSS中通过@import语句间接引入的外部样式表
  5. 浏览网页的用户自己定义的样式表(需要手动加载,主要适用于色盲色弱的上网用户)
  6. 浏览器默认的样式(如标题有默认大小、段落之间有默认间距等,不同浏览器的默认样式不完全一样)

CSS中还有用!important修饰的重要性声明。如果计入重要性声明,那么在以上规则的最前面还需要加上2条规则:

  1. 用户从本地加载的重要自定义样式
  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代码出现的先后顺序。后出现的规则会覆盖掉与之优先级相当的先出现的规则。也可称作“后发制人”、“后来者居上”或“后浪推前浪”原则,随便你怎么称呼。这种原则的适用情形很常见,所以此规则也很重要。

行级元素与块级元素