CSS 文本和字体属性、列表属性
# 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;
}
}
