外部样式表使用.docVIP

外部样式表的使用 CSS是Cascading style Sheets的简称，中文译作“层叠样式表”，如果在制作网页时，采用CSS技术，便可以轻松而又有效地对页面的整体布局、字体、颜色、链接、背景和其它效果实现精确的控制，而且修改起来也非常简单，只要将相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同页面的的外观和格式。 外部样式表是把样式表保存为一个单独的样式表文件，文件扩展名为.css，在页面中用link标记，可以链接到外部样式表文件，这个link标记必须放到页面的head区内，如下所示： head …… link href=style.css rel=stylesheet type=text/css media=all …… /head 其中，rel=stylesheet是指在页面中使用这个外部的样式表；type=text/css是指文件的类型是样式表文本；href=style.css是文件所在的位置；media是选择媒体类型。 一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都会随之改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。 D:\学生学号image D:\ 学生学号 image 1．掌握外部样式表的制作方法； 2．掌握在网页中链接外部样式表文件的方法。 【实验内容与步骤】 准备： 1.在资源管理器中建立如图所示的网站目录结构。 2.启动Dreamweaver，选择“站点→管理站点→新建→站点→高级” 命令，新建本地站点。 站点名称：XXX 本地根文件夹：D:\学生学号 1．制作外部样式表文件 方法一：在Dreamweaver中，在“学生学号”文件夹中，新建一个文件，输入以下代码，文件名：style.css。 方法二：打开“记事本”，输入以下代码，文件保存到“学生学号”文件夹中，文件名：style.css。 /*定义网页文档的字体，字号，行间距，颜色*/ body { font-family: 宋体; font-size: 9pt; line-height: 12pt; color: #000000; } /*定义超级链接样式（无下划线）*/ a:link { font-family: 宋体; font-size: 9pt; line-height: 12pt; color: #000000; text-decoration: none; } a:visited { font-family: 宋体; font-size: 9pt; line-height: 12pt; color: #FF3300; text-decoration: none; font-weight: normal; } a:hover { font-family: 宋体; font-size: 9pt; line-height: 12pt; color: #FF0000; text-decoration: underline; } 2．链接外部样式表文件style.css 在Dreamweaver中，打开一个网页文件，链接外部样式表文件style.css。 方法一：窗口→CSS样式→全部→附加样式表，链接外部样式表文件style.css。 方法二：以下代码放在head/head之间，链接外部样式表文件。 link href=style.css rel=stylesheet type=text/css