8    Introduction to Cascading Style Sheets层叠样式表介绍

In this first chapter on Cascading Style Sheets (CSS), I’ll explain what CSS is exactly, as well as the principle of applying CSS based on some simple examples.在关于级联样式表（CSS）的第一章中，我将解释CSS到底是什么，以及基于一些简单示例应用CSS的原理。

In Figure 8.1, you can see a simple basic diagram showing the components that make up a simple and ordinary modern website. Above all, the content is simple. 在图8.1中，您可以看到一个简单的基本图，显示了组成一个简单而普通的现代网站的组件。最重要的是，内容很简单。To prepare this content for the web, you can use HTML, which gives the content a semantic meaning by means of HTML elements. In addition, you can use other media files such as images or videos, which are also embedded in the HTML document. 为了为网络准备这些内容，您可以使用HTML，它通过HTML元素赋予内容语义意义。此外，您还可以使用其他媒体文件，如图像或视频，这些文件也嵌入在HTML文档中。Furthermore, more and more often, you can find various scripts for special actions. Finally, the particular focus of this figure and of the entire chapter, is the stylesheet. Taken together, all these basic components form a simple but modern website that gets displayed in a web browser.此外，越来越多的情况下，您可以找到各种特殊操作的脚本。最后，这个图和整个章节的重点是样式表。总的来说，所有这些基本组件构成了一个简单但现代的网站，可以在网络浏览器中显示。

Figure 8.1     The Basic Composition of the Components of a Simple Website简单网站组件的基本组成

The predominant role of CSS (or stylesheets) in creating websites is the appearance. With CSS, you can create rules for how the content of an HTML element should be displayed. CSS（或样式表）在创建网站中的主要作用是外观。使用CSS，您可以创建如何显示HTML元素内容的规则。At this point, it pays off to have semantically meaningful notations of the individual HTML elements in the HTML document.此时，对HTML文档中的各个HTML元素进行语义上有意义的表示是值得的。

CSS supports the separation of a document’s structure and design. Ideally, the presenting aspects should be completely separated from the content of the website, which means the following:CSS支持文档结构和设计的分离。理想情况下，呈现方面应与网站内容完全分开，这意味着以下内容：

• HTML defines the meaning or semantics of the content.HTML定义了内容的含义或语义。

• CSS defines the presentation of the content.CSS定义了内容的呈现方式。

Without HTML, the content can’t be used by web browsers, and without CSS, the content is less beautiful.没有HTML，内容就不能被网络浏览器使用，没有CSS，内容就不那么美观。

In this introductory chapter to CSS, I’ll cover the following topics:在CSS的这一章中，我将介绍以下主题：

• The history of CSSCSS的历史

• The principle by which CSS works in practiceCSS在实践中的工作原理

• The options involved in using CSS in an HTML document在HTML文档中使用CSS所涉及的选项

8.1    The Story of CSSCSS的故事

Because CSS is now the standard stylesheet language for websites, I’d like to describe its genesis here in a fast-forward mode:因为CSS现在是网站的标准样式表语言，我想在这里以快进模式描述它的起源：

1. The first version with CSS level 1第一个CSS级别为1的版本
   In the early days, there were several similar approaches besides what is now known as CSS, but the inventors of the original CSS, Håkon Wium Lie and Bert Bos, were the first to make the idea public. 在早期，除了现在所说的CSS之外，还有几种类似的方法，但最初的CSS的发明者Håkon Wium Lie和Bert Bos是第一个公开这一想法的人。They were just in the right place at the right time. In 1995, the W3C became aware of CSS during a presentation, and at the end of 1996, the CSS Level 1 Recommendation was published. 他们只是在正确的时间出现在正确的地点。1995年，W3C在一次演讲中意识到了CSS，并于1996年底发布了CSS Level 1推荐标准。The first version was mainly about the design of fonts and color.第一个版本主要是关于字体和颜色的设计。

2. The second version with CSS level 2 CSS级别为2的第二个版本
   The next version was released in 1998. Because there were some inconsistencies and CSS Level 2 often caused problems when used on the web due to different web browsers implementing many things incompletely or incorrectly, this version was revised in 2002 with an intermediate version—CSS Level 2 Revision 1—in which some of these defects were fixed or deleted. 下一个版本于1998年发布。由于存在一些不一致之处，并且由于不同的网络浏览器实现了许多不完整或不正确的东西，CSS Level 2在网络上使用时经常会引起问题，因此该版本于2002年进行了修订，其中一个中间版本——CSS Level 2 Revision 1——修复或删除了其中的一些缺陷。It took until 2011 before CSS 2.1 was published as a Recommendation. This new version included the positioning of elements.直到2011年，CSS 2.1才作为推荐标准发布。这个新版本包括元素的定位。

3. CSS3
   The third version of CSS has been in the works since 2000. Unlike the Level 2 version, they no longer used a single specification, but instead used CSS3 to split the various features into different modules. CSS的第三个版本自2000年以来一直在开发中。与Level 2版本不同，他们不再使用单一的规范，而是使用CSS3将各种功能拆分为不同的模块。Each module adds new capabilities and extends the features defined in CSS 2.1 with it—keeping everything backward compatible.每个模块都添加了新的功能，并扩展了CSS 2.1中定义的功能，使所有内容都向后兼容。

Today, CSS no longer has a version number and consists of numerous modules that are developed independently at different paces. 如今，CSS不再有版本号，而是由许多以不同速度独立开发的模块组成。CSS3 is really just a term for the modules that were added after CSS 2.1. The individual modules, however, do have a version number. As a result, a CSS4 version will probably never exist.CSS3实际上只是CSS 2.1之后添加的模块的一个术语。然而，各个模块确实有一个版本号。因此，CSS4版本可能永远不会存在。