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 則留言:
很讚的文章，請持續經營、發文
張貼留言