层叠样式表简介.doc

层叠样式表简介 本章主要内容： CSS定义 CSS的历史 用CSS增强HTML文档 层叠样式表(Cascading Style Sheets，CSS)是描述使用标记语言(例如HTML)编写的文档外观的一种语言。利用CSS可以控制文本的颜色、字体的样式、段落的间距、分栏的大小和布局、背景的图像或颜色以及其他各种视觉效果。其主要的优势在于，相同的CSS可以用在多个页面上，这样在调整整个网站的样式时就不需要单独修改每个页面。 CSS最常见的用法是设计网页的样式，当与HTML、XHTML(用来描述内容)或JavaScript(用来向站点添加交互性)结合使用时，CSS可以展现出强大的能力。 CSS的由来对于现在的CSS创作者并不是十分重要，所以如果您的时间很紧张，那么可以跳过下面一部分内容。如果您和我一样对问题的本质感兴趣，那么可以继续读下去。 制定Web标准的主要组织是万维网联盟(World Wide Web Consortium，W3C)。在早期的Web上，W3C收到了关于使用样式表语言来帮助分离文档的视觉显示和其内容的9条建议。在1994年，现任Opera Software(一家公司，后文还会提到) CTO的H?kon Wium Lie提出了Cascading HTML Style Sheets(CHSS)，不过当时他还在CERN工作，同事中包括Tim Berners-Lee和Robert Cailliau这两个创建万维网的人员。CHSS后来成为了CSS，因为它并不是只能应用到HTML上。在1996年12月，CSS Level 1 Recommendation问世。 后来，W3C又发布了3个CSS规范。CSS 2在1998年成为推荐标准，后来还出现了CSS 2.1(修复了CSS 2中的一些错误)。目前，CSS 3是候选的推荐标准。 CSS 3仍在开发当中，而CSS 2.1很有可能在不久的将来成为完全成熟的推荐标准，所有现代浏览器都对CSS 2.1提供了良好的支持。本书将讨论CSS 2.1的现状，并介绍CSS 3中提供的一些可以在如今的浏览器中应用的新功能。 接下来，我们将介绍使用CSS的优点，然后开始创建第一个层叠样式表。 1.1 使用CSS的优点 通过使用CSS表现Web文档，可以大大减少编写单个文档乃至整个网站所花费的时间。您会发现，相比只使用HTML提供的样式设置机制，CSS实现的功能更加多样。如果能有效使用CSS的众多功能，那么可以减少网站所占用的硬盘空间以及服务器和浏览器之间传输网站所需的带宽。总之，CSS具有以下优点： 整个网站的表现形式集中到一个或少量文档中，从而可以在片刻之间更新网站的外观。在传统的HTML文档中，表现形式完全包含在每个文档的主体中。而CSS为HTML提供了这样的功能：文档的结构和表现相分离。因此设计人员可以独立于HTML编写CSS。 浏览器开始支持多重样式表，使网站同时支持多种表现形式。用户可以选择最喜欢的一种外观形式。这种功能以前只能借助更为复杂的编程语言才能实现。 使用样式表可以针对不同的设备类型对网站内容进行优化。例如，相同的HTML文档在手持设备(如PDA和手机)中显示和在打印时会表现为不同的版本。 使用样式表可以提高下载速度，因为使用CSS的Web文档占用的带宽比较少。浏览器还支持一种缓存特性，这样浏览器只需要下载一次CSS文件或其他Web文档，就只在网站更新后才会再次向Web服务器请求该文件，从而进一步增强了网站性能。 网站用户可以编写自己的样式表，提高网站的可访问性。例如，用户可以编写高反差的样式表，从而使文档内容更容易阅读。许多浏览器都为初级用户提供了这种功能，但其仍然是通过CSS实现的。 与仅仅使用HTML相比，使用层叠样式表的这些功能和层叠的能力可以简化网站的规划、制作及维护。通过使用CSS表现Web文档，可以大量减少网站规划和开发的时间。 1.2 编写CSS 与编写HTML源代码一样，编写CSS也需要一个文本编辑器。但Microsoft Word 这样的文字处理程序并不适合CSS，因为它们会自动完成有助于写信或写书的许多工作，例如自动更正拼写，但是在编写代码的时候这些功能只会适得其反。 编写CSS时，需要的是不会修改输入内容、但是可以编写和保存纯文本的编辑器。 Windows中的Notepad程序就是编写源代码的一个理想的文本编辑器。选择“开始”|“运行”命令，在“打开”文本框中输入Notepad命令就可以启动Notepad。 在Mac OS X中，与Notepad程序相当的是TextEdit，它位于Mac OS X Applications文件夹中。 还有一些更加高级的文本编辑器，能够用不同的颜色显示代码(称为语法高亮显示)以帮助用户清晰理解各部分代码的功能，还能够在