iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Modern Web

跟著 OXXO 一起學 HTML系列 第 13

( Day 8.1 ) HTML 套用 CSS 樣式

  • 分享至 

  • xImage
  •  

如果說 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 樣式囉!

更多教學

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,我有個超過一千篇教學的 STEAM 教育學習網,有興趣可以參考下方連結呦~ ^_^


上一篇
( Day 7.2 ) 如何觀察 HTML 原始碼
下一篇
( Day 8.2 ) HTML 套用 JavaScript
系列文
跟著 OXXO 一起學 HTML90
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言