搜尋

HTML 套用 CSS 樣式

如果說 HTML 負責建構網頁的骨架,CSS 就是負責處理網頁的外觀,這篇教學將會介紹 HTML 裡三種套用 CSS 的方法。

快速導覽:

所有範例可使用 JS BinCodePenJSFiddle 進行線上實作,或使用筆記本編輯,不用安裝任何軟體 ( 參考:使用 HTML 編輯器 )

什麼是 CSS?

CSS 是 階層樣式表 ( Cascading Stylesheets ) 的縮寫,既非標準程式語言,也不是標記語言, 而是一種風格頁面語言,CSS 能在不同的 HTML 元素上頭,套用不同的樣式,例如顏色、字體、文字大小、間距、定位和佈局方式...等,只要是攸關網頁樣式的設定,幾乎都是透過 CSS 進行處理 ( 從 HTML5 開始,語法規範中也捨棄了許多單純透過 HTML 調整樣式的元件屬性 )。

套用 CSS 的三種方法

要在 HTML 套用 CSS,有下列三種方法:

  • 行內撰寫 ( Inline ):直接在元素標籤的 style 屬性撰寫樣式。
  • 內部撰寫 ( Internal ):在 HTML 裡的 <style></style> 標籤裡撰寫樣式。
  • 外部載入 ( External ):透過 HTML 的 <link rel="styelsheet" href="style.css"> 標籤載入外部樣式檔案。

行內撰寫 ( Inline )

「行內撰寫 ( Inline )」方法表示「直接在元素標籤的 style 屬性裡撰寫 CSS 樣式語法」,例如下方的範例,網頁開啟後會出現三段不同顏色的文字。

<h2 style="color:#f00;">我是紅色!</h2>
<h2 style="color:#00f;">我是藍色!</h2>
<h2 style="color:#0a0;">我是綠色!</h2>

HTML 教學 - HTML 套用 CSS 樣式 - 行內撰寫 ( Inline ) 套用 CSS 樣式

由於行內撰寫 ( Inline ) 方法的「權重」為第二高 ( 通常第一高是使用 !important ),使用後容易覆蓋掉內部與外部套用的 CSS 樣式,以下方的例子,例如下方的範例,雖然有使用 <style></style> 撰寫樣式,但因為權重較小,網頁仍然會出現三段不同顏色的文字。

<style>
  h2{
    color:#000;
  }
</style>
<h2 style="color:#f00;">我是紅色!</h2>
<h2 style="color:#00f;">我是藍色!</h2>
<h2 style="color:#0a0;">我是綠色!</h2>

HTML 教學 - HTML 套用 CSS 樣式 - 行內撰寫 ( Inline ) 套用 CSS 樣式

內部撰寫 ( Internal )

「內部撰寫 ( Internal )」方法表示「在 HTML 裡的 <style></style> 標籤裡撰寫樣式」( 通常會將 <style></style> 放在 <head></head> 裡 ),例如下方的範例,網頁開啟後會出現三段不同顏色的文字。

<style>
  h2{
    color:#f00;
  }
  h3{
    color:#00f;
  }
  h4{
    color:#0a0;
  }
</style>
<h2>我是紅色!</h2>
<h3>我是藍色!</h3>
<h4>我是綠色!</h4>

HTML 教學 - HTML 套用 CSS 樣式 - 內部撰寫 ( Internal ) 套用 CSS 樣式

使用 內部撰寫 ( Internal ) 或 外部載入 ( External ) 方法,通常都會搭配「CSS 選擇器」( 選擇 tag 名稱、class、id 或屬性 ) 一起使用,例如下方的範例,網頁開啟後會分別將樣式套用到不同的 class 裡,出現三段不同顏色的文字。

<style>
  .rb{
    color:#f00;
  }
  .bb{
    color:#00f;
  }
  .gb{
    color:#0a0;
  }
</style>
<h2 class="rb">我是紅色!</h2>
<h2 class="bb">我是藍色!</h2>
<h2 class="gb">我是綠色!</h2>

HTML 教學 - HTML 套用 CSS 樣式 - 內部撰寫 ( Internal ) 套用 CSS 樣式

外部載入 ( External )

「外部載入 ( External )」方法表示「透過 HTML 的 <link rel="styelsheet" href="style.css"> 標籤載入外部樣式檔案」( 通常會將 <link> 放在 <head></head> 裡 ),例如下方的範例,網頁開啟後會載入外部的 style.css 檔案,讓網頁出現三段不同顏色的文字。

外部 style.css 內容:

.rb{
  color:#f00;
}
.bb{
  color:#00f;
}
.gb{
  color:#0a0;
}

HTML 內容:

<link rel="stylesheet" href="style.css">
<h2 class="rb">我是紅色!</h2>
<h2 class="bb">我是藍色!</h2>
<h2 class="gb">我是綠色!</h2>

HTML 教學 - HTML 套用 CSS 樣式 - 外部載入 ( Internal ) 套用 CSS 樣式

小結

通常 HTML 和 CSS 有著密不可分的關係,就如同人體的骨架和外皮是同等重要,因此在熟悉 HTML 語法之後,下一步就會接續學習 CSS 樣式囉!

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片