認識 CSS
CSS ( Cascading Style Sheets ) 是一種用於網頁設計的樣式語言，可以控制網頁的外觀和版面，讓網頁呈現出美觀且結構清晰的效果，這篇教學裡將會探討什麼是 CSS、相關發展歷程、特色以及對響應式設計的影響。最後還會用一個簡單的範例，實際撰寫第一支 CSS 程式。
快速導覽：
CSS 是什麼？
CSS 是 Cascading Style Sheets 的縮寫，又稱作層疊樣式表、階層式樣式表，是一種用於「控制網頁外觀和佈局的樣式表語言」，透過 CSS，可以控制網頁的字體、顏色、邊框、背景等設計風格，並且將樣式套用到網頁的不同元素，進而精準控制網頁的視覺呈現，使網頁更具吸引力和互動性。
雖然 CSS 扮演著網頁視覺風格和排版的重要角色，但 CSS 無法獨立使用，必須與 HTML 搭配，才能發揮最大的功能。
CSS 的發展歷程、版本演進
CSS 的發展歷程可以追溯到 1994 年，由哈肯·維姆·萊 ( Håkon Wium Lie ) 提出了 CSS 的最初規劃，雖然當時已經有一些樣式表語言的架構，但 CSS 是第一個含有「層疊」概念的樣式語言，隨著時間的推移，CSS 不斷發展並推出了多個版本，以下是 CSS 的版本演進：
- CSS1 ( 1996 )：CSS 的第一個正式版本，定義了基本的樣式屬性和選擇器，能夠對網頁進行基本的樣式設定。
- CSS2 ( 1998 )：進一步擴展樣式的功能，支援更多的版面設計技巧，並加入了更多的屬性、選擇器和媒體查詢 ( Media Queries ) 概念，使網頁能夠根據不同的輸出設備進行適應性調整。
- CSS3 ( 2001 年至今 )：目前最新的 CSS 版本，進一步擴展樣式的功能和選擇器的範圍，引入許多新的模塊，如彈性盒子 ( Flexbox )、方格布局 ( Grid Layout )、動畫 ( Animation ) 等，使得網頁設計更加靈活和豐富。
- CSS4 ( 開發中 )：尚未正式推出，預計將繼續擴展 CSS 的功能和選擇器，並加強對響應式設計的支援。
CSS 和 HTML、JavaScript 的關係
CSS、HTML 和 JavaScript 是網頁開發的三大核心技術，各自負責不同的任務，並相互協作以實現完整的網頁功能：
- HTML：負責「定義網頁的結構和內容」，使用標籤來描述網頁中的不同元素，可想像成靜止的「全裸人體」。
- CSS：負責「控制網頁的外觀和版面」，使用選擇器和屬性來定義 HTML 裡元素的樣式，如顏色、字體、邊框等，可想像成替全裸的人體加上「膚色、髮色、化妝、衣物...等」裝扮。
- JavaScript：負責「實現網頁的動態效果和互動性」，透過操作 HTML 和 CSS，實現網頁的互動功能或改變網頁元素的外觀和行為，可想像成賦予人體「認知、社交、互動」等能力。
CSS 的特色
CSS 有下列幾個特色：
- 分離性：CSS 可以將網頁的樣式和內容分離，使得網頁設計更加模組化和可維護。
- 階層性：CSS 使用層疊樣式表的概念，允許開發者為不同的元素定義不同的樣式，並透過嵌套和繼承的方式來控制樣式的層級。
- 可重用性：CSS 提供樣式的重用機制，可以將相同的樣式套用到多個元素上，減少程式碼的重複性。
- 靈活性：CSS 提供豐富的樣式屬性和選擇器，可以實現各種不同的設計效果。
CSS 對於響應式設計的影響
響應式設計是一種能夠「適應不同設備和螢幕尺寸」的網頁設計方法。CSS 在響應式設計中有著非常著重要的作用，透過媒體查詢 ( Media Queries ) 和彈性佈局 ( Flexbox ) 等技術，就能根據不同的設備和螢幕尺寸，自動調整網頁的外觀和排版，以提供更好的用戶體驗。
瀏覽器對 CSS 支援度
大多數現代瀏覽器 ( Chrome、Safari、Edge、Firefox 等 ) 都支援最新的 CSS3 標準，並提供廣泛的功能和屬性支援，但舊版的瀏覽器 ( IE 等 ) 可能不完全支援最新的 CSS 功能，這也常導致在不同瀏覽器上顯示的外觀有所差異，下方網站可以詳細查詢瀏覽器對於 CSS 各個功能的支援度：
點擊或出入要查詢的功能名稱，就能看見瀏覽器對於該功能的支援度，下方查詢「CSS Flexible Box Layout Module」，可以看到大多數的瀏覽器都支援 ( 呈現綠色 )，只有少數舊版瀏覽器不支援 ( 呈現紅色或黃綠色 )。
撰寫第一個 CSS 程式
以下是一個簡單的 CSS 程式範例，程式裡使用了 CSS 的選擇器 h1 和 p，分別設定標題和段落元素的顏色和字體大小。
HTML 教學參考：HTML 教學
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS 區塊 */
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h1>STEAM 教育學習網 CSS 測試</h1>
<p>這是一個測試的網頁。</p>
</body>
</html>
將範例程式碼複製，貼到線上網頁編輯器裡 ( 例如 JSBin )，就會看見藍色標題和紅色的段落文字。
小結
CSS 是網頁開發的三大核心技術之一，舉凡所有的網頁設計或網頁開發，一定會需要使用 CSS 進行開發，希望這篇文章可以讓大家初步認識 CSS 的重要性和應用，並激發大家對 CSS 的興趣和探索的慾望。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～