打印本文 打印本文  关闭窗口 关闭窗口  
第7课 链接外部CSS样式文件
作者:课件吧  文章来源:本站原创  点击数  更新时间:2008/5/20 9:11:54  文章录入:admin  责任编辑:admin

特别致谢

  本教程由课件吧(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样式

       1myCSS.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样式】面板中单击右下角的【附加样式表】按钮

[1] [2]  下一页

打印本文 打印本文  关闭窗口 关闭窗口