CSS 是什麼？控制網頁外觀與排版的樣式表語言
CSS 是 Cascading Style Sheets 的縮寫，中文常稱為「階層式樣式表」或「層疊樣式表」，主要用來設定網頁的字體、顏色、背景、間距、版面配置與動畫效果。
如果把網頁比喻成一個人，HTML 就像骨架，負責建立內容結構；CSS 則像服裝與造型，決定內容如何呈現。例如，同樣是一段文字，透過 CSS 就能調整成藍色標題、置中的介紹，或具有邊框的資訊卡片。
CSS 的價值不只是美化畫面，也能讓網站在手機、平板與電腦上維持合適的閱讀體驗。將內容結構與視覺樣式分開管理，還能讓多個頁面共用設計規則，減少重複修改的工作。
HTML 是什麼？HTML CSS 是什麼？先理解網頁技術分工
HTML 是 HyperText Markup Language，中文稱為「超文字標記語言」，用來描述網頁內容的結構與意義。例如，標題使用標題元素、文章段落使用 <p>，連結則使用 <a>。
「HTML CSS 是什麼」可以拆成 HTML 與 CSS 兩項技術理解，而不是另一種獨立語言。HTML 決定頁面有哪些內容，CSS 決定這些內容的外觀與排列方式。
JS 是什麼？JavaScript 是什麼？
JS 是 JavaScript 的簡稱，兩者指的是同一種程式語言。在網頁開發中，JavaScript 常用來處理互動與資料更新，例如點擊按鈕後開啟選單、檢查表單欄位，或向伺服器取得資料並更新畫面。
不過，並非所有互動都需要 JavaScript。滑鼠移入時變色、簡單過場動畫等效果，CSS 就能完成；部分展開與收合功能，也可以使用 HTML 原生元素實作。
HTML、CSS、JavaScript 功能比較表
| 技術 | 語言類型 | 主要工作 | 常見應用 |
|---|---|---|---|
| HTML | 標記語言 | 建立內容結構與語意 | 標題、段落、圖片、表單 |
| CSS | 樣式表語言 | 控制視覺外觀與版面 | 字色、間距、多欄排版、動畫 |
| JavaScript | 程式語言 | 處理邏輯、事件與資料 | 動態更新、互動控制、資料請求 |
製作基礎內容頁面，可以先使用 HTML 與 CSS；需要較複雜的操作流程或動態資料時，再加入 JavaScript。
CSS 是程式語言嗎？正確理解 CSS 的定位
CSS 通常分類為樣式表語言，而不是一般用途的程式語言，也不是標記語言。它主要透過宣告規則，告訴瀏覽器特定元素應該呈現什麼樣式，而不是逐步指定一連串執行指令。
現代 CSS 已具備自訂屬性、計算函式與條件式樣式等能力。例如，calc() 可以計算尺寸，媒體查詢可以依視窗條件套用不同規則，但其核心用途仍是描述畫面的呈現方式。
因此，學習 CSS 不只是記住屬性名稱，更重要的是理解選取器、層疊規則、盒模型與版面配置。
CSS 怎麼寫？從一個標題範例開始
CSS 的基本語法由「選取器」與「宣告區塊」組成。宣告區塊放在大括號中，每項宣告包含屬性與屬性值，中間使用冒號連接。
HTML 與 CSS 對照範例
先在 HTML 建立一個
<h1 class="page-title">我的第一個網頁</h1>再使用 CSS 設定外觀：
.page-title {
color: #175cd3;
font-size: 2rem;
line-height: 1.3;
}這裡的 .page-title 是類別選取器，會選取具有 page-title 類別的元素。color 控制文字顏色，font-size 設定字級，line-height 則控制行高。
初學時可以先修改其中一個值，觀察畫面變化，再逐步加入其他樣式，比一次貼上大量規則更容易理解。
HTML 如何加入 CSS？三種常見方式
行內樣式：直接寫在元素上
行內樣式是把 CSS 放進 HTML 元素的 style 屬性：
<p style="color: blue;">這是一段藍色文字。</p>這種方式適合快速測試或少量特殊設定，但如果每個元素都重複撰寫樣式，後續維護會比較繁瑣。
內部樣式表：放在同一份 HTML 文件
內部樣式表通常寫在 <head> 裡的 <style> 元素中：
<style>
p {
color: #333;
line-height: 1.8;
}
</style>適合單頁練習與小型示範，能在同一份文件內查看內容與樣式。
外部樣式表：使用獨立的 .css 檔案
將樣式儲存為 style.css，再於 HTML 的 <head> 加入：
<link rel="stylesheet" href="style.css">外部樣式表方便多個頁面共用。需要調整全站配色或字體時，可以集中修改規則；瀏覽器也能在快取設定允許時重複利用已下載的檔案。
CSS 大全入門重點：先學會最常用的樣式功能
CSS 屬性很多，不必一開始就全部背下來。先掌握文字、尺寸、間距與排版，便能完成多數基礎頁面。
文字與背景：建立清楚的閱讀層次
font-family 設定字體，font-size 控制字級，font-weight 調整粗細，color 決定文字顏色；背景色則使用 background-color。
文章頁面除了標題醒目，也應照顧內文行高與文字、背景之間的對比。避免只靠顏色區分重要資訊，搭配文字標示能讓內容更容易理解。
盒模型：釐清內容、內距、邊框與外距
網頁上的元素可以用盒模型理解，從內到外分別是內容、內距（padding）、邊框（border）與外距（margin）。
例如，卡片文字太靠近邊框，通常應增加 padding；兩張卡片距離太近，則可以調整 margin，或在父層排版中使用 gap。
常見設定是 box-sizing: border-box，讓指定的寬度包含內容、內距與邊框，尺寸較容易掌握；外距不包含在其中。
Flexbox 與 Grid：處理版面配置
Flexbox 適合處理單一方向的排列，例如導覽列、按鈕群組與水平對齊。Grid 則適合同時安排列與欄，例如產品列表或多區塊版面。
兩者可以搭配使用：外層用 Grid 建立卡片網格，卡片內部再用 Flexbox 排列圖示與文字，不需要把所有排版需求都交給同一種工具。
響應式設計：讓版面配合螢幕寬度
響應式設計會依可用空間調整內容，而不是把桌面版頁面直接縮小。以下範例預設單欄，當視窗寬度達到設定條件時改成雙欄：
.card-list {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 48rem) {
.card-list {
grid-template-columns: repeat(2, 1fr);
}
}實際斷點應依內容是否擁擠、文字是否易讀決定，不必只按照特定裝置名稱設定。HTML 也通常需要搭配適當的 viewport 設定，讓行動裝置依裝置寬度呈現版面。
CSS 如何決定套用哪一條規則？
同一個元素可能同時符合多條 CSS 規則，瀏覽器會透過層疊機制決定最後採用的樣式。
不是所有情況都「後寫的優先」
判定過程會考慮樣式來源、重要性、層疊層與選取器權重等因素。在相關條件相同時，較後出現的宣告才會勝出。
例如，在同一層、相同重要性的規則中，類別選取器通常比元素選取器更具權重：
.notice {
color: red;
}
p {
color: black;
}如果段落具有 notice 類別，文字仍會呈現紅色，不能只看哪一段寫在後面。
繼承讓文字樣式不必逐一設定
部分屬性會由父元素傳給子元素，例如文字顏色與字體。設定整個頁面的基本字體後，許多內部元素就能沿用。
但 margin、padding、border 等屬性通常不會自動繼承，因此不能假設父層有設定，所有子元素就會得到相同效果。
CSS 沒有效果時，如何找出原因？
先檢查檔案載入與選取器
確認 <link> 的路徑與檔名正確，再檢查 HTML 的 class 是否與 CSS 一致。類別選取器前面需要加上句點，例如 .card；遺漏句點會改變選取器的意思。
接著查看語法，確認大括號、冒號與屬性值是否正確。瀏覽器通常會忽略無法辨識的宣告，因此部分規則失效，不代表整份樣式表都沒有載入。
使用開發者工具查看實際樣式
瀏覽器開發者工具可以檢查元素套用了哪些規則、哪些宣告被覆蓋，以及最後計算出的尺寸。
如果宣告被劃掉，先確認覆蓋來源，而不是立即加入 !important。若修改後畫面沒有更新，也可以檢查快取與載入中的檔案，確認瀏覽器使用的是目前版本。
結論：從結構與樣式分工開始學會 CSS
CSS 是控制網頁外觀與排版的核心技術。HTML 建立內容結構，CSS 負責視覺呈現，JavaScript 則處理更進一步的互動與邏輯。
入門時先完成一張包含標題、圖片與按鈕的卡片，再練習盒模型、Flexbox、Grid 與響應式配置。透過實際修改與開發者工具觀察結果，比單純背誦屬性更能建立穩定的理解。
常見問題（FAQ）
1. 學 CSS 之前一定要先學 HTML 嗎？
建議先認識基本 HTML 元素與 class 屬性，再搭配 CSS 練習。不必等到精通 HTML 才開始，兩者交替學習更容易理解結構與外觀之間的關係。
2. 寫 CSS 需要安裝特殊軟體嗎？
不需要專用付費軟體。使用能儲存純文字檔案的編輯器與瀏覽器，就能開始練習；具備語法提示的程式碼編輯器則能協助減少輸入錯誤。
3. CSS 一定要另外存成檔案嗎？
不一定，也能使用行內樣式或內部樣式表。當網站有多個頁面，或樣式規則逐漸增加時，獨立的 .css 檔案通常更方便管理。
4. 不同瀏覽器的 CSS 效果都一樣嗎？
常用功能通常具有廣泛支援，但較新的功能仍可能有支援程度差異。使用新語法前，可查閱 MDN Web Docs 的相容性資訊，並在網站預計支援的瀏覽器測試。
5. CSS 能讓網站的搜尋排名提高嗎？
CSS 不是加入後就能直接提高排名的工具。良好的排版、行動裝置呈現與載入效率有助於使用體驗，但排名仍涉及內容品質、可檢索性等多項因素。
6. CSS 游泳與網頁設計的 CSS 有關嗎？
沒有直接關係。游泳訓練中的 CSS 常指 Critical Swim Speed，通常譯為「臨界游泳速度」，與網頁設計的 Cascading Style Sheets 是不同領域的縮寫。