# CSS 文本樣式與排版詳解
## 一、基礎文本樣式屬性
### 1. color - 文本顏色
```css
/* 關鍵字顏色值 */
p { color: red; }/* 十六進制顏色值 */
h1 { color: #ff0000; }/* RGB 顏色值 */
span { color: rgb(255, 0, 0); }/* RGBA 顏色值（帶透明度） */
div { color: rgba(255, 0, 0, 0.5); }
 ```**實際應用：**
```css
.primary-text { color: #333; } /* 主要文字顏色 */
.secondary-text { color: #666; } /* 次要文字顏色 */
.accent-text { color: #007bff; } /* 強調文字顏色 */
 ```### 2. font-size - 字體大小
```css
/* 絕對單位 */
h1 { font-size: 24px; } /* 像素 */
h2 { font-size: 1.5em; } /* 相對於父元素 */
h3 { font-size: 150%; } /* 百分比 */
h4 { font-size: 1.2rem; } /* 相對於根元素 *//* 相對單位（推薦響應式設計使用） */
body { font-size: 16px; }
.title { font-size: 2rem; } /* 32px */
.subtitle { font-size: 1.5rem; } /* 24px */
 ```**最佳實踐：** 使用 rem 單位，便於整體調整和響應式設計
### 3. font-weight - 字體粗細
```css
/* 關鍵字值 */
.light { font-weight: lighter; }
.normal { font-weight: normal; }
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }/* 數值值 */
.thin { font-weight: 100; }
.medium { font-weight: 500; }
.heavy { font-weight: 900; }
 ```### 4. font-style - 字體樣式
```css
.normal { font-style: normal; } /* 正常 */
.italic { font-style: italic; } /* 斜體 */
.oblique { font-style: oblique; } /* 傾斜 */
 ```### 5. font-family - 字體家族
```css
/* 單個字體 */
body { font-family: Arial; }/* 字體棧（備選字體） */
.content {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }/* 中文字體棧 */
.chinese {
font-family: "Microsoft YaHei", "SimHei", sans-serif;
 }
 ```**常用字體棧示例：**
```css
/* 無襯線字體棧 */
.sans-serif {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }/* 襯線字體棧 */
.serif {
font-family: "Times New Roman", Times, serif;
 }/* 等寬字體棧 */
.monospace {
font-family: "Courier New", Courier, monospace;
 }
 ```## 二、@font-face 自定義字體
### 基本用法
```css
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* 優化加載體驗 */
 }body {
font-family: 'MyCustomFont', sans-serif;
 }
 ```### 最佳實踐
```css
/* 1. 供應多種格式保證兼容性 */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype');
 }/* 2. 為不同字重定義不同字體文件 */
@font-face {
font-family: 'CustomFont';
src: url('font-light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
 }@font-face {
font-family: 'CustomFont';
src: url('font-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
 }/* 3. 使用 font-display 優化加載 */
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap; /* 文本立即顯示，字體加載後替換 */
 }
 ```## 三、其他文本屬性
### 1. text-decoration - 文本裝飾
```css
.underline { text-decoration: underline; } /* 下劃線 */
.overline { text-decoration: overline; } /* 上劃線 */
.line-through { text-decoration: line-through; } /* 刪除線 */
.none { text-decoration: none; } /* 無裝飾 *//* 高級用法 */
.fancy-underline {
text-decoration: underline wavy red 2px;
/* 類型 | 樣式 | 顏色 | 粗細 */
 }
 ```### 2. text-indent - 首行縮進
```css
.indent-normal { text-indent: 2em; } /* 縮進2個字符 */
.indent-negative { text-indent: -2em; } /* 懸掛縮進 */
.indent-percent { text-indent: 10%; } /* 百分比縮進 */
 ```### 3. line-height - 行高
```css
/* 數值（推薦） */
.normal-line { line-height: 1.5; } /* 字體大小的1.5倍 */
.tight-line { line-height: 1.2; }
.loose-line { line-height: 2; }/* 長度值 */
.fixed-line { line-height: 24px; }/* 百分比 */
.percent-line { line-height: 150%; }
 ```**line-height 最佳實踐：**
```css
/* 1. 使用無單位數值，繼承更合理 */
body {
line-height: 1.6; /* 推薦啓用1.4-1.8之間的值 */
 }/* 2. 單行文本垂直居中 */
.single-line {
height: 50px;
line-height: 50px; /* 行高等於容器高度 */
 }/* 3. 多行文本合適的行間距 */
.multi-line {
line-height: 1.6;
max-width: 600px; /* 限制行寬提高可讀性 */
 }
 ```### 4. font - 字體簡寫屬性
```css
/* 完整語法 */
.selector {
font: [font-style] [font-weight] [font-size]/[line-height] [font-family];
 }/* 示例 */
.heading {
font: italic bold 24px/1.2 "Helvetica Neue", sans-serif;
 }.body-text {
font: 16px/1.6 "Microsoft YaHei", sans-serif;
 }/* 只設置部分屬性 */
.partial {
font: bold 1.2em sans-serif; /* 省略了 font-style，使用默認值 */
 }
 ```**font 屬性最佳實踐：**
```css
/* 1. 合理的簡寫順序 */
.good-practice {
font: italic 700 18px/1.5 "Segoe UI", sans-serif;
 }/* 2. 必須包含 font-size 和 font-family */
.correct {
font: 16px sans-serif; /* 正確 */
 }.incorrect {
font: italic bold; /* 錯誤：缺少必須屬性 */
 }/* 3. 使用系統字體棧提升性能 */
.system-font {
font: 16px/1.5 -apple-system, BlinkMacSystemFont, sans-serif;
 }
 ```### 5. text-align - 文本對齊
```css
.left { text-align: left; } /* 左對齊（默認） */
.right { text-align: right; } /* 右對齊 */
.center { text-align: center; } /* 居中對齊 */
.justify { text-align: justify; } /* 兩端對齊 */
 ```### 6. word-spacing - 單詞間距
```css
.normal-spacing { word-spacing: normal; } /* 正常間距 */
.wide-spacing { word-spacing: 0.5em; } /* 增加間距 */
.tight-spacing { word-spacing: -0.1em; } /* 減少間距 */
 ```### 7. letter-spacing - 字母間距
```css
.normal { letter-spacing: normal; } /* 正常間距 */
.tracking-wide { letter-spacing: 0.1em; } /* 字距寬鬆 */
.tracking-tight { letter-spacing: -0.05em; } /* 字距緊湊 */
 ```## 四、列表樣式
### 1. list-style-type - 列表標記類型
```css
/* 去掉列表標記 */
.no-bullets { list-style-type: none; }/* 各種標記類型 */
.disc { list-style-type: disc; } /* 實心圓點 */
.circle { list-style-type: circle; } /* 空心圓點 */
.square { list-style-type: square; } /* 實心方塊 */
.decimal { list-style-type: decimal; } /* 數字 */
.lower-alpha { list-style-type: lower-alpha; } /* 小寫字母 */
 ```### 2. list-style - 列表樣式簡寫
```css
/* 完整語法 */
 ul {
list-style: [list-style-type] [list-style-position] [list-style-image];
 }/* 去掉所有列表樣式 */
.clean-list {
list-style: none;
padding-left: 0; /* 同時去掉內邊距 */
 }/* 自定義列表標記 */
.custom-list {
list-style: square inside url('marker.png');
 }
 ```### 去掉列表圓點的完整方案
```css
.clean-ul {
list-style: none; /* 去掉標記 */
padding-left: 0; /* 去掉左邊距 */
margin-left: 0; /* 去掉外邊距 */
 }/* 使用偽元素自定義標記 */
.custom-marker {
list-style: none;
padding-left: 0;
 }.custom-marker li::before {
content: "▶";
color: #007bff;
margin-right: 8px;
 }
 ```## 五、單行文本水平垂直居中
### 方法1：啓用 line-height（推薦用於單行文本）
```css
.single-line-center {
height: 100px; /* 固定高度 */
line-height: 100px; /* 行高等於高度 */
text-align: center; /* 水平居中 */
background: #f0f0f0;
 }
 ```### 手段2：使用 Flexbox
```css
.flex-center {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100px;
background: #f0f0f0;
 }
 ```### 手段3：使用 Grid
```css
.grid-center {
display: grid;
place-items: center; /* 同時水平和垂直居中 */
height: 100px;
background: #f0f0f0;
 }
 ```### 方法4：啓用絕對定位
```css
.absolute-center {
position: relative;
height: 100px;
background: #f0f0f0;
 }.absolute-center p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
 }
 ```## 六、綜合應用實踐
### 完整的文本樣式體系
```css
/* 基礎文本樣式 */
:root {
--text-primary: #333;
--text-secondary: #666;
--text-muted: #999;
--line-height-base: 1.6;
--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }/* 基礎文本樣式 */
body {
font-family: var(--font-family-base);
line-height: var(--line-height-base);
color: var(--text-primary);
 }/* 標題環境 */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.5em;
 }h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }/* 段落文本 */
 p {
margin-bottom: 1em;
max-width: 65ch; /* 優化可讀性 */
 }/* 鏈接樣式 */
 a {
color: #007bff;
text-decoration: none;
 }a:hover {
text-decoration: underline;
 }/* 實用工具類 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-bold { font-weight: 700; }.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.6; }
.leading-loose { line-height: 2; }/* 單行文本居中工具類 */
.single-line-center {
height: 60px;
line-height: 60px;
text-align: center;
 }
 ```### 響應式文本處理
```css
/* 基礎字體大小 */
html {
font-size: 16px;
 }/* 響應式調整 */
@media (max-width: 768px) {
html {
font-size: 14px;
 }

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
 }@media (max-width: 480px) {
html {
font-size: 12px; }
 }