CSS 包含
2018-09-29 15:01 更新
內聯(lián)樣式
內聯(lián)樣式是使用style屬性添加到元素的樣式。
<!DOCTYPE HTML>
<html>
<body>
<a href="http://www.yjpub.cn"
style="background-color:grey; color:white">
Visit the website
</a>
<p>This is a test.</p>
<a rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>嵌入式樣式
您可以使用樣式元素定義嵌入樣式。
此示例中的選擇器是a，它指示瀏覽器將樣式應用于文檔中的每個元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
background-color:grey;
color:white
}
</style>
</head>
<body>
<a href="http://www.yjpub.cn">Visit the website</a>
<p>This is a test.</p>
<a rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>例子
您可以在單個樣式元素中定義多個樣式。
以下代碼顯示了具有兩種樣式的樣式元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
background-color:grey;
color:white
}
span {
border: thin black solid;
padding: 10px;
}
</style>
</head>
<body>
<a href="http://www.yjpub.cn">Visit the website</a>
<p>I like <span>apples</span> and oranges.</p>
<a rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>外部樣式表
您可以創(chuàng)建具有.css文件擴展名的單獨的樣式表文件，并在每個HTML頁面中定義相同的樣式集。
以下代碼顯示了文件styles.css的內容。
a {
background-color:grey;
color:white
}
span {
border: thin black solid;
padding: 10px;
}
您不需要在樣式表中使用樣式元素。您只需使用選擇器，然后是您需要的每個樣式的聲明。
然后，您可以使用link元素將樣式帶入您的文檔。<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
</head>
<body>
<a href="http://www.yjpub.cn">Visit the website</a>
<p>I like <span>apples</span> and oranges.</p>
<a rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>
您可以鏈接到所需的任何樣式表。
與樣式元素一樣，如果使用相同的選擇器定義兩個樣式，則導入樣式表的順序很重要。
最后加載的那個將是應用的那個。
從另一個樣式表導入
您可以使用 @import 語句將樣式從一個樣式表導入到另一個樣式表。
以下代碼鏈接到包含導入的樣式表
@import "styles.css";
span {
border: medium black dashed;
padding: 10px;
}
您可以根據(jù)需要導入任意數(shù)量的樣式表，每個樣式表使用一個 @import 語句。
@import 語句必須出現(xiàn)在樣式表的頂部，在定義任何新樣式之前。
以下代碼鏈接到包含導入的樣式表：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="combined.css"/>
</head>
<body>
<a href="http://www.yjpub.cn">Visit the website</a>
<p>I like <span>apples</span> and oranges.</p>
<a rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>
以上內容是否對您有幫助：
← CSS 注釋
更多建議：