在現代網頁設計裡，CSS（層疊樣式表，Cascading Style Sheets）的分量很重。它不只是拿來美化網頁的工具，網頁設計師和開發者也靠它做出豐富、有互動感、又吸引人的使用者體驗。這篇就來聊聊CSS到底能做到哪些事，以及它在網頁設計中的幾種常見應用。
1. CSS的基本概念
CSS是一種樣式語言，用來描述HTML或XML文件的外觀。它讓開發者把樣式和內容分開處理，網頁改起來更有彈性，也比較好維護。CSS的基本結構由選擇器（selector）和宣告（declaration）組成：選擇器指定要套用樣式的HTML元素，宣告則包含屬性（property）和值（value），用來定義這些元素實際要長什麼樣子。
例如，下面是一段簡單的CSS程式碼：
h1 {
color: blue;
font-size: 24px;
}
這段程式碼會把所有<h1>標籤的文字設成藍色，字體大小設為24像素。
2. CSS的優勢
CSS好用的地方，在於它夠靈活，也容易擴充。下面列出幾個主要優點：
2.1 分離內容與樣式
CSS讓開發者把樣式和HTML內容分開，HTML文件因此更簡潔，也更好維護。要調整樣式時，只要更新CSS檔案就好，不必動到HTML結構。
2.2 重複使用樣式
同一份CSS樣式可以在多個頁面重複使用。這樣能省下不少時間，整個網站的風格也比較容易保持統一。做法很簡單：在一個CSS檔案裡定義好樣式，再讓各個HTML檔案引用它就行了。
2.3 提高頁面載入速度
瀏覽器可以快取CSS檔案，所以使用者在同一個網站瀏覽多個頁面時，CSS檔案只需要載入一次，頁面的載入速度自然會快一些。
2.4 響應式設計
CSS的媒體查詢（media queries）功能，讓開發者可以針對不同的裝置和螢幕尺寸設定不同的樣式。這點在現代網頁設計裡特別重要，因為使用者可能用手機、平板或桌上型電腦來瀏覽網站。
3. CSS的應用
CSS的用途很廣，以下是幾個常見的應用情境：
3.1 佈局設計
CSS有好幾種排版技術，像是浮動（float）、彈性盒子（Flexbox）和網格佈局（Grid Layout）。有了這些工具，開發者可以做出複雜又有彈性的版面，因應各種不同的設計需求。
例如，用Flexbox就能輕鬆做出水平、垂直都置中的版面：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
3.2 動畫和過渡
CSS3加入了動畫（animations）和過渡（transitions）功能，開發者可以做出流暢的動態效果，讓使用體驗更好。像下面這段程式碼，就是一個簡單的淡入效果：
.fade-in {
opacity: 0;
transition: opacity 2s;
}
.fade-in:hover {
opacity: 1;
}
3.3 自訂字型和圖示
CSS可以讓網站使用自訂字型和圖示，做出更有辨識度、也更吸引人的畫面。透過@font-face規則，就能把自訂字型嵌入網站：
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2');
}
body {
font-family: 'MyCustomFont', sans-serif;
}
3.4 響應式設計
前面提過，CSS的媒體查詢可以針對不同裝置套用不同的樣式。例如下面這段程式碼，會在寬度小於600像素的裝置上改用另一種排版：
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
4. CSS的未來
網頁技術一直在發展，CSS也跟著持續演進。CSS4的部分功能，例如CSS變數（CSS Variables）和網格佈局（Grid Layout），已經有一些瀏覽器支援。這些新功能讓CSS能做的事更多，網頁設計也更有彈性。
4.1 CSS變數
CSS變數讓開發者先定義好可以重複使用的值，樣式改起來更有彈性，也更好維護。例如：
:root {
--main-color: #3498db;
}
body {
color: var(--main-color);
}
4.2 網格佈局
網格佈局是一套功能完整的排版系統，開發者不必靠浮動或彈性盒子，就能做出複雜的版面。例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
了解CSS在樣式分離、載入速度與響應式設計上的作用後，再回頭看企業架站，會發現前端樣式寫得有沒有條理，會直接影響日後改版與維護的成本。規劃網站時，不妨把CSS架構與跨裝置的呈現方式一併納入評估。