CSS

用于调整文档样式的标记语言

这是本页的一个历史版本,由Eky留言 | 贡献2012年2月1日 (三) 03:56 採納的困難编辑。这可能和当前版本存在着巨大的差异。

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。目前最新版本是CSS2.1,为W3C的候选推荐标准。CSS3现在已被大部分现代浏览器支援,而下一版的CSS4仍在开发过程中。

Cascading Style Sheets
File:CSS.svg
扩展名
.css
互联网媒体类型
text/css
开发者World Wide Web Consortium
首次发布17 December 1996年,​28年前​(17 December 1996
格式类型Style sheet language
标准Level 1 (Recommendation)
Level 2 (Recommendation)
Level 2 Revision 1 (Candidate Recommendation)

概述

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

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

CSS还可以使用其他的显示方式,比如声音(假如浏览器有阅读功能的话)或给视障者用的感受装置。此外CSS还可以与XHTMLXML或其他结构文件一起使用,唯一条件是显示这种文件的浏览器装备了接受CSS的功能。

HTML文件中的每一个classid都可以有自己的显示特征,而且每一个没有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;
}

在这个例子中有三个选择器: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在這裡*/"

<div style="color:red; background:yellow; font-weight:bold;">
    這個段落同樣會被顯示為黃底紅字粗體。
</div>

选择器

选择器是指定的目标。通常也会同时包含多个目标元素。

基本选择器

于CSS里现在共有5种基本选择器(Basic Selectors)︰[1]

  • 元素名称 —— elementname
  • class —— .elementname
  • id —— #elementname
  • 通用(所有) —— * ns|* *|*
  • 属性 —— [attribute]

属性里共有7种,如下︰[2]

代码 意思
[attribute] 元素有attribute的属性。
[attribute="value"] 属性attribute里是value
[attribute~="value"] 属性attribute里使用空白分开的字串里其中一个是value
[attribute|="value"] 属性attribute里使用连接号-)分开的字串里其中一个是value
[attribute^="value"] 属性attribute里最前的是value
[attribute$="value"] 属性attribute里最后的是value
[attribute*="value"] 属性attribute里有value出现过至少一次

组合选择器

于CSS里现在共有4种组合选择器(Combinators)︰[1]

  • 下层元素 —— A B,选择于下层的元素B
  • 相邻元素 —— A + B,选择相邻的元素B(不能被任何元素相隔)
  • 同父层元素 —— A ~ B,选择同父层的元素B
  • 子层元素 —— A > B,选择下一层的元素B

伪元素选择器

伪元素是于CSS里制造出来的假HTML元素。现在于CSS里共有5种伪元素选择器(Pseudo-elements)︰[1]

  • :after  ::after
  • :before  ::before
  • :first-letter  ::first-letter
  • :first-line  ::first-line
  • ::selection

伪类选择器

伪类是选择元素不同的状态,如被按下或鼠标在元素上面。目前共有很多不同的伪类选择器,如︰

  • :link —— 超链接未被访问
  • :visited —— 超链接被访问过
  • :hover —— 鼠标在元素上面
  • :active —— 鼠标在元素上按着
  • :focus —— 焦点在元素上
  • :target —— 元素被URL标记

CSS注释

CSS档内也可以包含注释,注释以 /* 开始,以 */ 结尾,也有些人会使用 !

div{
    /*這是注釋。*/
    !這不是注釋,但也能作注釋用
    color:'這不是注釋';
}

缩写规则

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

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

1994年哈坤·利伯特·波斯合作设计CSS。他们在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。

CSS2

CSS2于1998年5月出版。

CSS3

 
CSS3的标志。

CSS3 分成了不同类别,称为“modules”。而每一个“modules”都有于 CSS2 中额外增加了功能,以及向后兼容。CSS3 早于1999年已开始制订。[4]直到2011年6月7日, CSS 3 Color Module 终于发布为 W3C Recommendation。[5]

CSS3 里增加了不少功能,如︰“border-radius”、“text-shadow”、“transform”以及“transition”。

div{
    border-radius:10px;
    text-shadow:0px 2px 2px #AAA;
    box-shadow:0px 3px 10px #AAA;
    transform:rotate(-15deg);
}
↑ 把 <div> 圆角半经10像素px),反时针旋转15度,加上2像素(px)的文字阴影,并加上10像素(px)的灰色阴影。

但由于现时不同浏览器仍需要加上不同的前缀,所以需要写成这样︰

div{
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;

    text-shadow:0px 2px 2px #AAA;

    -webkit-box-shadow:0px 3px 10px #AAA;
    -moz-box-shadow:0px 3px 10px #AAA;
    -o-box-shadow:0px 3px 10px #AAA;
    box-shadow:0px 3px 10px #AAA;

    -webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    transform:rotate(-15deg);
}
Firefox需要加上-moz-,而Safari以及Google Chrome需加上-webkit-Opera需加上-o-,另外,于Internet Explorer 9里部份需加上-ms-
这是一个CSS3 的示范。
连结︰
 维基百科
  • 上面是一个CSS3 的示范。注意div里的连结仍可按下。

CSS3 亦支援动画(animation)及立体(preserved-3d)。但是现时(2011年)就只有内有 Webkit 的浏览器支援,如 SafariGoogle Chrome

CSS3 3D
连结︰
 维基百科

HTML代码
<div style="-webkit-perspective:500;position:relative;margin-left:50px;width:108px;height:108px;border:1px solid black;-webkit-box-shadow: inset 0px 0px 15px #CCC;-moz-box-shadow: inset 0px 0px 15px #CCC;box-shadow: inset 0px 0px 15px #CCC;">
  <div style="position:relative;-webkit-transform-style: preserve-3d;">
    <div style="width:100px;height:100px;border:1px solid black;padding:3px;background:orange;-webkit-transform:rotateY(40deg);">
      CSS3 3D<br />
      連結︰<br />
       <a href="http://zh.wikipedia.org/">維基百科</a></span>
    </div>
  </div>
</div>

CSS4

W3C2011年9月29日开始了设计CSS4。直至现时还没有被一个网页浏览器支援。[6][7]

CSS4增加了一些更方便的方法以选择不同元素︰

选择目标

$ul li.clicked {
    background: white;
}

CSS4里其中一项新功能就是能够定义于Selection Chain里哪一个是目标[8]。于上例里,ul前面加了一个$号,代表它就是要改变的目标,即“把里面有liclassclicked)的ul的底色转为白色。”

:matches()

:matches(div, p, nav) span{
  font-size: 18px;
}

CSS4里其中另一项新功能就是能够是用:matches()来简化选择器。上方的例子等如︰

div span, p span, nav span{
  font-size: 18px;
}

事实上现在已有浏览器支援类似的功能,如Firefox和Webkit︰[9]

/*Firefox使用-moz-前綴*/
-moz-any(div, p, nav) span{
  font-size: 18px;
}
/*Webkit使用-webkit-前綴*/
-webkit-any(div, p, nav) span{
  font-size: 18px;
}

采纳的困难

尽管CSS1规格1996年就完成了,但一直到三年后还没有一个浏览器彻底实现了这些规格。2000年3月出版的微软在麦金塔电脑上运行的Internet Explorer 5.0是第一个彻底贯彻CSS1的浏览器。此后许多其他浏览器也贯彻了CSS1和CSS2的一部分。但到2004年为止还没有一个浏览器彻底贯彻了CSS2。尤其auralpaged等特性是被支持得最差的。

即使彻底贯彻了CSS1的浏览器也遇到了许多困难。许多CSS的贯彻互相矛盾、有错或有其他稀奇古怪的地方。为了使他们的页面在所有的浏览器中、在所有的系统上的显示相同,作者往往要使用特别的技巧或解决特殊的困难。一个最著名的错误涉及到显示方形的宽度,在Internet Explorer浏览器中方形的宽度的显示有错误,其结果是方形的宽度在许多浏览器中被正确地显示,但在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 style="color: green;"><strong><em>这个句子用綠色、粗体和斜体字显示</em></strong></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的idclass时,CSS作者常选择一个比较有说明性的名称而使用显示特征作为它们的名称。比如一个作者可能使用big-red来命名一个用大红字体的突出显示的字节。在当时,对作者来说这个名称可能是很直觉的,但假如后来作者决定突出显示的字节应该使用绿色,而不是红色的话,他的命名就有毛病了。在上面这个例子中,一个更合适的名称应该是emphasized(强调),它描写的是这个class的用意,而不是它是如何被显示的。

另一个毛病是未记录的、未定义的和往往会被遗忘的名称。一个网页作者可能会选择上百个名称。名称如footerfootnote或者explanationnoteinfomore可能是指同一回事。这样许多重复的名称就出现了。有时一个复杂的网站的设计者可能会结合HTML和CSS来解决这个问题,但这样一来他又把内容与显示黏有一起了,而且这样一来这个文件就只适合于某一媒体了。(外部样式表的一个大优点就是它是跨媒体的,因为不同的样式可以特别适用于不同的输出媒体。)

HTML本身的复杂性是另一个困难处。虽然大部分使用CSS的文件比传统的使用表格的文件要整洁,但过分使用class和过于细腻的结构层次同样使HTML变得繁庸。此外有的作者过分使用div元素。

另一个陷阱是为了解决常见的浏览器错误而引入特别的CSS样式,这些样式当然是为了除错而引入的,但它们使一个CSS文件的维护性能降低,有时这样的CSS文件的维护量甚至比过去的HTML文件的维护量还大。常见的特别CSS样式多是针对Internet Explorer (尤其IE 6、IE7 等旧版本)的显示错误而额外编写。

有时一个作者可能会过度地使用CSS来决定他的文件应该怎样被显示,如:一个作者会决定隐藏超连结底下的横线,这很容易做到,但对浏览者来说这可能会带来不便。

有些新的CSS3 样式尚未成为标准,因此在使用时需要加上前缀(Prefix),使其可以在采用不同排版引擎的浏览器中正确显示。例如使用transition 时,需要额外撰写四行编码:

-webkit-transition: height 0.2s linear; 針對使用WebKit排版引擎的瀏覽器如Google ChromeApple Sarafi
-moz-transition: height 0.2s linear; 針對使用Gecko排版引擎的瀏覽器如Mozilla Firefox
-o-transition: height 0.2s linear; 針對使用Presto排版引擎的瀏覽器如Opera
-ms-transition: height 0.2s linear; MSIE
transition: height 0.2s linear; CSS3標準放最後

CSS 的大小因此增大,到这些CSS 样式不需前缀时,又需要额外花时间把它们删除。

CSS的要求

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

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

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属性,但错误读取和显示很多其他重要的属性,例如:widthheight,和float[10]。许多CSS编写人员为了尽可能在常用的各个浏览器中达到一致的版面编排,要写很多针对各个浏览器的不同的CSS代码。当版面编排很复杂时,要在各个浏览器里看起来完全相同有时候是不可能的。
CSS没有父层选择器
CSS选择器无法提供元素的父层或继承性,以符合某种程度上的标准。先进的选择器(例如XPath)有助于复杂的样式设计。然而,浏览器的性能和增加彩现的问题关系著父层选择器,却是CSS的工作群组拒绝建议的主要原因。
CSS4则计划包括类似功能。
不能明确地指定继承性
样式的继承性,建立在浏览器中DOM元素的层级和具体的规则上,参照CSS2说明中的章节6.4.1。[11]
垂直控制的局限
元素的水平放置普遍地易于控制,垂直控制则非凭直觉性的、较迂回的甚至是不可能的。简单来说,例如:垂直地围绕一个元素、页尾的放置不能高于可见视窗(viewport,视窗或萤幕的可见范围[12])的底部范围、需要复杂而非凭直觉性的样式规则,或是简单但不被广泛支援的规则。
没有算术功能
目前的CSS没有办法明确简单地进行计算(例如:margin-left: 10% - 3em + 4px;)。这在很多情况下都是非常有用的,例如:总栏位中计算栏位的尺寸限制。无论如何,CSS WG[13]发表了CSS局限性的草案。IE 5至IE 7提供expression()函数(即所谓的CSS表达式)来执行计算功能,例如left: expression(document.body.offsetWidth - 110 + "px"); 。为了与CSS标准看齐,并且expression()函数性能差,微软从IE 8开始停止支持此函数。
缺乏正交性
同样的效果可以用不同的属性来完成,这为不少的CSS编写人员造成困扰。例如positiondisplayfloat定义了不同的配置方式,而且不能有效的交替使用。一个display: table-cell元素不能指定float或是position: relative,因为指定float: left的元素不应该受到display效果的影响。再者,没有考虑到新建立属性所造成的影响,例如在表格中你应该使用border-spacing而不是margin-*来指定表格元素。这是因为依照CSS准则,表格内部元素是没有边界(margin)的。

参考文献

外部链接

参见