CSS 是什麼？
CSS 是 “Cascading Style Sheets” 的縮寫，中文譯為”層疊樣式表”。CSS 是一種標記語言，它的主要功能是為結構化文件（如 HTML 文件或 XML 應用）添加風格（字體、間距和顏色等）。
網頁設計，仰賴 HTML 和 CSS 兩種不同的語言。HTML 處理內容，CSS 則定義內容呈現，各司其職。而在現代網頁設計工作、如一個大型開發專案中，我們通常也會看到有工程師專注處理網站內容與結構、設計師則處理網站的設計與呈現。
本文將協助你開始使用 CSS、理解 CSS 怎麼連結 HTML 文件、認識 CSS 語法規則；也瞭解怎麼開始練基本功，踏出網頁設計的第一步。
系統學習 HTML/CSS/JavaScript，3 分鐘小測驗，找到你的學習起點
CSS 和 HTML 的分工
CSS 是專為定義網頁版面設計（layout）而發明，透過 CSS，我們能指定文件中各項 HTML 元件的視覺樣式。CSS 全名是 Cascading Style Sheets，階層樣式表。階層式 （cascading）指的是，我們可在同一個元件上套用不同樣式，而樣式與樣式間則存在相對的階層關係。
由於 CSS 專注在外貌的設定，使得 HTML 能專注於文件結構，最能讓網頁原始碼文件乾淨俐落。CSS 和 HTML 的分工，是現代網路開發流行的設計原則（Separation of presentation and content）之一。
你可以想像一下 HTML、CSS 和瀏覽器之間的對話。HTML 會說：「這是一個標題。」而 CSS 會和瀏覽器則會補充：「這個標題很大，請放在正中間、請使用顯眼的黑色。」
接下來，我們一起來瞭解，如何用 CSS 輕鬆的把所有的副標都改好。
CSS 語法規則
以這段 CSS 為例：
h1 {
color: #ff6600;
}
這段是一個 CSS 宣告的長相：
- 選擇器 (selector) 定義你的樣式對誰有作用，它對應的可能是 HTML 標籤名稱或者是 class 和 id 屬性，我們在後面會再介紹選擇器。
- { }：大括號包圍了一個宣告區域，任何寫在這個區域裡的設定，會對文件裡所有的 <h1> 標籤起作用。</h1>
- 屬性與值：在圖例中，我們宣告選擇器，也就是 <h1> 的「文字顏色」(color) 屬性的值是 #ff6600。請注意 CSS 是用冒號 ( : ) 而非等號 (=) 來設定。</h1>
- 每條宣告用分號 ( ; ) 隔開
小插曲：#ff6600 是一種顏色編碼，就是程式設計師向電腦表達不同顏色的方法之一。以下是一些顏色的範例。完整的顏色編碼可以參考這個網站。
套用方式
那這段 CSS 宣告要放在哪裡呢？
最好的方式，是獨立在另一個叫「style.css」的檔案裡，再將檔案引入 HTML 文件，我們建議你總是使用這種方式來處理你的樣式表，但在這裡我們還是和你做完整的介紹：
內嵌於 style 屬性
<p style=”color: red; font-size: 10pt;”>一段文字</p>
這種宣告方式只會影響到這一個標籤，而不是所有的 <p>。這是一個很簡便的作法，但 CSS 宣告混合在 HTML 結構中，無法進行管理。你可能會在寫 blog 時偶爾不得不這麼做(因為你無法在別人家的平台上開新檔案)。</p>
在 HTML 內嵌 STYLE 標籤，其效果比較可以從下圖看得出來，左邊是用 Sublime 編輯器在 HTML 裡先寫好，文字是紅色與文字 30pt 大。
標頭裡的 style 標籤
<head></head>
<title></title>CSS 宣告
<style></style>
p { color: black; font-size: 10pt;}
這樣做會讓你影響到這份 HTML 文件裡所有的 <p>，如果你的網站真的只有一張，這不失為一個快速的方法。然而，這樣做同樣有讓語法變得冗長，以及在檔案變多時維護困難的問題。當前的趨勢是將 HTML 和 CSS 分開維護，因此，請你習慣建立外部檔案來管理你的 CSS 樣式表。</p>
外部檔案 (建議方法)
透過這個作法，你可以將整個網站的樣式，統合到 style.css 這份文件裡。然後在所有的 HTML 文件標頭裡加上 <link rel=”stylesheet” href=”style.css”>。再次強調，這種作法是業界的當前趨勢。
讓我們來認識一下引入外部檔案的 HTML 標籤：
- <link> 是一種「後設元素」(meta element)只能放在標頭裡，他可以載入外部檔案。所以瀏覽器讀取到這一行時，就會自動載入 CSS 文件的全部內容。
- rel=’stylesheet’ 告訴文件載入的資源是樣式表，所以瀏覽器就知道要用讀 CSS 的方式去處理載入的內容。
- href=’style.css’ href 屬性和 <a> 標籤時的用法一樣，描述路徑，讓瀏覽器找得到檔案。</a>
註解 (Comment)
要小心 CSS 的註解方式跟 HTML 不一樣，CSS 的註解是用 /* 與 */ 來包圍：
body {
color: #FF6600; /* 這是 Alpha Camp 最喜歡的橘紅色 */
}
多重選擇
你可以連結宣告多個 CSS 設定：
h1 {
font-family: “Helvetica”, “Arial”, sans-serif; /* 指定字型 */
color: green;
}
h2 {
font-family: “Helvetica”, “Arial”, sans-serif;
color: blue;
}
font-family 指定字型的意思，這邊設定的字型要以大多瀏覽器都相容支援的字型為主
但在這裡，有沒有發現字型 (font) 那一行重覆在 h1 和 h2 出現？也就是說，<h1> 與 <h2> 的字型其實是一樣，只有文字顏色 (font color) 不一樣。如果你總是這樣寫，當我們需要改變 <h1> 與 <h2> 的字型是，很容易就會改了這邊、漏了那邊。所以，你需要學習做整理和合併：</h2></h1></h2></h1>
h1, h2 {
font-family: “Helvetica”, “Arial”, sans-serif;
}
h1 {
color: green;
}
h2 {
color: blue;
}
如此一來你就能統一管理 h1 和 h2 的字型了！
零基礎有效實作學會HTML和CSS，最適合新手的程式設計入門
CSS 基本功：理解瀏覽器預設樣式
很多人會覺得學 CSS 就是要寫出很多厲害的樣式。但其實，每家瀏覽器都有提供的預設樣式，所以也不用太過擔心。只是，基礎簡樸的網頁早已不能滿足現在人的需求，所以我們會需要漸漸開發更多的 CSS 屬性和撰寫技巧。
我們寫的 HTML/CSS 是在瀏覽器裡，在你撰寫任何樣式表之前，Blink、 Gecko、 WebKit 等各大瀏覽器引擎都有在 W3C 定義的標準 之上，提供預設樣式 ( 下圖截取自 Browser Default Styles 網站)。
故在鑽研更多切版技巧前，一定要先理解瀏覽器的預設樣式。例如，認識各 HTML 元素在瀏覽器裡的預設行為，瞭解：div 會佔掉一整列、 span 乖乖包覆內容、ul 前面會有一個黑圓點等等。這才能更加理解，我們正學習的屬性是在修改什麼、前端工程師為什麼需要面對跨瀏覽器兼容性問題。
CSS 基本功：「由大到小，由外而內」的架構
「看一招、學一招」是 CSS 能力養成中普遍的路徑，然而這也會讓部分學習者感受到學習似乎有些零碎、鬆散或容易迷失在玲瑯滿目的屬性裡。以下歸納出 CSS 的學習與實作架構。
此框架的核心理念是將頁面「由大而小、由外而內」地降維拆分，並基本上將頁面拆分成四個層級：
- 排版層級：影響區塊在畫面上的位置，包括水平、垂直排版。
- 區塊層級：定義區塊本身的樣式呈現。
- 內容層級：定義內容文案的樣式。
- 動畫層級：定義動態的樣式變化。
雖然動畫層級的特效往往令人更目眩神迷，不過紮實的 CSS 學習應從基本的元素排版定位開始掌握。這四個層級基本上可以涵蓋一個頁面樣式所需要的所有 CSS 屬性類型。
CSS屬性：CSS的重要屬性介紹
CSS屬性是樣式規則中的一個部分，用於給HTML元素添加特定的樣式。有數百種CSS屬性可供使用，下面我們會專注於一些最常用且最重要的屬性。
- 顏色(Color): CSS提供了多種方式來指定顏色，例如RGB、HEX、HSL等。這個屬性可以用於設定文字、背景或其他元素的顏色。
- 字體(Font): CSS的字體屬性可以用來控制文字的外觀。例如，
font-size用於設定字體大小，font-family用於選擇字體種類。 - 背景(Background): CSS的背景屬性可以用來控制元素的背景。例如，
background-color用於設定背景色，background-image用於設定背景圖片。
CSS版面佈局：如何使用CSS來設計和控制網頁的版面佈局
CSS的版面佈局功能讓我們可以控制元素在網頁上的位置和大小。以下是一些常用的CSS版面佈局技術：
- 盒模型(Box Model): 在CSS中，每個元素都被視為一個盒子，由內容、內邊距、邊框和外邊距組成。理解這個模型對於設定元素的大小和位置至關重要。
- 浮動(Floating): CSS的
float屬性可以使元素浮動到容器的左邊或右邊，讓其他元素環繞它。這在創建多欄佈局時特別有用。 - 定位(Positioning): CSS的定位屬性，如
position、top、bottom、left和right，可以精確控制元素的位置。 - Flexbox: Flexbox是一種現代的佈局方式，讓我們可以更容易地在不同螢幕大小和解析度下創建靈活且響應式的佈局。
- Grid: CSS Grid是一種強大的二維佈局系統，可以同時處理行和列。使用Grid，我們可以創建複雜的佈局，並保持代碼的清潔和簡單。
CSS 響應式設計
A. 什麼是響應式設計？
響應式網頁設計（Responsive Web Design，縮寫：RWD）是一種網頁設計的方法，讓網頁能夠根據裝置的螢幕大小自動調整布局、圖片尺寸和相關元素，以提供最佳的閱讀和瀏覽體驗。在現今多元化的網路裝置環境（例如：桌上型電腦、筆記型電腦、平板、智慧手機等），學會如何透過 CSS 來實現響應式設計，對於前端網頁設計師來說是必備的技能。
RWD 是什麼？響應式網頁RWD 教學入門 – ALPHA Camp
B. CSS 媒體查詢（Media Queries）的使用方法
CSS 媒體查詢是實現響應式網頁設計的重要工具。透過媒體查詢，我們可以根據裝置的特性（例如：螢幕寬度、解析度等）來應用不同的 CSS 樣式。以下是一個簡單的例子，當螢幕寬度小於 600px 時，會將 body 的背景顏色設為藍色：
@media (max-width: 600px) {
body {
background-color: blue;
}
}
這種設計方式讓網頁在不同裝置上瀏覽時，都能夠維持良好的使用者體驗。在實際操作中，你可能需要為多種螢幕尺寸設定不同的 CSS 樣式，以確保每種裝置上都能呈現適合的介面。
如何提升撰寫效率和品質？
實務中，當要開發一個完整頁面時，推薦按照先前介紹過四個層級順序「排版>區塊>內容>動畫」，先將各大區塊的相對定位先擺好，再深入每個區塊內部細節。
概念上，每個區塊都會經歷一個「排版>區塊>內容>動畫」的 loop。採用流水式一區一區往下切的話，容易忽略掉區塊之間的交互關係 (例如螢幕尺寸調整時，區塊位置需要互換)，而陷入牽一髮動全身的窘境中，需要再回頭改掉已經做好的細節。
CSS好用的工具
- Animista ：ANIMISTA 是一個可以用來預製和調整自己想要的 CSS 動畫的工具
- CSS Clip-path Maker：這個工具讓你通過將元素裁剪為基本形狀（圓形、橢圓形、多邊形或插圖）或 SVG 源來在 CSS 中製作複雜的形狀。
- Neumorphism.io：這個工具幫你生成neumorphism極簡設計的 soft UI CSS code
- Shadow Brumm：這個工具幫你畫出具有設計感的陰影
- CSS Gradient ： 這個工具幫你創建背景漸層的CSS code
- CSS Grid Generator：CSS Grid是在網頁上創建RWD網格佈局的好方法，這個工具可以提供基本的佈局。
熱門的 CSS 框架工具，以及它們的主要用途：
- Sass：這是一個 CSS 預處理器，可以用於實現更高效的 CSS 開發，包括變量、混合、嵌套和繼承等功能。Sass 可以讓開發者使用更簡潔和模組化的方式來組織 CSS 代碼，並且可以通過 Sass 編譯器將 Sass 代碼轉換成普通的 CSS 代碼。
- Bootstrap：這是一個流行的 CSS 框架，提供了一套預先設計好的 CSS 樣式，可以用於快速構建RWD Web 應用程式和網站。Bootstrap 包含了各種常用的 UI 元素，例如按鈕、表單、導航欄、卡片等，並且可以通過 Bootstrap 的網格系統來實現不同屏幕大小下的自適應佈局。
- Tailwind CSS：這是一個 CSS 框架，提供了一系列的 CSS 實用程式類，可以用於快速構建自定義的 UI 界面。Tailwind CSS 不像其他框架那樣提供預定義好的 UI 元素或組件，而是提供了各種基礎層面上控制元素外觀和佈局的類名（例如 margin、padding、color、display 等），讓開發者可以根據自己需要靈活地組合使用。
- PostCSS：這是一個 CSS 後處理器，可以用於實現更高效的 CSS 開發，包括自動前綴、CSS 變量和嵌套等功能。PostCSS 可以讓開發者使用最新版本或未來版本中可能出現但目前還不被所有瀏覽器支持或完全支持（例如 flexbox 或 grid） 的CSS 功能，在 PostCSS 插件中添加相關規則後就能夠生成兼容性較好或完美允許在所有主流瀏覽器中正常顯示效果 的普通 css 代碼。
總結
CSS 看似容易入手，我們好像可以在第一天就學完所有東西了。但這就是 CSS 易學難精的特質。CSS 非常需要學習者一次一次地刻意練習、累積經驗，才能撥雲見日，摸清楚這門知識。希望這篇文章提供的 CSS 學習方法與架構，能幫助你更有效地累積知識，建立基礎與系統化的概念，並在這條修煉之路上，走得更遠、更穩健。
