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++ 可从http://sourceforge.net/projects/notepad-plus/站点免费下载。
● Crimson Editor 可从www.cirmsoneditor.com站点免费下载。
● HTML-kit 可从www.chami.com/html-kit站点免费下载。
下面是Mac OS X中使用的一些文本编辑器:
● TextWrangler 可从ww.barebones.com站点免费下载。
● TextMate 可从http://macromates.com/站点下载30天免费试用版。
● 从http://en.wikipedia.org/wiki/List_of_HTML_editors可以找到更多适合编写CSS和HTML的文本编辑器。
除此之外,还有非常流行的Adobe Dreamweaver(www.adobe.com/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复选框。