|
CSS 关于与「CSS」標題相近或相同的条目，請見「CSS (消歧義)」。
階層式樣式表（英語：Cascading Style Sheets，缩写：CSS；又称串樣式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在开发中。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 概述CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。本文主要介绍用于装饰HTML网页的CSS技术。其中HTML负责确定网页中有哪些内容，CSS确定以何种外观（大小、粗细、颜色、对齐和位置）展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。[3] CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。 比如HTML中 一般来说级别越高的标题其字体也越大， 在CSS出现前，假如作者要确定
这些显示用的指令使得一个HTML变得非常复杂，要維護也比较困难。假如所有的二级标题都要这样来显示的话，所有的二级标题的指令都要这么复杂。此外读者无法改变这些规定，假如一个读者更喜欢蓝色的标题的话，他无法改变标题的颜色，因为文件的作者特别规定了标题的颜色。 使用CSS的话
服从的样式表可以规定
这样显示与内容就分开了（由于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）組成：
屬性和值之间用半形冒號 選擇器要針對沒有標籤定義範圍進行樣式設定時，可利用 CSS裡現在共有5種基本選擇器（Basic Selectors）[4]和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。[5] 基本選擇器
属性选择器屬性选择器允许用户自定义属性名称，而不仅仅限于id，class属性。屬性选择器共有7種[6][7]。
組合选择器CSS里现在共有4种組合选择符（Combinators）：[4]
选择器使用示例例子： p{
font-size: 110%;
font-family: garamond, sans-serif;
}
h2{
color: red;
background: white;
}
.highlight{
color: red;
background: yellow;
font-weight: bold;
}
在這個例子中有三個選擇器： 在這裏HTML中的結構 <P class="highlight">這個段落將被顯示為黃底紅字粗體。</P> 顯示為 這個段落將被顯示為黃底紅字粗體。 除使用 <p style="color:red; background:yellow; font-weight:bold;">
這個段落同樣會被顯示為黃底紅字粗體。
</p>
其它选择器CSS中还提供了偽元素選擇器和虛擬類別選擇器，但用途单一一些，常与其它选择器组合在一起使用。偽元素的元素主要用于选取与另一个选择器选中对象临近的元素。虛擬類別選擇器用于选中处于特定状态或具有特定性质的元素。 引入CSS规则的多种方式及其层叠性CSS可以有多种引入方式，一个网页可以引入多个CSS文件，同一种CSS规则可以被反复多次添加。这使得CSS的使用方式非常灵活，但也会频繁地出现规则冲突。同时对一个网页元素设定无法并存的2种样式时，就会引起冲突。CSS的特色之一就是其解决规则冲突的方案。CSS的规则冲突可以分为不同来源之间的规则冲突和同一来源内部的规则冲突。CSS分层次、立体化的比较不同规则的优先级的方式，就是所谓层叠性(cascading)的体现。 首先说来源的多样性，CSS信息可以来自：
其次还需知道规则特殊性(specificity)的概念。某个规则的特殊性也常被称为该规则的具体程度。规则特殊性的高低次序如下（依次递减）：
特殊性优先原则特殊性优先原则是最重要的优先级比较规则。当引起冲突的2种规则的特殊性存在差异时（例如一个是通过ID选择器指定样式，另一个是通过class选择器指定样式），引擎将优先采用特殊性更高的样式。规则的特殊性的比较是最优先的。如果能直接判断出特殊性的差异，就无需考虑其它规则了。 不同来源的规则优先性不同来源的规则之间的优先原则是第二重要的。当规则来源相同时（同为外部样式或同为内部样式），下一步就需要比较不同类型来源的优先级别。总地来说，记住“行内样式优先于内部样式，内部样式又优先于外部样式”即可应对多数常见的情形。像网页浏览者自定义样式表的优先级别如何，只有浏览器的设计者才需要考虑，与网页设计者的关系不大。 如果考虑有可能出现的更复杂的来源冲突，内容就比较多了。但一般在写样式时，应尽可能避免这些复杂情形的出现。具体来说，一般情形下的采纳样式效果的优先级顺序为：[8]
CSS中还有用
设计重要性声明是为部分特殊用户和所有开发者提供方便。一方面，用户可以通过设置自己的色彩方案，并对其使用重要性声明来提升浏览体验。另一方面，网页的设计者难免会遇到因规则冲突而导致特定样式规则失效的情形，设计者可以通过给不知何故不起作用的规则增加重要性声明，看看是否有样式变化来确定是否是不小心导致了规则冲突而引起特定规则被覆盖失效。 权重分数比较机制有时还会遇到选择器优先级无法直接判断，而且规则的来源也相同的情形。如果网页设计者很少使用层次比较复杂的选择器（比如多级的后代选择器），那么必须比较权重的情况一般不会遇到（一般要么是可以直接根据前面的规则判断出优先性结果，或者是起冲突的2条规则的权重完全一样，只能继续去看后一条比较出现次序的机制）。此时，CSS还有一套分数加权(或者说是分数累积)的机制用于解决此类规则冲突。先列出基本的分值：
组合使用多个基本选择器时，不同选择器的得分会累加到一起。最终得分高的选择器，其指定的样式会胜出。 举例： 靠后者优先原则当权重比较仍然不能分出优先级胜负时，最后就是把守关底的“靠后优先”的原则了，也就是后定义的样式优先级较高。如果起冲突的规则来源相同，而且得分也相同，那么最后的冲突解决法则就是看CSS代码出现的先后顺序。后出现的规则会覆盖掉与之优先级相当的先出现的规则。也可称作“后发制人”、“后来者居上”或“后浪推前浪”原则，随便你怎么称呼。这种原则的适用情形很常见，所以此规则也很重要。 行级元素与块级元素
方盒模型
浮动与定位
包含块、定位包含块是CSS定位属性所依托的理论模型。 层次与层叠上下文层叠上下文规则决定了当有网页元素位置发生部分重合时，重合部分的上下叠放次序。层叠上下文规则详细规定了当浮动、定位以及z轴数值同时出现时，元素叠放次序的总规则。 格式化上下文格式化上下文有特殊的布局性质，巧妙创建格式化上下文可以解决方便地达到几种特殊目的：[9]
其它CSS檔內也可以包含注釋，注釋放在 历史发展历史 早期样式表的历史HTML规范虽然规定了网页中的标题、段落应该使用的标签，但是没有涉及这些内容应该以何种样式(比如大小、位置、间距、缩进等属性)呈现在浏览器中。从1990年代初HTML被发明开始，样式表就以各种形式出现了。不同的浏览器结合了它们各自的样式语言，读者(也就是浏览网页的用户)可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 1993年，Robert Raisch提出了一种名为“RRP”的样式规则建议。但这个RRP只允许网页使用1个样式表，不像现在的CSS能支持同时加载多个。不久后出现的Mosaic浏览器就采用增加新种类的HTML标签实现样式的表达，以满足设计师的要求，这也与现在的CSS设计原则不符。随着HTML自带的样式功能的增加，外来定义样式的语言逐渐减弱了。1993年发布的这个Mosaic浏览器是第一款用户界面，并支持书签、图标按钮和图片显示。[10]之前的浏览器都是纯文字浏览器。即使在今天，只使用操作系统命令行自带的Telnet命令，也可以查看网页的源代码。[11] 后来，台湾人魏培源开发的ViolaWWW浏览器使用了一种规则具有层次嵌套性的样式表，并第1个支持通过 CSS的诞生与发展1994年，哈肯·維姆·萊提出了CSS的最初建议[13]。伯特·波斯当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。哈肯·萊于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈肯、波斯和其他一些人（比如微软的托馬斯·里爾登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月[來源請求]，哈肯·萊与伯特·波斯发布了CSS规范的第1个版本。这也成了哈肯·萊的博士论文的一部分。当时已有的主流浏览器的内核架构完全不适合解析CSS的语法，加上早年设计师滥用HTML标签来表达样式(这导致“标签汤”(tagsoup)这一骂名的出现)、且漠不关心代码校验[14]，所以CSS等到几年之后才流行起来。1998年，浏览器市场份额被微软公司的Internet Explorer 4和网景公司的Netscape Navigator 4两大浏览器巨头所占据。[12]CSS出现后，微软的IE浏览器走在了逐步实现CSS第1版标准的前列。但是因为不重视问题修补，导致遗留Bug很多，这也使得IE浏览器长期为人们诟病。网景则把重心放在了网页脚本语言的开发上，但很快被微软模仿。网景在90年代末和微软展开的浏览器大战中最终一败涂地，走向破产边缘，但网景也成功推出了日后广泛流行于网页设计中的JavaScript语言。浏览器大战使得网页设计人员深受其害，因为不同浏览器支持的语法规则不太一样，网页设计人员不得不为IE浏览器和网景浏览器的浏览器分别设计一套网页。[12]新成立的民间设计人员团体“網頁標準計劃”(WaSP)发动水军将W3C的建议宣扬为标准，并批评还未加盟W3C标准的业界厂商。[12] 1997年初，W3C组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第1版中没有涉及到的问题，其结果是1998年5月出版的第2版规则。網頁標準計劃的7位成员成立了“CSS武士团”（CSS Samurai），指出Opera浏览器和IE浏览器在支持CSS方面存在的诸多问题。Opera公司着手解决了问题，但微软并未解决。網頁標準計劃也积极劝说网景公司和Macromedia公司分别改进其产品对CSS标准的支持。2003年，Dave Shea推出了一个名为“CSS禅意花园”("CSS Zen Garden")的站点，向人们展示出仅通过应用不同页面样式规则，就可以实现对网页艺术风格的焕然一新。这个网站在网页设计相关人群中产生了不小影响。[12] 从2006年到2009年，“DIV+CSS”布局逐步取代缺乏灵活性的传统表格布局，无表格网页设计成为网页内容布局的主流方案。此时也出现了一些为了跟风而滥用DIV布局的情况，比如将 CSS3引入的简单动画功能使得CSS也开始涉足以往只应由JavaScript负责的效果交互工作。到2017年为止，第3版规则还未完備。 版本歷史CSS1於1994年，哈肯·維姆·萊和伯特·波斯合作設計CSS。他們在1994年首次在芝加哥的一次会议上第一次展示了CSS的建议。
CSS2-2.11998年[14]5月W3C发表了CSS2[17]，其中包括新的内容如：
CSS2.1修改了CSS2中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。[18] CSS3CSS3标准已部分公布，但仍未全部制订完毕，还会有其它新内容继续加入。W3C网站上有专页展示CSS3发展的进展[19]。  CSS3分成了不同類別，稱為「modules」。而每一個「modules」都有於CSS2中額外增加的功能，以及向後兼容。CSS3早於1999年已經開始制訂。[20]直到2011年6月7日，CSS 3 Color Module終於發布為W3C Recommendation。[21] CSS3裡增加了不少功能，如：「border-radius」、「text-shadow」、「transform」以及「transition」。CSS3亦支援動畫（animation）及立體（preserved-3d）。 部分属性（例如旋转类属性（如：transform），动画类属性，立体类属性），由於現時不同瀏覽器支持程度不同，需要加上不同的浏览器前綴来区分。 CSS4W3C於2011年9月29日開始了設計CSS4[22][23]。直至現時只有極少數的功能被部分網頁瀏覽器支援，如使用在HTML而非SVG上的pointer-events[24]。 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、幽灵字符，方块神秘消失等稀奇古怪的设计缺陷。[25]微软自从在第1轮浏览器大战中胜出后，就依仗独霸市场的优势，轻视修补IE Bug的呼声，导致其市场份额后来又逐渐被其它浏览器蚕食，产生第2轮浏览器大战。 另外还有代码跨浏览器兼容性的问题。“能够在任何浏览器中显示”并不意味着“在任何一个浏览器中显示的效果相同”。[14]即使是徹底实现了CSS1的瀏覽器也遇到了許多困難。許多CSS的实现机制互相矛盾、有錯或有其它稀奇古怪的地方。為了使他們的頁面在任意系統上的任意浏览器中的顯示效果一致，网页作者往往要被迫写出繁琐的代码或使用各种奇技淫巧。一個最著名的錯誤涉及到顯示方形的寬度，在IE瀏覽器中方形的寬度的顯示有錯誤，其結果是方形的寬度在許多瀏覽器中被正確地顯示，但在IE上方形的寬度太窄。雖然這個錯誤有解決的辦法，但它限制了其他一些功能（IE 8.0已經改善方形寬度顯示問題）。旧版IE还有与其它浏览器计算方式不一样的方盒模型。 特点優勢网页的讀者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的内容与显示分隔开来。这有许多好处：
另外，在HTML中：
CSS还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给視障者用的感受装置。 缺点CSS明顯的缺點包括：
p {
margin: calc (1rem - 2px) calc (1rem - 1px)
}
CSS的性能优化使用语法缩写使用CSS缩写可以减少CSS文件的大小，并使其更为易读[32]。例如：颜色缩写（缩写16进制的色彩值）、盒尺寸缩写、边框缩写、背景缩写和文字缩写。 无障碍设计新的发展目前, 现代网页常用Tailwind[33]等预制css简化网页开发设计。 參見参考资料文内引用
补充来源
外部链接
|
||||||||||||||||||||||||||||||||||||||||||||||||||
![[icon]](File:Wiki_letter_w_cropped.svg){kind=small}
Portal di Ensiklopedia Dunia
