我們可以通過三種方式在 HTML 頁面中包含 CSS。它們是 –
- Inline
這里我們?cè)谠氐?style 屬性中指定 CSS 樣式。不過，建議通過 CSS 的內(nèi)部或外部鏈接來模塊化文件。
內(nèi)部
我們可以在 標(biāo)簽中包含我們的 CSS 規(guī)范HTML 文檔的 內(nèi)部。
外部
我們可以使用 鏈接可以放置在本地或服務(wù)器上的 .css 文件標(biāo)簽。通過使用文件的外部鏈接來重構(gòu)文件，我們可以擁有一個(gè)可以在多個(gè)網(wǎng)頁上使用的通用 CSS 文件。
語法
語法在HTML中包含CSS文件如下
/*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel="stylesheet" href="#location"> </head>
登錄后復(fù)制
示例
以下示例說明了如何將 CSS 文件包含在 HTML 頁面中
內(nèi)聯(lián) CSS
?實(shí)時(shí)演示
<!DOCTYPE html> <html> <head> </head> <body> <div style="background-color:mistyrose; height: 50px;"></div> <p style="letter-spacing: 16px; font-size: 1.3em;"> <u>Demo text here</u> </p> </body> </html>
登錄后復(fù)制
輸出
這給出了以下輸出 –
示例
內(nèi)部鏈接
?實(shí)時(shí)演示
<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
border: 5px double green;
margin: auto;
padding: 20px;
}
tr {
box-shadow: 0 0 0 3px red;
}
td {
border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
登錄后復(fù)制
輸出
這給出了以下輸出 –
示例
外部鏈接
HTML 文件
?實(shí)時(shí)演示
<!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>
登錄后復(fù)制
CSS 文件
div {
margin: auto;
padding: 15px;
width: 33%;
border: 2px solid;
border-radius: 50%;
}
div > div {
border-color: green;
}
div > div > div {
border-color: red;
}
登錄后復(fù)制
輸出
這給出了以下輸出 –
以上就是如何在 HTML 頁面中包含 CSS的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
