特别致谢  本教程由课件吧(http://www.cai8.net)开发，并由本书作者寒蓝老师提供在“闪客起航”开设专栏进行在线学习，以帮助大家快速掌握CSS的知识。本教程选自清华大学出版社2008年2月出版的《Dreamweaver网页制作实用教程》一书。《Dreamweaver网页制作实用教程》是“21世纪师范院校计算机实用技术规划教材”中的一本教材。由于教材内容新颖、实用，深受广大读者的欢迎，目前全国已有多所中、高等院校和IT培训学校选择本书作为正式的网页制作教材。 朋友们可以在全国各新华书店购买此书，或者在当当网、互动出版网邮购此书。 第七课 链接外部CSS样式文件前面在创建CSS样式时，都是直接将CSS样式嵌入到网页文档中，这属于网页文档的内部CSS样式应用。CSS样式不但可以直接嵌入在页面中，而且可以保存为独立的样式文件（扩展名为.css），需要引用样式文件中的CSS样式时，可以将其链接到网页文档中。多个网页文件可以共享一个.css样式文件，对.css样式文件的修改将会影响所有以链接方式调用这个.css样式文件的网页文件。 7.4.1 制作CSS样式文件1．从CSS模板新建CSS文件 （1）选择【文件】|【新建】命令，在弹出的【新建文档】对话框中，选择【常规】标签页，在【类别】列表中选择【CSS样式表】，然后在【CSS样式表】中选择【完整设计：Arial,蓝色/绿色/灰色】（这是Dreamweaver自带的一个CSS模板），然后单击【创建】按钮，如图7-1所示。
图7-1 新建CSS样式表 （2）这时代码视图中出现了一些CSS代码。按下键盘上的快捷键Ctrl + S ，弹出【另存为】对话框，在【文件名】中输入myCSS，展开【保存类型】后面的下拉列表选择【样式表(*.css)】，然后单击【保存】按钮，如图7-2所示。
图7-2 保存CSS文件 2．修改CSS样式 （1）myCSS.css仍然处于打开状态，注意看【文档】工具栏可以发现，拆分视图和设计视图都是不可用的，对于CSS文件，只能在代码视图中直接编辑其源代码，这和普通HTML文件是不同的，如图7-3所示。
图7-3 代码视图中显示的CSS文件 （2）在代码视图中可以对这里的CSS样式进行修改，这时应该充分利用Dreamweaver 8提供的代码提示工具，这里仅举一个例子来说明。在代码视图中，找到“.title”内的font-family，将“:”后面的字体列表删除，定位光标到“:”后面，按下键盘上的空格键，这时将弹出字体列表代码提示窗口，从中选择“Verdana,宋体”并双击鼠标左键，如图7-4所示。
图7-4 利用代码提示工具设置CSS属性值 （3）完成对myCSS.css的修改之后，按下键盘上的快捷键Ctrl+ S 保存文件，然后将其关闭。 专家点拨：以上步骤是通过Dreamweaver提供的CSS模板创建了一个CSS文档，这种方式比较高效，但也有一定的局限性。也可以直接新建一个空白CSS文档，然后通过在“CSS样式”面板添加CSS规则来完成CSS文档的创建。 7.4.2 通过链接使用外部样式表1．链接外部CSS文件 （1）打开示例文件C:\Samples\part6\6.4.html，这个文件中包含简单的页面，如图7-5所示。
图7-5 使用CSS样式之前的页面效果 （2）在【CSS样式】面板中单击右下角的【附加样式表】按钮 |
