CSS導入使用及引用的兩種方法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; }