(1)单击【附加样式表】按钮,在打开【链接外部样式表】对话框(见图1)中选择外部CSS文件后,可以通过连接或导入方式将其应用到当前网页中。图1
(2)在【添加为】中选择其中的一个选项:
◇若要创建当前文档和外部样式表之间的链接,请选择【链接】单击按钮。该选项在HTML代码中创建一个<link标记,并引用已发布的样式表所在的URL。<link标记必须放在页面的<head区域。Internet Explorer和Netscape Navigator都支持此方法。
◇如果希望导入而不是链接到外部样式表,请选择【导入】单击按钮。导入外部样式表是指在内部样式表的<style里导入一个外部样式表,导入时用@import。
注意:不能使用【链接】标记添加从一个外部样式表到另外一个外部样式表的引用。如果要嵌套样式表,必须使用【导入】指令。大多数浏览器还能识别页面中(而不仅仅是样式表中)的导入指令。当在链接到页面与导入到页面的外部样式表中存在重叠的规则时,不同浏览器解决冲突属性的方式具有细微的差别。
HTML文档使用<link .../>元素来引入外部样式文件, <link .../>要放在head元素里
href="文件地址"
结合题目: style/css.css 就是表示在html所在目录里有个文件夹style. 该文件夹里有一个css文档, 该css文档名字叫css
type="文件类型"
常见的有text/css表示层叠样式表
text/javascript 表示 javascript脚本
rel="外部文件和HTML文档的关系"
stylesheet: 表示外部文件是该HTML的样式表
参考代码 HTML文件
<!DOCTYPE html><html>
<head>
<link href="style/css.css" type="text/css" rel="stylesheet"/>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<h3 id="title">标题</h3>
<p class="myp">风云</p>
<p class="myp">雷电</p>
</body>
</html>
参考CSS文件(注意该文件,在html所在目录的style文件夹里, 详细看前面的图)
#title{color:#f00
}
.myp{
background:#999
}
效果图