CSS的引入方式
阿新 • • 發佈:2022-05-21
CSS樣式有三種不同的使用方式,分別是行內樣式,嵌入樣式以及連結式。我們需要根據不同的場合不同的需求來使用不同的樣式。
- 行內樣式
行內樣式,就是寫在元素的style屬性中的樣式,這種樣式僅限於元素內部起作用。當個別元素需要應用特殊樣式時就可以使用內聯樣式。但不推薦大量使用內聯樣式,因為那樣不利於後期維護。
|
|
- 嵌入式
嵌入式,是把CSS樣式寫在HTML文件內部head標籤中的style標籤裡。瀏覽器載入HTML的同時就已經載入了CSS樣式了。當單個文件需要特殊,單獨的樣式時,可以使用內部樣式表。
|
|
- 連結式
連結式,就是把CSS樣式寫在HTML文件的外部,一個字尾為 .css 的外部樣式表中,然後使用時在head標籤中,使用link標籤的href屬性引入檔案即可。當CSS樣式需要應用在很多頁面時,外部樣式表是最理想的選擇。在使用外部樣式表的情況下,我們可以通過改變一個檔案來改變這所有頁面的外觀。
common.css
|
|
html檔案
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #針對標籤名稱CSS
p{
color: green;
font-size: 32px;
}
</style>
<link rel="stylesheet" href="common.css"> #將HTML程式碼和CSS程式碼拆分
</head>
<body>
<p>Hi huchangxi</p>
<p style="color: red">Hi huchangxi</p> #針對單一標籤CSS
<p id="i1" style="color: red">Hi huchangxi</p>
</body>
</html>
p{
color: red;
font-size: 32px;
}