CSS是用於添加HTML或XML文檔樣式的語言。網頁設計會用到HTML / CSS / JavaScript三種不同的語言。其中HTML 負責框架，CSS負責內容呈現，JavaScript負責動畫效果，各司其職。本文將協助你開始使用 CSS、理解 CSS 怎麼連結 HTML 文件、認識 CSS 語法規則；也瞭解怎麼開始練基本功，踏出網頁設計的第一步。
CSS是什麼？網頁設計自學最關鍵一步
CSS是什麼？
CSS (Cascading Style Sheets) 中文為：階層樣式表。用於添加HTML或XML文檔樣式的語言。它幫助開發者控制網頁的排版和外觀，例如顏色、字體、大小和布局，使網頁更具美感。 CSS將內容（HTML）與呈現樣式（CSS）分離，讓文件更簡潔，同時也便於管理和維護。
CSS有哪些版本？
CSS目前有CSS1、CSS2、CSS3三個版本，CSS4正在開發中還未上線只有極少數的功能可以在部分瀏覽器上使用。
CSS1 發表於1996年12月 。
CSS2 發表於1998年5月。
CSS3 現在大部分的主流瀏覽器都支援CSS3。CSS3分成不同的類別，稱為「modules」。每一個「modules」都有CSS2額外增加的功能，以及向下相容。
CSS 怎麼寫？css語法基本格式？css樣式範例
CSS怎麼寫
舉例一個最簡單css樣式範例，在 HTML 標籤當中，通常主標題是使用 ＜h1＞ 標籤。因此，我們想要讓主標題變成藍色，我們可以這樣寫：
h1{
color:blue;
}
這表示所有的 ＜h1＞ 元素都會變成藍色
CSS語法基本格式
CSS 的基本語法格式如下：
選擇器 {
屬性: 值;
}
- 選擇器（Selector）：指定要套用樣式的 HTML 元素。
- 屬性（Property）：定義要修改的樣式屬性（如顏色、字體大小）。
- 值（Value）：設定該屬性的具體數值或效果。
例如上面讓主標題變成藍色的代碼，其中h1就是選擇器，color就是屬性，blue就是值。
常見 CSS 屬性應用：
| 屬性名稱 | 說明 | 範例 |
|---|---|---|
| color | 文字顏色 | color: #333; |
| background-color | 背景顏色 | background-color: lightgray; |
| font-size | 字體大小 | font-size: 18px; |
| margin | 外距 | margin: 10px; |
| padding | 內距 | padding: 5px; |
| border | 邊框 | border: 1px solid #000; |
小技巧：善用 em、rem、% 這類相對單位，能讓頁面在不同螢幕上自動調整比例。
CSS 如何與 HTML 連結？
在實際開發中，CSS 可以用三種方式加入 HTML：
行內樣式（Inline CSS）
直接在 HTML 標籤內使用 style 屬性。
<h1 style="color: blue;">歡迎來到我的網站</h1>
優點：快速測試方便。
缺點：不易維護，樣式重複。
內部樣式（Internal CSS）
在 <head> 中用 <style> 標籤撰寫。
<style>
h1 { color: blue; }
</style>
適合小型網站或單頁測試。
外部樣式表（External CSS）
將 CSS 寫在獨立檔案中，再用 <link> 引入。
<link rel="stylesheet" href="style.css">css與html 關係
HTML（HyperText Markup Language）負責定義網頁的內容與結構，例如文字、圖片、表格、連結、按鈕等元素。
CSS（Cascading Style Sheets）則負責這些內容的樣式與呈現，讓網頁變得更有設計感、更符合品牌形象。
簡單比喻：
如果 HTML 是房子的骨架結構，那麼 CSS 就是房子的油漆、裝潢與設計風格。
HTML 提供「內容」：
<h1>歡迎來到我的網站</h1>
CSS 提供「樣式」：
h1{
color:blue;
}就可以看到藍色的<h1>歡迎來到我的網站
所以：
HTML 決定「顯示什麼」，
CSS 決定「怎麼顯示」。
為什麼要分開使用CSS和HTML？
- 可維護性高：修改設計時，不需動到內容。
- 可重用性強：同一份 CSS 可套用在多個頁面。
- 載入速度快：CSS 檔案會被瀏覽器快取，提高效能。
- 更符合 SEO 與網站架構標準：清楚分離「內容」與「樣式」，利於搜尋引擎理解。
覺得css難度高？推薦玩構架設網站！
如果你覺得css難度高需要進一步的協助，無論是要客製化架站、選擇合適的平台或模板，或是規劃網站的長期發展策略，歡迎隨時諮詢。讓我們一起打造最適合你的線上形象，在數位世界中脫穎而出！
玩構網路 提供完整的架站解決方案，無論你需要高效率的套版網站，還是高度彈性的客製化網站，都能量身打造符合需求的線上形象。透過我們的專業顧問服務，你可以獲得：
- 合適平台與模板的評估建議
- 架站前需求規劃與技術諮詢
- 未來擴展性與品牌一致性的整合方案
不確定該如何選擇？沒關係，讓我們幫你釐清方向。立即聯絡玩構網路，開啟專屬你的數位品牌旅程！
玩構網站設計案例：https://www.iwangoweb.com/work/web-design/
聯絡電話：07-6075007
LINE 詢問：點我聯繫 LINE 官方
