iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
自我挑戰組

學習HTML&CSS的30天系列 第 17

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

  • 分享至 

  • xImage
  •  

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

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


如何在 HTML 中使用 CSS

  • 將 CSS 檔案載入 HTML 並套用

    第一種方法是先建立好一個 CSS 檔案,然後將該檔案(副檔名為 .css)用連結的方式載入 HTML 中並套用
    這是架設網站時常用的方法,當網站中包含多個網頁,
    如果都要套用同樣的 CSS 樣式,只需要載入同一個 CSS 檔案即可。
    這樣即使未來需要修改所有網頁的外觀,也只需要調整連結的那一個 CSS 檔案就好。
    https://ithelp.ithome.com.tw/upload/images/20221002/20152216h0dKGV0PKn.png
    • 同一個 CSS 檔案可以套用在多個 HTML 文件。
  • 套用方法
    載入 CSS 的寫法是在 HTML 文件的 < head > 標籤內,使用 < link > 標籤載入 CSS。
    只要將 rel 屬性設定為「stylesheet」,
    href 屬性設定 CSS 的路徑,即可套用。
    https://ithelp.ithome.com.tw/upload/images/20221002/20152216EWekvgzSsh.png
  • 在 HTML 檔案的 < head > 內用 < style > 標籤設定 CSS 樣式

    第二種方法,是在 HTML 檔案的 <head> 標籤裡用 <style> 標籤設定 CSS
    這邊要注意的是,雖然同樣是把 CSS 寫在 < head > 標籤內,
    但這個方法跟前一個不同,CSS 的描述只會套用在這個 HTML 網頁裡面,無法和其他的網頁共用。
    因此這個方法只在想改變特定網頁的設計時才使用。
    https://ithelp.ithome.com.tw/upload/images/20221002/20152216HBmonCdbOs.png
    • 在 HTML 檔案的 < head > 內描述的 CSS 只會套用在該 HTML 檔案內。
  • 套用方法
    在 HTML 檔案的 < head > 標籤內新增 < style > 標籤,
    並在 < style > 標籤裡描述 CSS。
    https://ithelp.ithome.com.tw/upload/images/20221002/20152216NmEZyWEAcT.png
  • 在 HTML 標籤內設定「style」屬性

    第三個方法是直接在 HTML 標籤內寫入 CSS,這樣只會在該標籤內套用 CSS。
    由於要在每個標籤內部設定,很花時間,也不容易整理。
    但與其他方法相比,套用 CSS 的優先順序較高,
    想覆寫 CSS 或只想調整部分設計時,可以使用這個方法。
    https://ithelp.ithome.com.tw/upload/images/20221002/20152216IwwrjzTMon.png
    • 在標籤內直接描述,可以只改變部分元素的設計。
  • 套用方法
    在標籤內描述 CSS 時,直接在各 HTML 的標籤內撰寫 style 屬性
    https://ithelp.ithome.com.tw/upload/images/20221002/20152216hxvCv04wMs.png

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


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


建立 CSS 檔案

  • CSS 檔案的命名原則

    CSS 檔案的命名原則和 HTML 檔案一樣,不可以使用中文。
    此外,CSS 檔案的名稱要記得加上副檔名「.css」。

  • 啟動文字編輯器並新增檔案

    首先開啟 VSCode 後,可以新增一個屬於 CSS 檔案的資料夾。
    https://ithelp.ithome.com.tw/upload/images/20221003/20152216pWNxh2Nxud.png

    再來新增副檔名為「.css」的 CSS 檔案。
    https://ithelp.ithome.com.tw/upload/images/20221003/20152216bZvFx1RkBz.png

    • 檔名前面的符號便是 CSS 的符號。
  • 編寫 CSS 原始碼

    接著可以先練習輸入下圖的範例原始碼(之後會詳細說明每個符號)。
    CSS 檔案的第一行描述了「@charset"UTF-8";」,這是用來防止原始碼變成亂碼。
    如果把 CSS 原始碼寫在這一行之前,就會出現錯誤。
    https://ithelp.ithome.com.tw/upload/images/20221003/20152216PPQ9HkszTl.png

    • 顏色可以隨自己喜好做調整。
  • 在 HTML 檔案的 < head > 內載入 CSS 檔案

    再來請打開之前建過的的 index.html
    於 < head > 內加入 <link rel= "stylesheet" href= "../css/style.css">
    即可載入 CSS。
    https://ithelp.ithome.com.tw/upload/images/20221003/20152216FM96xyS9lY.png

  • 使用網頁瀏覽器開啟網頁

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

    沒有 CSS
    https://ithelp.ithome.com.tw/upload/images/20221003/20152216TMWGbVKQp2.png

    有 CSS
    https://ithelp.ithome.com.tw/upload/images/20221003/20152216AEEqMXnUH6.png

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

今天的內容已經開始邁入 CSS 囉!
雖然今天的東西看似很多,但其實跟之前的 HTML 一樣,
我們都要先把最基礎的東西學習好才有辦法進行之後的內容,
當然後面還有很多東西,希望可以在30天內學完...

那麼我是沒魚,這是我的第十七天,有時候真的會差點忘記要發文.../images/emoticon/emoticon29.gif

<上一篇> [Day16]整理常用的 HTML 標籤
<下一篇> [Day18]CSS 的基本寫法


上一篇
[Day16]整理常用的 HTML 標籤
下一篇
[Day18]CSS 的基本寫法
系列文
學習HTML&CSS的30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言