Htmlcss 語法入門：先理解 HTML 與 CSS 如何搭配

HTML 負責建立網頁結構，CSS 負責設定外觀。要改變文字顏色、字級、間距或版面配置，必須先用 HTML 建立元素，再透過 CSS 選擇器指定要調整的對象，寫入對應的屬性與值。

例如，HTML 用<p>建立段落，CSS 則能把段落文字改成紅色：

<p>這是一段紅色文字。</p>

<style>
  p {
    color: red;
  }
</style>

這段程式碼可呈現基本概念；正式安排文件結構時，通常會將<style>放在<head>內，或改用獨立的 CSS 檔案。

Htmlcss 語法並不是一種單獨的程式語言，而是 HTML 與 CSS 的搭配運用。初學者可以先掌握元素、選擇器與樣式套用，再學習排版；需要點擊切換、資料處理等互動功能時，再加入 JavaScript。

Htmlcss 教學：看懂 CSS 規則與選擇器

CSS 由選擇器與宣告區塊組成

一個常見的 CSS 規則如下：

.card {
  color: #222;
  background-color: #f5f5f5;
  padding: 24px;
}

.card是選擇器，會選取具有class="card"的 HTML 元素。大括號內是宣告區塊，每項宣告由「屬性：值」組成，並以分號分隔。

例如，color控制文字顏色，background-color設定背景色，padding則是內容與邊框之間的內距。建議每項宣告都保留結尾分號，方便後續新增設定。

p 與 .p 代表不同對象

p會選取所有<p>元素；.p則會選取具有class="p"的元素，兩者不能混為一談。

<p>第一段文字</p>
<div class="p">第二段文字</div>

p {
  color: red;
}

.p {
  color: blue;
}

上述設定會讓第一段呈現紅色，第二段呈現藍色。實務上可使用.card、.notice等容易理解的類別名稱，讓程式碼更好維護。

常見選擇器對照表

選擇器	選取對象	範例用途
p	所有<p>元素	設定段落行高
.card	帶有card類別的元素	製作共用卡片
#logo	ID 為logo的元素	設定特定識別區塊
.card p	.card內的所有後代段落	調整卡片文字
.menu > li	.menu的直接子層li	設定選單項目
a:hover	指標停留時的連結	改變連結顏色

同一頁中的 ID 應保持唯一；需要重複使用的外觀，通常適合用 class 管理。

CSS 樣式套用的三種方式：HTML 連結 CSS 與內嵌寫法

外部樣式表：使用 HTML 連結 CSS

外部樣式表是將 CSS 另存成.css檔案，再於 HTML 的<head>內使用<link>載入：

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

rel="stylesheet"表示連結的是樣式表，href指定檔案路徑。若style.css與 HTML 放在同一個資料夾，上述寫法即可使用；若放在css子資料夾，則改成：

<link rel="stylesheet" href="css/style.css">

獨立的 CSS 檔案只需要寫 CSS 規則，不必再加上<style>標籤。這種方式便於多個頁面共用樣式，也能減少 HTML 內容的重複。

內部樣式表：把 CSS 寫在 HTML 的 head 內

單頁練習或小型展示，可以直接將 CSS 寫進<style>：

<head>
  <style>
    p {
      color: red;
      line-height: 1.8;
    }
  </style>
</head>

這種方式能在同一份文件查看結構與樣式，但當頁面數量增加，共用設定仍較適合移至外部檔案。

行內樣式：cssstyle 用法與 style 屬性

cssstyle 用法的入門重點，是認識 HTML 的style屬性：

<p style="color: red; font-size: 20px;">

這段文字套用了行內樣式。

屬性內容直接填入 CSS 宣告，不需要選擇器與大括號。它適合少量、特定元素的設定；若多處需要相同外觀，改用 class 比較容易統一調整。

三種套用方式比較表

套用方式	撰寫位置	適合情境	維護特性
外部樣式表	獨立.css檔案	多頁網站、共用元件	可集中管理
內部樣式表	HTML 的<style>內	單頁練習、展示頁	樣式與結構放在同一檔案
行內樣式	元素的style屬性	個別元素設定	重複使用時較難統一修改

外部與內部樣式表沒有固定的高低順位。當規則衝突時，需要一起考慮重要性、層疊層、選擇器權重與出現順序，不能只看 CSS 放在哪裡。

常用 CSS 語法表：文字、間距與版面設定

初學者常用屬性整理

CSS 屬性很多，先掌握能完成文字與基本排版的項目，比一次背下所有語法更實用。

屬性	功能	寫法範例
color	文字顏色	color: #333;
font-size	字體大小	font-size: 1rem;
font-weight	字體粗細	font-weight: 700;
line-height	行高	line-height: 1.7;
background-color	背景顏色	background-color: #fff;
margin	元素外距	margin: 16px 0;
padding	元素內距	padding: 24px;
border	邊框	border: 1px solid #ddd;
border-radius	圓角	border-radius: 12px;
max-width	最大寬度	max-width: 960px;
display	盒子呈現與排版方式	display: grid;
gap	Grid 或 Flex 項目間距	gap: 20px;

先理解盒模型，再調整間距

HTML 元素呈現的盒子包含內容、內距、邊框與外距。padding控制盒子內部留白，margin控制盒子外部的間隔，兩者用途不同。

常見的起始設定是：

css

*,

*::before,

*::after {

box-sizing: border-box;

}

設定後，指定的寬度與高度會包含內距和邊框，較容易掌握元件尺寸；外距仍不包含在內。

ul 與 ol 的清單樣式

<ul>搭配<li>建立無序清單，<ol>搭配<li>建立有序清單。未被其他樣式覆寫時，常見的預設呈現分別是圓點與數字。

<ul class="features">
  <li>容易閱讀</li>
  <li>方便維護</li>
</ul>

.features {
  padding-left: 1.5rem;
  list-style-type: disc;
}

若套用 CSS Reset 後清單標記消失，可檢查list-style與縮排設定，不必急著改寫 HTML 結構。

htmlcss 範例：製作可適應手機的內容卡片

建立 HTML 文件

將下列內容儲存為index.html，並在同一資料夾建立style.css。這個範例包含標題、清單與站內連結，可練習結構和樣式分離。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">

content=”width=device-width, initial-scale=1″>

網頁設計練習

HTML結構

先建立清楚的內容層次。

• 標題與段落
• 連結與清單

查看CSS重點

CSS樣式

調整文字、留白與卡片排列。

加入 CSS 排版與互動狀態

css

*,

*::before,

*::after {

box-sizing: border-box;

}

body {

margin: 0;

font-family: system-ui, sans-serif;

line-height: 1.7;

color: #222;

background-color: #f3f4f6;

}

.container {

width: 100%;

max-width: 960px;

margin: 0 auto;

padding: 32px 16px;

}

.cards {

display: grid;

grid-template-columns: 1fr;

gap: 20px;

}

.card {

padding: 24px;

background-color: #fff;

border: 1px solid #ddd;

border-radius: 12px;

}

.card h2 {

margin-top: 0;

}

.button {

display: inline-block;

padding: 10px 16px;

color: #fff;

background-color: #1756a9;

border-radius: 6px;

text-decoration: none;

}

.button:hover {

background-color: #103d78;

}

.button:focus-visible {

outline: 3px solid #222;

outline-offset: 3px;

}

@media (min-width: 640px) {

.cards {

grid-template-columns: repeat(2, 1fr);

}

}

這個版面預設使用單欄，當檢視區域寬度達到 640 px 時改為雙欄。max-width限制內容在寬螢幕上的最大寬度，左右內距則避免手機版文字緊貼邊緣。

連結除了滑鼠停留狀態，也設定了鍵盤焦點外框。儲存後可調整瀏覽器視窗大小，並按 Tab 鍵移動焦點，觀察版面與操作狀態。

CSS 語法產生器與 CSS 範例網站怎麼用

產生器適合協助建立視覺效果

CSS 語法產生器常用於調整漸層、陰影、圓角或排版參數。取得程式碼後，應先確認輸出的是完整規則，還是只有宣告，再放進適當位置。

例如工具只輸出：

box-shadow: 0 4px 16px rgb(0 0 0 / 10%);

就應將它加入.card的大括號內，而不是單獨放在樣式表最外層。工具可以協助組合數值，但仍需自行確認選擇器、文字可讀性與手機版呈現。

從範例理解結構，再進行 CSS 樣式分享

尋找 CSS 範例網站時，可利用 MDN 的 CSS 文件查閱語法與相容性資訊，也能透過 CodePen觀察 HTML、CSS 與執行結果如何對應。

閱讀範例時，重點不只是複製外觀，而是理解 class 名稱、巢狀結構及是否依賴其他資源。公開展示不等於可任意再利用，使用前仍應查看授權條件。

進行 CSS 樣式分享時，附上最小可執行 HTML、完整 CSS 與必要的套用條件，比單獨貼出一段屬性更容易讓他人重現效果。

結論：先完成套用，再逐步建立可維護的樣式

學習 htmlcss 語法，可以從「建立 HTML 元素、選取元素、設定 CSS 屬性」三個步驟開始。單頁練習可使用內部樣式表，多頁共用外觀則適合採用外部 CSS。

熟悉選擇器、盒模型與常用屬性後，再加入 Grid、Flexbox 及媒體查詢。每次修改都觀察實際呈現，並透過瀏覽器開發者工具確認規則，能更有效地理解樣式為何生效。

常見問題（FAQ）

1. CSS 儲存後沒有變化，應該先檢查什麼？

先確認檔案已儲存、href路徑正確，以及 class 名稱一致。再開啟開發者工具查看 CSS 是否成功載入、規則是否被覆寫；必要時重新整理並停用快取測試。

2. CSS 的數值都需要加上 px 嗎？

不需要。CSS 也有rem、em、%等單位，適用情境各不相同。line-height: 1.7可以不帶單位；長度值為零時，通常可直接寫0。

3. 為什麼設定父元素顏色，子元素也會改變？

color屬於可繼承的屬性，子元素未另行指定時，通常會繼承父元素的值。但margin、padding等屬性預設不會繼承，不能將所有 CSS 設定視為相同機制。

4. 手機沒有滑鼠，hover 效果還能使用嗎？

觸控裝置對:hover的處理可能不同，因此重要資訊與操作不應只靠滑鼠停留呈現。基本狀態就要清楚可用，並為鍵盤操作保留可見的焦點樣式。

5. HTML 可以同時連結多個 CSS 檔案嗎？

可以，在<head>內放入多個<link rel="stylesheet">即可。若檔案內有衝突規則，仍依層疊機制決定結果；其他條件相同時，後出現的宣告會優先。

6. CSS 註解與 HTML 註解的寫法一樣嗎？

不一樣。CSS 使用/* 註解內容 */，HTML 使用<!-- 註解內容 -->。在<style>內或獨立 CSS 檔案中，都應使用 CSS 註解語法。