HTML CSS 範例的核心重點
HTML 負責建立網頁的內容與結構，CSS 負責顏色、字型、間距、尺寸及版面配置。初學者要完成可實際執行的 HTML CSS 範例，只需先建立 HTML 元素，再透過行內、內部或外部樣式表套用 CSS。其中，行內樣式適合單次測試，內部樣式適合單頁範例，外部樣式表則最適合正式網站與多頁專案。若要快速入門，可先把 CSS 寫在 HTML 的<style>標籤內，熟悉選擇器後再拆分成獨立 CSS 檔案。
HTML 與 CSS 分別負責什麼
HTML CSS 差別
HTML CSS 差別可以從「結構」與「外觀」理解。HTML 是標記語言，用來描述標題、段落、連結、圖片、表單及導覽列等內容；CSS 是階層樣式表，用來控制這些內容如何顯示。
例如，<h2>代表第二層標題，<p>代表段落，<a>代表連結。至於標題要多大、段落使用什麼顏色、連結被滑鼠移入時如何變化，則由 CSS 決定。
將兩者分開的主要優點，是同一份 HTML 結構可以套用不同視覺設計。網站需要調整品牌顏色時，只要修改 CSS，不必逐一改寫每個 HTML 元素。這也符合網頁標準所強調的關注點分離原則。
HTML 與 CSS 比較表
| 比較項目 | HTML | CSS |
|---|---|---|
| 完整名稱 | HyperText Markup Language | Cascading Style Sheets |
| 主要功能 | 建立內容與文件結構 | 控制外觀與版面 |
| 常見內容 | 標題、段落、圖片、連結、表單 | 顏色、字型、間距、尺寸、排列 |
| 基本寫法 | <p>內容</p> |
p { color: red; } |
| 可否單獨顯示 | 可以，但只有瀏覽器預設樣式 | 必須套用在 HTML 或其他可樣式化文件上 |
| 對 SEO 的作用 | 提供語意及內容階層 | 改善閱讀體驗，但不能取代語意 HTML |
| 維護重點 | 標籤結構與可存取性 | 共用規則、命名與響應式設計 |
HTML CSS 語法基礎
HTML 文件的基本結構
一份符合現代 HTML 標準的文件，通常包含文件類型、語言設定、字元編碼、頁面標題及主要內容。台灣繁體中文頁面應將lang設定為zh-Hant-TW，並使用 UTF-8 字元編碼。
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS 範例</title>
</head>
<body>
<h1>我的第一個網頁</h1>
<p>這是一段網頁內容。</p>
</body>
</html><!DOCTYPE html>告訴瀏覽器使用現代 HTML 模式解析文件。viewport設定能讓頁面在手機裝置上依螢幕寬度正確縮放，而title則是瀏覽器分頁名稱，也通常會成為搜尋結果標題的重要參考。
CSS 規則的組成
一組標準 CSS 規則由選擇器與宣告區塊構成。選擇器決定哪些 HTML 元素會受到影響，大括號內則放置屬性和值。
p {
color: red;
font-size: 18px;
}上述規則的選擇器是p，表示套用到頁面中的所有段落。color與font-size是 CSS 屬性，red及18px則是對應的值。每一項宣告通常以分號結束，能降低後續新增樣式時發生錯誤的機率。
CSS 套用的三種方法
行內撰寫 Inline
行內撰寫表示直接在元素的style屬性內加入 CSS。以下網頁會顯示三段不同顏色的文字。
<p style="color: red;">紅色文字</p>
<p style="color: green;">綠色文字</p>
<p style="color: blue;">藍色文字</p>這種方法容易理解，也適合快速測試，但樣式會與內容混在一起。當多個元素需要相同設定時，必須重複撰寫，不利於維護，因此不建議作為大型網站的主要 CSS 樣式套用方式。
內部撰寫 Internal
內部樣式是把 CSS 放在 HTML 文件<head>中的<style>標籤內。搜尋「CSS 寫在 HTML」時，通常指的就是行內樣式或這種內部樣式。
<head>
<style>
p {
color: #b42318;
line-height: 1.8;
}
</style>
</head>內部樣式能集中管理單一頁面的設計，適合練習、原型或只有一頁的小型文件。不過，多個頁面若都需要相同樣式，仍會產生重複程式碼。
外部撰寫 External
外部樣式表是把 CSS 存成獨立檔案，再由 HTML 的<link>元素載入。
<head>
<link rel="stylesheet" href="styles.css">
</head>body {
margin: 0;
font-family: Arial, "Noto Sans TC", sans-serif;
}外部 CSS 可供多個頁面共用，瀏覽器也有機會快取檔案，因此是正式網站最常見的做法。修改styles.css後，所有引用該檔案的頁面都能同步更新。
三種套用方式分析表
| 方法 | 撰寫位置 | 優點 | 限制 | 適用情境 |
|---|---|---|---|---|
| 行內樣式 | HTML 元素的style屬性 |
測試快速、作用明確 | 重複度高、難以維護 | 單次測試或特殊動態值 |
| 內部樣式 | <style>標籤 |
單頁集中管理 | 無法有效供多頁共用 | 教學範例、單頁原型 |
| 外部樣式 | 獨立.css檔案 |
易維護、可共用及快取 | 需要額外載入檔案 | 正式網站與多頁專案 |
CSS 選擇器教學
元素選擇器
元素選擇器直接使用 HTML 標籤名稱，會影響頁面中所有相同類型的元素。
p {
color: red;
}這段規則會讓所有<p>段落顯示為紅色。若只想改變特定段落，就不應直接使用範圍過大的元素選擇器。
class 選擇器
class 選擇器是實務上最常使用的方式，寫法是在名稱前加上點號，例如.card或.button-primary。它會套用到所有具有對應class屬性的元素。
<article class="card">
<h2>文章標題</h2>
<p>卡片內容說明。</p>
</article>
<a class="button-primary" href="/contact">聯絡我們</a>.card {
padding: 24px;
border: 1px solid #d0d5dd;
border-radius: 12px;
}
.button-primary {
display: inline-block;
padding: 10px 18px;
color: #ffffff;
background-color: #175cd3;
text-decoration: none;
border-radius: 6px;
}同一個 class 可以重複套用在多個元素上，因此比逐一加入行內樣式更容易建立一致的介面。
ID 選擇器
ID 選擇器在名稱前加入井字號，對應 HTML 的id屬性。
<header id="site-header">網站頁首</header>#site-header {
background-color: #101828;
color: #ffffff;
}同一頁中的 ID 值應保持唯一。由於 ID 選擇器的特異性較高，元件樣式通常優先使用 class，避免未來覆寫規則變得困難。
偽類選擇器
偽類可依元素狀態套用樣式。連結常見狀態包括:link、:visited、:hover及:focus。
a {
color: #175cd3;
}
a:hover {
color: #b42318;
}
a:focus-visible {
outline: 3px solid #fdb022;
outline-offset: 3px;
}不要只設計:hover而忽略鍵盤操作。加入清楚的:focus-visible樣式，可讓未使用滑鼠的使用者知道目前焦點位置。
完整 HTML 與 CSS 卡片範例
可直接執行的 HTML CSS 教學程式碼
以下 CSS 模板整合語意 HTML、class 選擇器、Flexbox、按鈕及滑鼠互動。將程式碼儲存為index.html後，即可使用瀏覽器開啟。
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服務卡片範例</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 40px 20px;
color: #1d2939;
background: #f2f4f7;
font-family: Arial, "Noto Sans TC", sans-serif;
line-height: 1.6;
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
max-width: 960px;
margin: 0 auto;
}
.card {
flex: 1 1 280px;
padding: 24px;
background: #ffffff;
border: 1px solid #eaecf0;
border-radius: 12px;
box-shadow: 0 4px 12px rgb(16 24 40 / 8%);
}
.card h2 {
margin-top: 0;
font-size: 24px;
}
.button {
display: inline-block;
padding: 10px 16px;
color: #ffffff;
background: #175cd3;
border-radius: 6px;
text-decoration: none;
transition: background-color 0.2s ease;
}
.button:hover {
background: #1849a9;
}
.button:focus-visible {
outline: 3px solid #fdb022;
outline-offset: 3px;
}
</style>
</head>
<body>
<main class="card-list">
<article class="card">
<h2>HTML結構</h2>
<p>使用語意元素組織標題、段落及連結。</p>
<a class="button" href="#html">查看內容</a>
</article>
<article class="card">
<h2>CSS樣式</h2>
<p>透過Flexbox、間距與色彩建立卡片版面。</p>
<a class="button" href="#css">查看內容</a>
</article>
</main>
</body>
</html>box-sizing: border-box會讓元素設定的寬度包含內距與邊框，通常較容易計算版面。.card-list使用 Flexbox 排列卡片，flex-wrap: wrap則允許卡片在空間不足時換行，避免固定欄數造成手機版面溢出。
側邊欄與導覽選單範例
側邊欄 HTML
側邊欄應使用具語意的nav元素，並提供可辨識的導覽標籤。
<div class="layout">
<nav class="sidebar" aria-label="主要導覽">
<a href="#home">首頁</a>
<a href="#service">服務項目</a>
<a href="#contact">聯絡方式</a>
</nav>
<main class="content">
<h1>網站內容</h1>
<p>這裡放置主要資訊。</p>
</main>
</div>側邊欄 CSS
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 240px;
padding: 24px;
background: #101828;
}
.sidebar a {
display: block;
padding: 12px;
color: #ffffff;
text-decoration: none;
border-radius: 6px;
}.sidebar a:hover,
.sidebar a:focus-visible {
background: #344054;
}
.content {
flex: 1;
padding: 32px;
}
@media (max-width: 700px) {
.layout {
flex-direction: column;
}
.sidebar {
width: auto;
}
}
媒體查詢會在畫面寬度不超過 700 像素時，把左右排列改成上下排列。這比完全依賴固定寬度更適合響應式網頁，但實際斷點仍應根據內容何時出現擁擠決定。
CSS 語法產生器與 CSS 樣式分享
如何正確使用 CSS 語法產生器
CSS 語法產生器可以協助建立漸層、陰影、圓角、Flexbox 或 Grid 設定，適合用來理解屬性及快速製作原型。不過，產生後仍應檢查是否存在重複宣告、不必要的瀏覽器前綴、過高的選擇器特異性，以及不符合專案命名方式的 class。
工具產出的程式碼不等於已完成最佳化。正式使用前，應透過瀏覽器開發者工具檢查計算後樣式，並在不同螢幕尺寸及主流瀏覽器中測試。
使用 CSS 樣式分享內容的注意事項
複製 CSS 樣式分享網站或社群提供的按鈕、卡片及選單時，應先確認授權條款，並檢查程式碼來源。若範例包含外部字型、圖示或 JavaScript，也要確認是否會連線至第三方服務。
套用 CSS 模板前，還要檢查色彩對比、鍵盤焦點、標題階層及手機顯示效果。外觀精美不代表符合可存取性，也不代表適合直接用於正式網站。
CSS 優先順序與常見問題
階層與特異性
CSS 中的 C 代表 Cascading，也就是階層與層疊。多個規則同時影響同一元素時，瀏覽器會綜合來源、重要性、特異性及出現順序決定最終樣式。
p {
color: black;
}
.notice {
color: blue;
}
#warning {
color: red;
}若一個段落同時符合上述三個選擇器，ID 選擇器通常會比 class 及元素選擇器更具優先性。行內樣式也具有較高權重。實務上不宜頻繁使用!important，否則後續覆寫會更加困難。
瀏覽器預設樣式
HTML 元素本身通常帶有瀏覽器預設樣式，例如標題外距、清單縮排及按鈕字型。若不同瀏覽器的預設差異干擾版面，可採用 Normalize.css，或自行建立簡單的基礎規則。
* {
box-sizing: border-box;
}
body {
margin: 0;
}button,
input,
textarea,
select {
font: inherit;
}
Normalize.css 的方向是讓各瀏覽器的預設顯示更一致，而不是完全移除所有樣式。使用任何重設樣式前，都應理解它修改了哪些元素。
SEO 與網頁品質實務
使用語意 HTML
CSS 能改變外觀，卻不能取代正確的 HTML 語意。不要只為了放大文字就使用<h1>，也不要用普通<div>模擬按鈕。標題應依內容階層排列，互動按鈕應使用<button>，導覽區域則可使用<nav>。
清楚的語意結構有助於搜尋引擎理解內容，也能讓螢幕閱讀器及鍵盤使用者更容易操作。
控制 CSS 檔案品質
正式網站應刪除長期未使用的規則，避免重複載入大型框架，並減少阻塞頁面顯示的不必要資源。壓縮 CSS 可以減少傳輸量，但原始碼仍應保留可維護的版本，再由建置流程輸出壓縮檔。
版面設計也應避免內容載入後產生明顯位移。例如，圖片應提供寬度與高度，動態區塊則要預留合理空間。這些做法有助於使用體驗與網站品質，但搜尋排名仍取決於內容、技術、連結及整體網站訊號，不能只靠 CSS 改善。
結論
HTML CSS 範例的學習順序應從 HTML 語意結構、CSS 基本規則、三種套用方式及選擇器開始，再進一步練習盒模型、Flexbox、響應式設計與互動狀態。單頁練習可先把 CSS 寫在 HTML 的<style>標籤中；進入正式專案後，則應使用外部樣式表集中管理。
選用 CSS 模板、CSS 語法產生器或 CSS 樣式分享程式碼時，不能只看視覺效果，還要檢查授權、效能、可存取性、響應式行為及程式碼品質。以語意 HTML 建立內容，再用可維護的 class 選擇器完成 CSS 樣式套用，才能兼顧搜尋理解、網站速度與長期維護。
常見問題
1. HTML 和 CSS 一定要一起使用嗎？
HTML 可以單獨顯示內容，但會採用瀏覽器預設樣式。CSS 必須套用到 HTML 等文件後，才能呈現其視覺效果。一般網站通常會同時使用兩者。
2. CSS 寫在 HTML 有哪些方法？
可以直接寫在元素的style屬性內，也可以放在 HTML 文件中的<style>標籤。前者是行內樣式，後者是內部樣式。
3. 初學者應先學 HTML 還是 CSS？
建議先理解 HTML 標籤、屬性與語意結構，再學 CSS 選擇器及樣式屬性。因為 CSS 需要先找到對應的 HTML 元素才能套用。
4. 為什麼 CSS 樣式沒有生效？
常見原因包括選擇器拼寫錯誤、CSS 檔案路徑錯誤、屬性值無效、規則被更高特異性的樣式覆蓋，以及瀏覽器仍使用快取版本。可利用開發者工具檢查元素。
5. class 與 ID 應該如何選擇？
可重複使用的元件樣式優先使用 class。ID 應在同一頁保持唯一，較適合片段連結、表單標籤關聯或 JavaScript 定位，不宜作為大量共用樣式的主要方法。
6. 行內 CSS 會影響 SEO 嗎？
行內 CSS 本身不會直接導致頁面無法排名，但大量使用會增加 HTML 體積及維護難度。若造成載入速度或使用體驗下降，可能間接影響網站品質。
7. 可以直接複製網路上的 CSS 模板嗎？
應先確認授權、來源及相依資源，並測試安全性、可存取性、瀏覽器相容性與響應式效果。不能假設所有公開程式碼都可無條件商業使用。
8. Normalize.css 和 CSS Reset 有什麼不同？
Normalize.css 主要讓各瀏覽器的預設樣式更一致，並保留部分合理預設；CSS Reset 通常會更全面地清除元素的外距、內距及其他樣式，再由開發者重新設定。
9. Flexbox 和 Grid 應該使用哪一個？
Flexbox 適合單一方向的排列，例如橫向導覽列或卡片列；Grid 適合同時控制列與欄的二維版面。兩者可以在同一網站依不同區塊需求搭配使用。
10. CSS 語法產生器產出的程式碼可以直接上線嗎？
不建議未經檢查就直接上線。應確認程式碼是否精簡、是否有無效屬性、是否支援目標瀏覽器，以及互動狀態和色彩對比是否符合實際需求。