網頁

▼

2019/7/22

CSS 外部樣式表(External style sheet) 在HTML文件參考外部CSS檔

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 則留言: