原文網(wǎng)址:HTML中CSS的三種寫法_IT利刃出鞘的博客-CSDN博客
簡介
本文介紹在前端HTML中寫CSS的三種方法。
有內(nèi)聯(lián)樣式、內(nèi)部樣式、外部樣式。優(yōu)先級為:內(nèi)聯(lián)樣式 > 內(nèi)部樣式 > 外部樣式。當(dāng)同一個樣式在不同位置定義時,會使用優(yōu)先級高的樣式。
內(nèi)聯(lián)樣式
行內(nèi)樣式,又叫做標(biāo)簽樣式,寫在標(biāo)簽的 style 屬性上。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<div style="color: green">
這是div元素
</div>
</body>
</html>
內(nèi)部樣式
寫法1:寫到head
將CSS樣式寫到頁面頭部,寫在<style></style>之間。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
div {
color: green;
}
</style>
</head>
<body>
<div>
這是div元素
</div>
</body>
</html>
寫法2:寫到body?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
</head>
<body>
<style>
div {
color: green;
}
</style>
<div>
這是div元素
</div>
</body>
</html>
外部樣式
把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css”為擴展名,在<head>內(nèi)使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)。
CSS文件(demo.css)文章來源:http://www.zghlxwxcb.cn/news/detail-535414.html
div {
color: green;
}
HTML文件文章來源地址http://www.zghlxwxcb.cn/news/detail-535414.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body>
<div>
這是div元素
</div>
</body>
</html>
到了這里,關(guān)于HTML中CSS的三種寫法的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!