[Day17]如何在 HTML 中使用 CSS＆建立 CSS 檔案

14th鐵人賽

4181 瀏覽

在[Day4]的時候我們已經有稍微介紹了一下 CSS，
那麼今天的內容將會分成「學習如何在 HTML 中使用 CSS」與「建立 CSS 檔案」。

首先我們已經知道 HTML 和 CSS 密不可分的關係，
接下來將會介紹三種方法使我們能在 HTML 文件中套用 CSS。

如何在 HTML 中使用 CSS

套用方法
載入 CSS 的寫法是在 HTML 文件的 < head > 標籤內，使用 < link > 標籤載入 CSS。
只要將 rel 屬性設定為「stylesheet」，
在 href 屬性設定 CSS 的路徑，即可套用。

套用方法
在標籤內描述 CSS 時，直接在各 HTML 的標籤內撰寫 style 屬性。

後面的這兩種方法，包括「在 HTML 檔案的 < head > 內，使用 < style > 標籤撰寫 CSS 設定」
或是「在 HTML 標籤內撰寫 style 屬性」，都在把 CSS 寫在個別的 HTML 文件內，
如果每個網頁都各寫各的 CSS，會很難統一管理，維護起來也耗費時間。
如果沒有特殊理由，基本上都建議使用第一個方法「將 CSS 檔案載入 HTML 並套用」。

那後半段將學習如何建立 CSS 檔案、將該檔案載入 HTML 檔案，
並試著替網頁加上簡單的裝飾。

CSS 檔案的命名原則

CSS 檔案的命名原則和 HTML 檔案一樣，不可以使用中文。
此外，CSS 檔案的名稱要記得加上副檔名「.css」。
啟動文字編輯器並新增檔案

首先開啟 VSCode 後，可以新增一個屬於 CSS 檔案的資料夾。

再來新增副檔名為「.css」的 CSS 檔案。
- 檔名前面的符號便是 CSS 的符號。
編寫 CSS 原始碼

接著可以先練習輸入下圖的範例原始碼（之後會詳細說明每個符號）。
CSS 檔案的第一行描述了「@charset"UTF-8";」，這是用來防止原始碼變成亂碼。
如果把 CSS 原始碼寫在這一行之前，就會出現錯誤。
- 顏色可以隨自己喜好做調整。
在 HTML 檔案的 < head > 內載入 CSS 檔案

再來請打開之前建過的的 index.html，
於 < head > 內加入 <link rel= "stylesheet" href= "../css/style.css">，
即可載入 CSS。
使用網頁瀏覽器開啟網頁

接著我們來比對一下加上 CSS 的效果。
請在 index.html 右鍵點擊 Open with Live Server（沒有安裝延伸模組請參考[Day5]），
就會看到下面的結果囉！

沒有 CSS

有 CSS
- 下圖中套用了 CSS 設定，因此把背景色變成了蘋果綠、標題變成藍色，而且文字變大了。