CSS导入使用及引用的两种方法:
- 外部引用
- 外部引用的方式,我们直接可以通过link标签来引用我们写好的一个CSS文件;
- 在link 标签中,我们通过rel = "stylesheet"来告诉浏览器,这是一个样式文件,同时rel还有另一个取值 alternative,这样用户自己可以选择样式,当然这个前提是当前页面引入的css样式表文件不止一个。
- 现在一般建议使用css文件外联引用,即把css样式单独作为一个.css文件。
- 直接使用
- 可以style标签直接在html 文件中直接写,然后页面通过调用;
- 在html文件中直接写样式表时,可以通过@import文件导入外部样式;
- 下面是样式引用的例子;
CssUse.html文件代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="direct.css">
<title>CSS Use</title>
<style type="text/css">
@import url("http://localhost/cssUse/waysToImportCss.css");
h2 { color: green; }
</style>
</head>
<body>
<h1>通过link连接的样式</h1>
<p>通过link连接的样式</p>
<h2>直接写的样式</h2>
<a href="#">import导入的样式</a>
</body>
</html>
Direct.css文件代码:
h1 { color: blue; }
p { color: yellow; }
waysToImportCss.css文件代码:
a { padding: 0 5px;}
a:hover { color: lightblue; }
a:visited { color: yellow; }