如果說 HTML 負責建構網頁的骨架,CSS 就是負責處理網頁的外觀,這篇教學將會介紹 HTML 裡三種套用 CSS 的方法。
原文參考:HTML 套用 CSS 樣式
所有範例可使用 JS Bin、CodePen 或 JSFiddle 進行線上實作,或使用筆記本編輯,不用安裝任何軟體 ( 參考:使用 HTML 編輯器 )
CSS 是 階層樣式表 ( Cascading Stylesheets ) 的縮寫,既非標準程式語言,也不是標記語言, 而是一種風格頁面語言,CSS 能在不同的 HTML 元素上頭,套用不同的樣式,例如顏色、字體、文字大小、間距、定位和佈局方式...等,只要是攸關網頁樣式的設定,幾乎都是透過 CSS 進行處理 ( 從 HTML5 開始,語法規範中也捨棄了許多單純透過 HTML 調整樣式的元件屬性 )。
要在 HTML 套用 CSS,有下列三種方法:
- 行內撰寫 ( Inline ):直接在元素標籤的 style 屬性撰寫樣式。
- 內部撰寫 ( Internal ):在 HTML 裡的
<style></style>
標籤裡撰寫樣式。- 外部載入 ( External ):透過 HTML 的
<link rel="styelsheet" href="style.css">
標籤載入外部樣式檔案。
「行內撰寫 ( Inline )」方法表示「直接在元素標籤的 style 屬性裡撰寫 CSS 樣式語法」,例如下方的範例,網頁開啟後會出現三段不同顏色的文字。
<h2 style="color:#f00;">我是紅色!</h2>
<h2 style="color:#00f;">我是藍色!</h2>
<h2 style="color:#0a0;">我是綠色!</h2>
由於行內撰寫 ( 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>
「內部撰寫 ( 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>
使用 內部撰寫 ( 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>
「外部載入 ( 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 和 CSS 有著密不可分的關係,就如同人體的骨架和外皮是同等重要,因此在熟悉 HTML 語法之後,下一步就會接續學習 CSS 樣式囉!
大家好,我是 OXXO,是個即將邁入中年的斜槓青年,我有個超過一千篇教學的 STEAM 教育學習網,有興趣可以參考下方連結呦~ ^_^