优势

网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS 最主要的目的是将文件的内容与显示分隔开来。这有许多好处：

文件的可读性加强

文件的结构更加灵活

作者和读者可以自己决定文件的显示

文件的结构简化了

另外，在 HTML 中：

一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便

不同的读者可以有不同的样式，比如有的读者需要字体比较大

HTML 文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息

CSS 还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置。

CSS 位置

CSS 信息可以来自：

作者样式

自定样式

浏览器样式

语法

CSS 由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

选择器（Selector）：多个选择器可以半角逗号（,）隔开。

属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。

值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。

属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“{ }”括起来。

选择器

要针对没有标签定义范围进行样式设置时，可利用

与标签 CSS 里现在共有5种基本选择器（Basic Selectors） 和 2 种伪选择器。 基本选择器 伪元素选择器 伪元素可以选择不在 Document 结构中的信息。 虚拟类别选择器 虚拟类别选择器指的是为不同的状态、性质的元素。 属性选择器 属性选择器允许用户自定义属性名称，而不仅仅限于id，class属性，参见 。属性选择器共有7种 。 组合选择符 CSS 里现在共有4种组合选择符（Combinators）： 注释 CSS 档内也可以包含注释，注释放在 /* 和 */ 之间。缩写 使用 CSS 缩写可以减少 CSS 文件的大小，并使其更为易读 ，例如： 1. 颜色缩写：16 进制的色彩值，如果每两位的值相同，可以进行缩写，例如： 2.盒尺寸缩写：Property: Value1 Value2 Value3 Value4；四个值依次表示Top，Right，Bottom，Left 3.边框缩写 边框的属性如下： border-width:1px;border-style:solid;border-color:#000;可以缩写为一句： border:1pxsolid#000;4.背景缩写 background-color:#F00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:00;可以缩写为一句： background:#F00url(background.gif)no-repeatfixed00;4.文字缩写 font-weight:bold;font-size:12px;line-height:1.8em;font-family:Arial;可以缩写为一句： 但文字缩写一定要具有字号、字体样式这两个属性。行高用/分隔 font:bold12px/1.8emArial;历史 发展历史 从 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 月出版的第二版要求。到 2017 年为止，第三版还未完备。 版本历史 CSS1 于 1994 年，哈坤·利和伯特·波斯合作设计 CSS。他们在 1994 年首次在芝加哥的一次会议上第一次展示了 CSS 的建议。  完全使用CSS做成的网页 1996 年 12 月发表的 CSS1 的要求有（W3C 管理CSS1要求）： CSS2-2.1 1998 年 5 月 W3C 发表了 CSS2（W3C管理CSS2要求），其中包括新的内容如： CSS2.1 修改了 CSS2 中的一些错误，删除了其中基本不被支持的内容和增加了一些已有的浏览器的扩展内容。要求候选者。 CSS3 CSS3 正在发展中。W3C 发表一个CSS3发展过程报告。  CSS3的标志。 CSS3 分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已开始制订。 直到2011年6月7日，CSS 3 Color Module 终于发布为 W3C Recommendation。 CSS3 里增加了不少功能，如：“border-radius”、“text-shadow”、“transform”以及“transition”。 div{border-radius:10px;text-shadow:0px2px2px#AAA;box-shadow:0px3px10px#AAA;transform:rotate(-15deg);}上述 CSS 代码会把 圆角半径10 像素（px），反时针旋转 15 度，加上 2 像素（px）的文字阴影，并加上 10 像素（px）的灰色阴影。 浏览器差异 部分属性（例如旋转类属性（如：transform），动画类属性，立体类属性），由于现时不同浏览器支持程度不同，需要加上不同的浏览器前缀来区分。 对于浏览器前缀，Firefox需要加上 -moz- 、Safari以及Google Chrome等基于Webkit开发的需加上 -webkit- 、Opera 基于Presto开发的需加上 -o- 、Internet Explorer 9里部分需加上 -ms- 。无前缀为 W3C 标准，待各个浏览器的实现一致并且标准实现得到规范则全部实现效果一致。 CSS3 亦支持动画（animation）及立体（preserved-3d）。但是到 2012 年只有内有Webkit的浏览器如Safari及Google Chrome，基于Trident的Internet Explorer 10，和基于Gecko的Firefox（10及以上版本）等浏览器支持。CSS4W3C于 2011 年 9 月 29 日开始了设计 CSS4 。直至现时只有极少数的功能被部分网页浏览器支持，如使用在 HTML 而非 SVG 上的 pointer-events 。 CSS4 增加了一些更方便的方法以选择不同元素︰ $ulli.clicked{background:white;}CSS4 里其中一项新功能就是能够定义于 Selection Chain 里哪一个是目标 。于上例里， ul 前面加了一个 $ 号，代表它就是要改变的目标，即“把里面有 li （ class 是 clicked ）的 ul 的底色转为白色。” :matches(div,p,nav)span{font-size:18px;}CSS4 里其中另一项新功能就是能够是用 :matches() 来简化选择器。上方的例子等如︰ divspan,pspan,navspan{font-size:18px;}事实上现在已有浏览器支持类似的功能，如 Firefox 和 Webkit︰ /*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 Explorer5.0 是第一个彻底贯彻 CSS1 的浏览器。此后许多其他浏览器也贯彻了 CSS1 和 CSS2 的一部分。但到 2004 年为止还没有一个浏览器彻底贯彻了 CSS2。尤其 aural 和 paged 等特性是被支持得最差的。 即使彻底贯彻了 CSS1 的浏览器也遇到了许多困难。许多 CSS 的贯彻互相矛盾、有错或有其他稀奇古怪的地方。为了使他们的页面在所有的浏览器中、在所有的系统上的显示相同，作者往往要使用特别的技巧或解决特殊的困难。一个最著名的错误涉及到显示方形的宽度，在 Internet Explorer 浏览器中方形的宽度的显示有错误，其结果是方形的宽度在许多浏览器中被正确地显示，但在 Internet Explorer 上方形的宽度太窄。虽然这个错误有解决的办法，但它限制了其他一些功能（Internet Explorer 8.0 已改善方形宽度显示问题）。 作用 CSS 最重要的目标是将文件的内容与它的显示分隔开来。在 CSS 出现前，几乎所有的 HTML 文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在 HTML 文件内列出，有时重复列出。CSS 使作者可以将这些信息中的大部分隔离出来，简化 HTML 文件，这些信息被放在一个辅助的，用 CSS 语言写的文件中。HTML 文件中只包含结构和内容的信息，CSS 文件中只包含样式的信息。 比如 HTML 中 H2 标志这一个二级标题，它在级别上比一级标题 H1 低，比三级标题 H3 高。这些信息都是结构上的信息。 一般来说级别越高的标题其字体也越大， H1 的字体最大，因为一般来说字体越大它表示的内容就越重要，此外一般标题都使用粗体字，来突出它们的重要性。一般来说 H2 使用粗体字，其字体比 H3 大，比 H1 小。这些信息是显示用的信息。 在 CSS 出现前，假如作者要确定 H2 标题的颜色、字形、大小或其他显示特征的话，他要使用 HTML 中的 font 或其他样式指令，光 H2 不够，因为 H2 只是一个结构指令。假如一个标题要用斜体字、红色的字符、白色的底色的话，作者要这样写： 使用CSS 这些显示用的指令使得一个 HTML 变得非常复杂，要维护也比较困难。假如所有的二级标题都要这样来显示的话，所有的二级标题的指令都要这么复杂。此外读者无法改变这些规定，假如一个读者更喜欢蓝色的标题的话，他无法改变标题的颜色，因为文件的作者特别规定了标题的颜色。 使用 CSS 的话 H2 指令只规定文章的结构，其显示由样式表来规定，上面的例子可以变成这样： 使用CSS 服从的样式表可以规定 H2 指令使用斜体字，红色字和白色背景： H2 { color: red; background: white; font-style: italic; } 这样显示与内容就分开了（由于 CSS 的优点，W3C 现在正在考虑将 HTML 中的许多显示用的指令废弃掉）。HTML 只表达文章的结构，CSS 表达所有的显示。CSS 可以指示颜色、字形、排列、大小以及其他许多非视觉的表达方式，比如将一篇文件的内容读出来。 CSS 样式信息可以包含在一个附件中或包含在 HTML 文件内。读者可以使用多个样式表，在重复的情况下他可以选择其中之一。不同的媒体可以使用不同的样式表。比如一个文件在荧光屏上的显示可以与在打印机中打印出来的显示不同。这样作者可以为不同的媒体设计最佳的显示方式。此外 CSS 的目标之一是让读者有更大的控制显示的自由。假如一个读者觉得斜体字的标题读起来很困难，他可以使用自己的样式表文件，这个样式表可以“层叠”使用，他可以只改变红色斜体字这个样式而保留所有其他的样式。 一个包含CSS的XHTML文件的例子 /span> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">body{background:#fff;color:#777;}h1{font:bolditalicsans-serif;color:green;}style>head>

这个句子用綠色、粗体和斜体字显示h1>

普通字。p> 这个句子用大的、红色斜体字在绿色背景上显示，通用的h1样式在这里被取代了。 h1>这个句子用綠色、粗体和斜体字显示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 的 id 和 class 时，CSS 作者常选择一个比较有说明性的名称而使用显示特征作为它们的名称。比如一个作者可能使用“big-red”来命名一个用大红字体的突出显示的字节。在当时，对作者来说这个名称可能是很直觉的，但假如后来作者决定突出显示的字节应该使用绿色，而不是红色的话，他的命名就有毛病了。在上面这个例子中，一个更合适的名称应该是“emphasized”（强调），它描写的是这个“class”的用意，而不是它是如何被显示的。 另一个毛病是未记录的、未定义的和往往会被遗忘的名称。一个网页作者可能会选择上百个名称。名称如 footer、footnote 或者 explanation、note、info、more 可能是指同一回事。这样许多重复的名称就出现了。有时一个复杂的网站的设计者可能会结合 HTML 和 CSS 来解决这个问题，但这样一来他又把内容与显示黏有一起了，而且这样一来这个文件就只适合于某一媒体了。（外部样式表的一个大优点就是它是跨媒体的，因为不同的样式可以特别适用于不同的输出媒体。） HTML 本身的复杂性是另一个困难处。虽然大部分使用 CSS 的文件比传统的使用表格的文件要整洁，但过分使用 class 和过于细腻的结构层次同样使 HTML 变得繁庸。此外有的作者过分使用 div 元素。 另一个陷阱是为了解决常见的浏览器错误而引入特别的 CSS 样式，这些样式当然是为了除错而引入的，但它们使一个 CSS 文件的维护性能降低，有时这样的 CSS 文件的维护量甚至比过去的 HTML 文件的维护量还大。常见的特别 CSS 样式多是针对 Internet Explorer（尤其 IE 6、IE 7 等旧版本）的显示错误而额外编写。 有时一个作者可能会过度地使用 CSS 来决定他的文件应该怎样被显示，如：一个作者会决定隐藏超链接底下的横线，这很容易做到，但对浏览者来说这可能会带来不便。 有些新的 CSS3 样式尚未成为标准，因此在使用时需要加上前缀（Prefix），使其可以在采用不同排版引擎的浏览器中正确显示。但于Internet Explorer 10Release Preview 起, transform, transition, animation 和 gradient 渐变等属性均可不加前缀。 例如使用 transition 时，需要额外撰写四行编码： -webkit-transition:height0.2slinear;/* 針對使用WebKit排版引擎的瀏覽器，如Google Chrome、Apple Safari */-moz-transition:height0.2slinear;/* 針對使用Gecko排版引擎的瀏覽器，如Mozilla Firefox */-o-transition:height0.2slinear;/* 針對使用Presto排版引擎的瀏覽器，如Opera */-ms-transition:height0.2slinear;/* MSIE,但Release Preview起可以不用前缀*/transition:height0.2slinear;/* CSS3標準，放最後*/CSS 的大小因此增大，到这些 CSS 样式不需前缀时，又需要额外花时间把它们删除。 缺点 CSS 明显的缺点包括： 直至 CSS 2.1 的 CSS 没有办法明确简单地进行计算（例如： margin-left: 10% - 3em + 4px; ）。计算功能在很多情况下都是非常有用的，例如：总字段中计算字段的尺寸限制。无论如何，CSS WG 发表了 CSS 局限性的草案。IE 5 至 IE 7 提供 expression（）函数（即所谓的 CSS 表达式 ）来执行计算功能，例如 left: expression（document.body.offsetWidth - 110 + "px"）; 。为了与 CSS 标准看齐，并且 expression（）函数性能差，微软从 IE 8 开始停止支持此函数。但 CSS 3 中具有 calc（）表达式以执行计算功能 。例如： p{margin:calc(1rem-2px)calc(1rem-1px)}参考文献 参见

免责声明：以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。