外部样式表的使用

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

外部样式表的使用
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 是选择媒体类型。

一个外部样式表文件可以应用于多个页面。

当你改变这个样式表文件时，所有页面的样式都会随之改变。

在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

【实验目的与要求】
1．掌握外部样式表的制作方法；
2．掌握在网页中链接外部样式表文件的方法。

【实验内容与步骤】
准备：
1.在资源管理器中建立如图所示的网站目录结构。

2.启动Dreamweaver ，选择“站点→管理站点→新建→站点→高级” 命令，新建本地站点。

站点名称：XXX 本地根文件夹：D:\学生学号
1．制作外部样式表文件
方法一：在Dreamweaver 中，在“学生学号”文件夹中，新建一个文件，输入以下代码，文件名：style.css 。

方法二：打开“记事本”，输入以下代码，文件保存到“学生学号”文件夹中，文件名：style.css 。

/*定义网页文档的字体，字号，行间距，颜色*/
body {
font-family: "宋体";
font-size: 9pt;
line-height: 12pt;
color: #000000;
} D:\ 学生学号
image
/*定义超级链接样式（无下划线）*/
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>之间，链接外部样式表文件。