《层叠样式表简介》word版.doc

第1章 层叠样式表简介1第 章层叠样式表简介本章主要内容： 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的Hkon 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文件夹中。还有一些更加高级的文本编辑器，能够用不同的颜色显示代码(称为语法高亮显示)以帮助用户清晰理解各部分代码的功能，还能够在开始输入的时候自动完成代码。下面介绍Windows中几种可以使用的文本编辑器： Notepad+ 可从/projects/notepad-plus/站点免费下载。 Crimson Editor 可从站点免费下载。 HTML-kit 可从/html-kit站点免费下载。下面是Mac OS X中使用的一些文本编辑器： TextWrangler 可从站点免费下载。 TextMate 可从/站点下载30天免费试用版。 从/wiki/List_of_HTML_editors可以找到更多适合编写CSS和HTML的文本编辑器。除此之外，还有非常流行的Adobe Dreamweaver(/products/dreamweaver)，这个产品将文本编辑器的功能与WYSIWYG(What You See Is What You Get，所见即所得)代码生成器的功能结合起来，为使用HTML和CSS创建网页提供了一个图形界面。为理解并尝试本书中的代码，必须使用Dreamweaver或类似应用程序的代码视图，而不能使用WYSIWYG视图。用户必须创建带有.html扩展名的HTML文件。注意，如果使用Notepad或TextEdit，那么文件以.txt扩展名保存，Web浏览器将把这样的文件解释为普通的文本而不是HTML。为了确保在Windows中正确保存HTML文件，选择“开始”|“运行”命令，输入Explorer(或者右击“开始”菜单，然后从弹出菜单中选择“资源管理器”命令)以打开Windows资源管理器。在打开Windows资源管理器之后，选择“工具”|“文件夹选项”命令以打开“文件夹选项”对话框，单击“查看”选项卡，取消选中“隐藏已知文件类型的扩展名”复选框。然后单击“确定”按钮。在Mac OS X中，需要打开Finder并选择Finder | Preferences命令。然后在Advanced选项卡中，选中Show All File Extensions复选框。1.3 第一个应用CSS的文档下面这个示例的目的是介绍CSS的功能。通过这个示例，您可以对CSS的作用有一个大致的了解，同时也将亲自动手编写样式表。注意：在站点上可以下载这个示例的图像和源代码。虽然对于这个示例需要使用下载的代码，但是建议对于大多数章节，您最好手动输入示例代码，这样可以熟悉语法并体会到示例中不同代码的作用。试一试使用HTML和CSS创建网页示例1-1 根据以下步骤编写第一个应用CSS的文档。(1) 在文本编辑器中输入以下标记：Example 1-1The gas giantsJupiterJupiter is the fifth planet from the Sun and the largest planet withintheSolar System. The Romans named the planet after the god Jupiter. It is a gasgiant with a mass two and a half times the mass of all the other planets inour Solar System combined.Jupiter FactsDistance from the Sun78,412,020 kmEquatorial Radius71,492 kmVolume1,425,500,000,000,000 km3Mass1,898,700,000,000,000,000,000,000,000 kgMore Jupiter factsSaturnSaturn is the sixth planet from the Sun and the second largest planet in theSolar System, after Jupiter. Saturn is named after the Roman god Saturn,equated to the Greek Cronus (the Titan father of Zeus), the BabylonianNinurta, and the Hindu Shani.Saturn FactsDistance from the Sun1,426,725,400 kmEquatorial Radius60,268 kmVolume827,130,000,000,000 km3Mass568,510,000,000,000,000,000,000,000 kgMore Saturn factsUranusUranus is the seventh planet from the Sun, and the third-largest andfourth most massive planet in the Solar System. It is named afterthe ancient Greek deity of the sky Uranus the father of Cronus andgrandfather of Zeus.Uranus FactsDistance from the Sun78,412,020 kmEquatorial Radius25,559 kmVolume69,142,000,000,000 km3Mass86,849,000,000,000,000,000,000,000 kgMore Uranus factsNeptuneNeptune is the eighth and farthest planet from the Sun in our Solar System.Namd for the Roman god of the sea, it is the fourth-largest planet bydiameter and the third-largest by mass.Neptune FactsDistance from the Sun4,498,252,900 kmEquatorial Radius24,764 kmVolume62,526,000,000,000 km3Mass102,440,000,000,000,000,000,000,000 kgMore Neptune facts(2) 在新文件夹中将前面的文件保存为example_1-1.html。(3) 在浏览器中打开example_1-1.html，可以看到如图1-1所示的页面。图 1-1(4) 在文本编辑器中创建一个新的空文档，并在其中输入以下CSS代码：body width: 650px;margin: 0 auto;background: #000;color: #FFF;font: 12px sans-serif;h1 font-size: 24px;h2 font-size: 18px;margin-top: 0;a color: #FFF;a:focus,a:hover text-decoration: none;table margin-bottom: 10px;border-spacing: 0;caption margin-bottom: 10px;font-size: 14px;font-weight: bold;text-align: left;th,td padding: 0 10px 0 0;text-align: left;.planet margin: 10px 0;padding: 20px 20px 20px 200px;border: 1px solid #FFF;background-position: 20px 20px;background-repeat: no-repeat;.jupiter background-image: url(jupiter.jpg);.saturn background-image: url(saturn.jpg);.uranus background-image: url(uranus.jpg);.neptune background-image: url(neptune.jpg);(5) 将前面的CSS保存到example_1-1.html所在的文件夹中，并命名为example_1-1.css。在Mac OS X上把这些代码加载到Safari浏览器中会产生如图1-2所示的结果。图 1-2如果要查看example_1-1.html在其他浏览器中的效果，那么可以打开该浏览器中的File菜单，然后选择Open或Open File命令，并载入硬盘中的example_1-1.html。工作原理示例1-1简单介绍了少量CSS功能。该示例的目的是让您亲手编写CSS，并预先了解一下本书的内容。接下来的每章内容都将介绍与前面这个示例类似的相关示例的细节。图1-2表明，使用CSS可以指定背景图像以及HTML文档的其他美学特征。本书以后的章节还会深入介绍产生图1-2所示结果的CSS。如果您喜欢探索未知，那么可以试试修改这里使用的CSS，例如改变一些值，看看会得到什么结果。不要担心出问题，学习的道路不会是一片坦途。有时候您会发现，在使用CSS时，为了使旧版本的IE中的显示效果与Safari、Firefox、Chrome和Opera浏览器相同，需要采取一些技巧。在本书中，您将学到各种技巧和方案，使得应用了CSS的网页能够与IE 6兼容。1.4 各种浏览器与许多传统的Web编程语言不同，对于CSS和HTML并不需要选择其运行环境。最终用户在选择使用的Web浏览器时就做出了这种决策。虽然CSS是标准的Web语言，所有主流浏览器都支持它，但是不同浏览器的支持之间通常存在一些差别，所以在发布专业的代码之前应该知道哪些浏览器比较流行，并在这些浏览器中测试代码。很有必要看一下Yahoo!的Graded Browser Support页面，Yahoo!在这个页面中显示它们推荐开发人员在哪些浏览器中进行测试，并且会定期进行更新。这个页面的网址为：/yui/articles/gbs/。根据浏览器用于渲染页面的引擎，可以把浏览器分成几类。使用相同渲染引擎的浏览器很可能以相同的方式显示页面，这就可以减少测试的工作量。1.4.1 WebkitWebkit是Apple Safari和Google Chrome浏览器使用的渲染引擎，能够很好地支持CSS 2.1，也支持CSS 3的许多功能。1. SafariSafari是Apple公司开发的一款浏览器，使用Webkit作为其渲染引擎。Safari支持Windows和Mac OS X，其网址为/safari。Safari的最新版本是Safari 5，占有的市场份额将近6%。2. Google ChromeGoogle Chrome也使用Webkit渲染引擎，并且同样支持Windows和Mac OS X，其网址为/chrome。Chrome占据的市场份额刚刚超过14%，其最新版本是Chrome 10。虽然Chrome加入浏览器市场的时间较晚，但是迅速受到了人们的欢迎，并且Google也在重点开发这款产品，每隔一段时间就会发布一个新版本。1.4.2 TridentTrident是Microsoft Internet Explorer使用的引擎，包含在Windows操作系统中。多年以来，Internet Explorer一直在市场中占据主导地位，目前仍有4个版本被广泛使用。这些版本的Internet Explorer总共占据了超过46%的市场份额。从/en-US/internet-explorer/downloads/ie可以下载全部4个版本。1. Internet Explorer 9Internet Explorer 9是Microsoft IE的最新版本，在创作本书时它甚至还没有发布，但是在本书出版的时候Microsoft应该会发布这个版本。Internet Explorer 9将会很好地支持CSS 2.1和CSS 3。2. Internet Explorer 8Internet Explorer 8是目前使用最广泛的版本，占有的市场份额大约是27%。Internet Explorer 8对CSS 2.1提供了不错的支持，但是与其他主流浏览器相比，它对CSS 3的支持较少。3. Internet Explorer 7Internet Explorer 7的市场占有情况不如Internet Explorer 8，也不如它的前一个版本Internet Explorer 6，但是仍然占有超过10%的市场份额。Internet Explorer 7对CSS 2.1提供了不错的支持，但是不支持CSS 3。4. Internet Explorer 6虽然Internet Explorer 6是早在2001年的时候发布的版本，但是仍然占有超过16%的市场份额。这个占有率正在下降，但是在最近的一段时间内仍然会有用户使用这个版本，所以也需要在这个版本中进行测试，以更好地覆盖市场。Internet Explorer 6支持CSS 2.1的许多功能，但是不支持的那部分功能可以简化开发工作。它不支持CSS 3。5. 安装多个版本的Internet Explorer进行测试在编写本书时，并不能在一个Windows系统上同时安装不同版本的Internet Explorer。出于开发原因，需要同时测试IE 6、IE 7、IE 8和IE 9，因为访问者可能会使用其中任意一种版本的浏览器访问您的网站。通过以下几种方法可以同时测试不同版本的IE： 使用PC虚拟/仿真软件，如Virtual PC或VirtualBox，可以在Windows或Mac OS X系统中安装并运行不同版本的Windows(或Linux等其他操作系统)。实际上，用户可以从Windows桌面上载入新的Windows实例，并在一个窗口中独立地运行这个Windows实例。 另一种方法是使用几台不同的计算机，每台计算机上安装一个版本的Internet Explorer。显然，这种方法的成本更高，但是在一个商业环境中有可能实现。1.4.3 Gec