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