CSS樣式可獨立設定在副檔名為css
的檔案,然後在HTML文件使用<link>
來參照。這外部CSS檔稱為外部樣式表(External style sheet)。
請先參考CSS 內部樣式表(Internal style sheet) 在HTML文件的<style>設定CSS。
建立一份welcome.html
內容修改如下。請參考在Visual Studio Code建立第一個HTML文件。
welcome.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>您好,歡迎光臨</h1>
<p>普通段落文字</p>
</body>
</html>
在瀏覽器開啟畫面如下。
到這裡為止HTML文件中的任何元素並未施加任何CSS設定。
在<head>...</head>
間加入<link>
標籤如下。
welcome.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>您好,歡迎光臨</h1>
<p>普通段落文字</p>
</body>
</html>
<link>
的屬性rel="stylesheet"
與type="text/css"
用來告訴瀏覽器所引入的資源是一個CSS樣式檔;href="style.css"
告訴瀏覽器資源位址在同個檔案目錄的style.css
。
總之用<link>
引入外部樣式表時,記得加上rel="stylesheet"
及type="text/css"
是固定寫法。
<link rel="stylesheet" type="text/css" href="style.css">
外部樣式表檔名可以任意命名以副檔名css
結尾的名稱,例如本範例為style.css
。你也可以命名為mystyle.css
,只要注意<link>
的href
屬性的參照位址是對應的檔名及可,也就是href="mystyle.css"
。
接著建立style.css
如下,並把檔案存在與welcome.html
同個檔案目錄位置。
style.css
h1 {
color:red;
}
p {
color:blue;
background-color: yellow;
}
上面的CSS設定使用「CSS選擇器(CSS selectors)」的元素選擇器(Type selector)h1
及p
把HTML文件中的<h1>
元素文字顏色改為紅色(red
);
把<p>
元素文字顏色改為藍色(blue
),背景顏色改為黃色(yellow
)。
接著以瀏覽器開啟welcome.html
,可以看到HTML文件有確實套用了外部樣式表style.css
所設定的CSS效果。
以上即為使用CSS外部樣式表(External style sheet) 來改變HTML元素的樣式。
參考:
1 則留言:
很讚的文章,請持續經營、發文
張貼留言