CSS2 指引

Posted 2021-04-09 码农玩具

本文是翻译RichInStyleCSS2指引，如有翻译错误欢迎指正，有兴趣的朋友也可直接阅读原文。

这是一个网上少有的CSS2指引。具有以下优点：

1. 非常易读；

2. 涵盖所有CSS2特性，包括一些高频使用，但在其它CSS文章中较少提及的部分，例如cascading、box width calculations（box的计算宽度）等等；

3. 简介明了的文章风格让你可以更加快速的学习；

CSS介绍

内容

• 什么是style sheets？

• 为什么使用style sheets？

• 什么情况下不适用style sheets？

• 开始使用style sheets

什么是style sheets

Style sheets是开发者告诉标记型语言XML或者html，他们会使用什么样的格式编写代码，以及希望如何解析所写代码。例如，一个开发者想通过CSS指定一个document元素为粉色上有绿色，这就是一个标准的document样式。

你可能会问为什么我们要使用style sheets，不能使用HTML吗，比如FONT元素或者bgcolor属性？

有两个原因来回答这个问题：

1. HTML不是为document样式设计的语言。当你使用HTML时，你只需要关注元素所包含的内容即可。例如：<H1>A heading</H1>没有指定任何元素该如何渲染的标记，仅仅只是一个H1元素。如果希望H1标签内容为黄色的Helvetica字体，则可通过<H1><FONT color="yellow" face="Helvetica">A heading</FONT></H1>，但是这样的写法有以下问题：

• 你必须在所有想要呈现该样式的H1标签写FONT语句，这不仅浪费时间，而且容易出错，也会使得文件变得臃肿（使用HTML语法设置样式，其中有1/3是样式标签）；

• 如果你想要改变H1标签为粉色的Arial字体，那么你必须修改所有H1的FONT标签，对于一个大型站点，这将是一个艰巨的任务。

2. 简单的HTML没有提供足够的document样式控制标签，例如上文提到的重要的样式设置、文本阴影和其它有用但HTML不能实现的样式。

Style sheets解决了所有这些问题。例如：你想要设置所有的H1标签样式为绿色的Arial字体，只需要使用H1 {font-family: Arial; color: green}。如果你想要修改所有的H1样式为红色字体绿色背景，只需要修改H1为H1 {color: red; background: blue}，整个站点都会改变。

style sheets可以做什么

举个例子，在RichInStyle.com页面所有的H标签都是深红色，全站大约有10000处H标签。

如果每个H标签都是用font元素（例如：<H2><font color="blue">A heading</font></h1>），那将占用超过250Kb空间。如果是用CSS规则，全站仅需要使用一个规则，大约40bytes。

如果每月每个页面平均50000次访问，这将节约12.5Gb。

这会节约很多空间，特别是当你的网站是根据宽带流量付款时。（吴楠注：这会节约很多宽带费用。）

如果想象一下站点的所有margins、colors和fonts样式累计下来将节约很多宽带，这不仅意味着花更少的钱，而且会提升访问者的访问速度。

再举个Style sheets的例子，可以看一下RichInStyle.com的个性化页面。你可能会说我不喜欢那个页面的样式，我觉得蓝白配色可能会更好。（吴楠注：RichInStyle网站个性化页面提供了点击页面按钮切换页面背景和字体颜色的功能。）

这个技术是RichInStyle.com特有的，通过Style sheets实现，并且提供免费下载。

为什么使用style sheets

Style sheets有以下优势：

1. 它们可以与内容（HTML）分开提供样式。你可以标记一个引号，并且告诉浏览器你想要这个引号为斜体，而不是直接标记一个引号为斜体。这意味着改变引号为加粗、红色、绿色或者正常样式只需要两秒钟；

2. 可以通过移除样式信息而减少document的下载时间。因此你可以仅指定一次H标签为Times New Roman样式，而不用花费很多时间在H标签上。它们还有一个优点就是在实际的站点上只需要下载一次；

3. 它们比HTML样式格式化速度更快，这一特性体系在背景图、颜色等所有元素上，而不仅仅是全部的document等等；

4. 它们确保整个站点风格一致。

什么情况下不适用style sheets

1. 有1/20的用户使用的浏览器不支持Style sheets；

2. 不是所有的浏览器都能正确的支持Style sheets。（吴楠注：作者的意思应该是基于1/20的用户所使用的浏览器。）

支持性

请注意，由于CSS是一个大型规范，因此大多数浏览器并不完全支持它。因此，如果本指引所述CSS样式没有生效，不必惊讶。你可以在RichInStyle.com’s bug table查看是否是浏览器不支持。

开始使用Style sheets

Style sheets允许你如下使用它们，例如：你想要H标签为粉色背景的30px Arial样式，并且全部的document都居左边框1个像素。它们的好处是您可以说要以某种方式显示BODY或P。但在HTML中，您可以使用HTML标签将所有P标签设置为某种颜色，如果你要修改它们HTML方式将让你花费数小时，而CSS只需要几秒钟。

例子：

BODY { color: red; background-color: white; font-size: 16px; font-family: Arial; line-height: 20px; margin-left: 5%}

我们可以看到，创建一个Style sheets非常简单，但在你使用它前，你必须决定将如何关联你的页面和样式。这一问题将会在下一篇文章讲到。

⚠️本文使用创意共享3.0许可证，转载请注明出处。⚠️