CSS是什麼？網頁樣式表的5大優點與現代寫法

CSS是什麼？CSS（Cascading Style Sheets，層疊樣式表）是一種控制網頁外觀的樣式表語言：HTML 負責網頁的內容與結構，CSS 負責顏色、字型、間距與版面配置。把「內容」和「外觀」分開，帶來 5 個實際的好處：全站樣式一致、載入速度更快、對 SEO 友善、跨瀏覽器相容，以及讓同一份內容自動適應電腦、手機與平板——也就是 RWD 響應式網頁。這 5 點在 2026 年都有官方規範或公開統計可以對照，本文逐一說明。

多米諾資訊科技從業超過 20 年、網頁設計作品累積 465 件，經歷過用表格排版的年代，也持續在健檢中遇到十多年前留下、改一個顏色要動幾十頁的舊網站。本文把 CSS 的觀念與現況整理成非工程師也能讀的版本，您可以拿來理解自己的網站是怎麼運作的，也可以在與網頁設計公司洽談時，聽懂對方在說什麼。網站整體該注意的方向，另見〈網頁設計原則的 5 個關鍵〉。

一、CSS是什麼？和 HTML 的分工一次說清楚

CSS 是層疊樣式表（Cascading Style Sheets）的縮寫，一種專門描述網頁「長什麼樣子」的樣式表語言——它不是程式語言，不處理邏輯運算，只負責外觀。一個網頁可以拆成三層：HTML 是骨架，決定這裡是標題、那裡是段落、圖片放哪；CSS 是外衣，決定標題多大、段落什麼顏色、版面怎麼排；JavaScript 是動作，處理互動與運算。舊版文章把 CSS 稱為「一種程式語言」，嚴格說並不精確——正因為它只管外觀、規則單純，才能讓不會寫程式的人也看懂樣式表在做什麼。

「層疊」（cascading）指的是規則有優先順序：同一段文字可能同時被好幾條規則描述，瀏覽器會依規則的具體程度與先後順序決定最後套用哪一條。對企業主來說，這個機制的實際意義是——網站可以先定一套全站通用的樣式，再讓個別頁面只覆寫需要不同的部分，不必每頁從頭寫起。

二、CSS 如何運作？一支樣式表管全站

CSS 最常見的使用方式，是把樣式規則集中寫在獨立的 .css 檔案裡，全站每一頁都連結同一支檔案——訪客第一次進站時下載一次，瀏覽器把它快取起來，之後翻到任何一頁都直接重用，不必重新下載。這就是舊版文章所說「減少下載頻寬」的正確原理：不是檔案「儲存於網站之外」，而是「下載一次、全站共用」。相反地，把樣式直接寫死在每一頁的 HTML 裡（早年表格排版搭配行內樣式的做法），每一頁都得重複傳輸同樣的排版碼，頁頁都變胖。

依 HTTP Archive《Web Almanac 2024》對近 1,700 萬個網站的統計，行動版網頁的 CSS 中位數約 73 KB、平均載入 8 支 CSS 檔案；整頁中位數重量則達 2,311 KB。樣式集中管理不只省流量，更重要的是省人力——我們自己站上的每一篇文章，就是共用同一套文章樣式，調整一次行距或表格樣式，所有文章同步生效。

三、為什麼網站不再用表格排版？

表格排版被淘汰不是流行問題，而是規範明文禁止：HTML 現行規範（WHATWG）寫明「表格不得作為排版輔助工具」（Tables must not be used as layout aids），理由是它會讓螢幕閱讀器等輔助工具的使用者難以瀏覽網頁。表格（table）的本意是呈現資料——像本文的表 1 那樣有欄有列、每格有意義；早年因為 CSS 尚未成熟，設計師拿表格的格子當版面切割工具，把整個網站塞進一個看不見的大表格裡。

2026 年回頭看，表格排版還有兩個更致命的問題。第一是手機：表格的欄寬是固定結構，無法隨螢幕寬度重新排列，手機上只能左右捲動或整頁縮小。第二是索引：Google 已於 2023 年 10 月宣布行動優先索引（mobile-first indexing）全面完成，並自 2024 年 7 月 5 日起僅以智慧型手機版 Googlebot 檢索網站——手機上無法正常瀏覽的網站，將不再被 Google 收錄。一個因表格排版而在手機上不能看的網站，問題已經不是「排名不好」，而是「可能從搜尋結果消失」。

四、CSS 優點一：全站一致，改一處等於改全站

CSS 對企業網站最直接的價值，是把「樣式」變成一份集中管理的資產：品牌色、字型、按鈕樣式定義一次，全站每一頁自動套用，改一處等於改全站。網站規模愈大，這個優點放大得愈明顯——20 頁的網站逐頁改還撐得住，200 頁的購物網站或內容站，沒有集中管理的樣式表根本無法維護。這一點舊版文章說得沒錯，2026 年依然成立。

一致性同時是品牌信任的一部分：訪客從首頁點到內頁，如果字型、配色、按鈕樣式跳來跳去，感受到的不是豐富而是「這個網站沒人管」。我們在健檢舊網站時，常見的狀況是網站經手過多個廠商，每個時期的頁面各有各的樣式——這種網站幾乎都伴隨著行內樣式與排版表格的堆積，也是我們評估改版時把「樣式是否集中」列為第一個檢查點的原因。品牌識別在網站上如何保持一致，可參考〈網頁設計原則〉的第二個原則。

五、CSS 優點二：網站速度與 Core Web Vitals

CSS 影響速度的關鍵在於：瀏覽器預設會等 CSS 下載並解析完成才開始繪製畫面（render-blocking，妨礙轉譯）——樣式表愈臃腫、支數愈多，訪客看到第一個畫面的時間就愈晚。速度的客觀標準是 Google 的 Core Web Vitals（網站使用體驗核心指標）：最大內容繪製 LCP 應在 2.5 秒內、互動延遲 INP 應在 200 毫秒內、版面位移 CLS 應在 0.1 以下，並以 75% 的造訪達標為判定基準（web.dev，2024 年更新）。三項指標中，LCP 與 CLS 都和 CSS 的寫法直接相關。

實務上的做法有三個層次：把首屏需要的關鍵樣式內嵌在頁面裡、讓其餘樣式延後載入（Google Lighthouse 檢測工具的標準建議）；壓縮並合併樣式表，避免載入用不到的規則；版面預留圖片與廣告位置的尺寸，避免載入過程中內容跳動推高 CLS。這些聽起來技術，但檢驗很簡單——用 Google 免費的 PageSpeed Insights 輸入網址，不達標的項目會直接列出來。上線前該驗的完整清單，我們整理在〈SEO網頁設計上線前必驗 15 項〉。

六、CSS 優點三：對 SEO 友善，但重點不是「程式碼變少」

CSS 對 SEO（Search Engine Optimization，搜尋引擎優化）的幫助是真的，但原因和舊版文章寫的不同：不是「程式碼變少所以排名變好」，而是結構乾淨讓搜尋引擎容易理解內容、速度達標滿足網頁體驗指標、樣式與內容分離讓手機版正常呈現。Google 在網頁體驗官方文件中明確表示 Core Web Vitals「被我們的排名系統使用」，但同時強調相關性優先——內容不相關，體驗再好也排不上去。把 CSS 做好是消除扣分項，不是取得加分項。

與 CSS 相關、實際會影響收錄與排名的注意事項有三個。第一，不要用 robots.txt 封鎖 CSS 檔案：Google 官方文件明確要求讓 Googlebot 讀取網站資源，讀不到樣式表，Google 就無法確認頁面在手機上是否正常。第二，行動版內容是唯一依據：行動優先索引之下，Google 用手機版 Googlebot 看到的內容做索引與排名，CSS 把手機版做壞，等於把給 Google 看的版本做壞。第三，不要用 CSS 藏文字：把關鍵字用與背景同色、或移出畫面的方式塞給搜尋引擎，屬於違反垃圾內容政策的隱藏文字手法，風險是人工處置。這類該避免的做法，與其他常見錯誤一起整理在〈網頁設計常見錯誤〉。

七、CSS 優點四：瀏覽器相容性——用 Baseline 判斷，不用逐一測試

「CSS 幾乎相容於所有瀏覽器」這句話，對基礎功能成立，對新功能則要看 Baseline：一套由 Chrome、Edge、Firefox、Safari 四大瀏覽器家族共同定義的公開相容性標準——功能在四家瀏覽器都支援後標為「新可用」（Newly available），滿 30 個月再標為「廣泛可用」（Widely available），多數網站可放心使用。IE 時代「同一個網站每家瀏覽器長得不一樣」的惡夢已經過去，但新功能仍有時間差，Baseline 就是判斷「現在能不能用」的依據。

CSS 本身也還在進化。依 HTTP Archive《Web Almanac 2022》的統計，彈性盒（flexbox）已用於 74% 的網頁、格線（grid）為 12%、自訂屬性（CSS 變數）為 43%——這些現代排版技術取代的正是早年的表格與浮動排版；近年加入的容器查詢（container queries）則讓元件能依「所在容器」而非整個螢幕的寬度調整樣式。對企業主來說，這些名詞不必記，要問廠商的只有一句：「你們用到的 CSS 功能，是不是 Baseline 廣泛可用？如果不是，舊瀏覽器上的替代方案是什麼？」——答得出來，相容性就有人把關。

八、CSS 優點五：RWD 響應式——一份內容適應所有裝置

RWD（Responsive Web Design，回應式／響應式網頁設計）是用 CSS 的媒體查詢（media query）偵測螢幕寬度、讓同一份 HTML 在電腦、手機與平板上自動變換版面的做法——Google 官方文件明列「建議採用回應式網頁設計，因為它最容易實作與維護」。舊版文章說「CSS 能判斷您使用的螢幕大小」，指的就是這件事；媒體查詢也是最普及的 CSS 功能之一，《Web Almanac 2022》統計 max-width 條件用於 83% 的網頁。

RWD 的價值在行動優先索引之後更放大：一份內容、一個網址，電腦版與手機版天生相同，不會發生「手機版內容比較少、被 Google 少收錄」的問題。台灣的中小企業網站流量普遍以手機為主，我們現在的專案一律以 RWD 為預設做法，報價與方案內容可見RWD 方案說明。您可以現在就拿起手機開自己的網站：需要縮放才能閱讀、按鈕小到按不準、表格撐破畫面——任何一項成立，網站大概率還停留在 RWD 之前的年代。

九、還在表格排版的舊網站該改版嗎？我們的 4 個判斷標準

不是每個舊網站都要立刻重做，但「手機上不能正常瀏覽」的網站例外——2024 年 7 月之後它面對的是收錄問題，不是美觀問題。舊版文章勸大家「還等什麼呢」，我們的實務經驗更保守一點：改版是一筆真實的時間與費用，值不值得，用下面 4 個問題判斷。這也是我們接到舊網站健檢委託時，實際使用的評估順序。

1. 手機上能不能正常瀏覽？不能——這是唯一建議立刻處理的情況。Google 自 2024 年 7 月 5 日起只用手機版 Googlebot 檢索，手機上不能看的網站會逐漸從搜尋結果消失，等於網站的行銷功能歸零。
2. 修補划算，還是重做划算？在表格排版的舊架構上「加一個手機版」，通常是把新問題疊在舊問題上；我們的經驗是超過十年的表格排版網站，重做幾乎都比修補便宜——因為修補要先讀懂當年的排版邏輯，而那份工時往往超過重寫。
3. 內容還有沒有價值？網站的公司介紹、產品資料、文章如果還是現行有效的，改版就是「換架構、保內容」，成本可控；內容本身已過時，該花的預算在內容重整，架構順勢一起換。
4. 要不要順便把基礎一次補齊？既然要改，HTTPS、RWD、網址結構、速度指標一次到位，比分次施工便宜；改版時該注意的事項不只 CSS，建議把上線前驗收清單一起排進時程。

判斷不了的，最快的方式是讓專業者看一眼：舊網站的架構問題多半在原始碼第一屏就看得出來，不需要漫長的評估期。

十、CSS 常見問題

十一、結論：CSS 是網站的基礎建設，不是加分題

回到「CSS是什麼」這個問題：它是讓網站的內容與外觀分工的樣式表語言，而這個分工在 2026 年決定的不只是好看，還包括網站改得動、跑得快、手機能讀、Google 願不願意收錄。對新網站來說，CSS 排版與 RWD 已是理所當然的預設，不需要特別要求；真正需要行動的是還停在表格排版年代的舊網站——它的問題會隨著行動優先索引的推進愈來愈重，而且不會自己好轉。用第九節的 4 個判斷標準對照一輪，多數情況下答案會自己浮現。