免費AI編程助手
CSS 包含
2018-09-29 15:01 更新
內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式是使用style屬性添加到元素的樣式。
<!DOCTYPE HTML>
<html>
<body>
<a href="http://m.hgci.cn"
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)用于文檔中的每個元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
background-color:grey;
color:white
}
</style>
</head>
<body>
<a href="http://m.hgci.cn">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>例子
您可以在單個樣式元素中定義多個樣式。
以下代碼顯示了具有兩種樣式的樣式元素。
<!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://m.hgci.cn">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文件擴展名的單獨的樣式表文件，并在每個HTML頁面中定義相同的樣式集。
以下代碼顯示了文件styles.css的內(nèi)容。
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://m.hgci.cn">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>
您可以鏈接到所需的任何樣式表。
與樣式元素一樣，如果使用相同的選擇器定義兩個樣式，則導(dǎo)入樣式表的順序很重要。
最后加載的那個將是應(yīng)用的那個。
從另一個樣式表導(dǎo)入
您可以使用 @import 語句將樣式從一個樣式表導(dǎo)入到另一個樣式表。
以下代碼鏈接到包含導(dǎo)入的樣式表
@import "styles.css";
span {
border: medium black dashed;
padding: 10px;
}
您可以根據(jù)需要導(dǎo)入任意數(shù)量的樣式表，每個樣式表使用一個 @import 語句。
@import 語句必須出現(xiàn)在樣式表的頂部，在定義任何新樣式之前。
以下代碼鏈接到包含導(dǎo)入的樣式表：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="combined.css"/>
</head>
<body>
<a href="http://m.hgci.cn">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 注釋
更多建議：