如何连接外部CSS样式

html-css014

如何连接外部CSS样式,第1张

外部CSS样式是一个独立的CSS文件,当在网页中直接创建外部CSS样式时,该样式自动应用到网页中;当在创建空白网页时,通常可以附加已经存在的外部样式表。如果CSS样式文件已经存在,制作网页时可以通过【CSS样式】面板中的【附加样式表】按钮来链接,具体操作如下:

(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

 

}

效果图