【前端开发之CSS】（三）CSS 常用元素属性宝典（上）：从字体到文本，手把手教你打造高颜值网页！

前言

如果说 CSS 选择器是 "精准定位的手术刀"，那 CSS 常用元素属性就是 "化腐朽为神奇的美容针"------ 选中元素后，正是这些属性让单调的 HTML 元素变得字体优美、文本工整、背景绚丽、外形精致。作为前端开发的核心技能，掌握常用元素属性是打造高颜值网页的必经之路。

本文将聚焦 CSS 中最常用的两大类元素属性：字体属性、文本属性，带你从零到一吃透这些属性！下面就让我们正式开始吧！

一、字体属性：给文字穿上 "精致外衣"

文字是网页的核心内容载体，字体属性直接决定了文字的 "颜值"------ 是端庄大气的宋体，还是活泼灵动的微软雅黑？是加粗醒目的标题，还是轻盈纤细的正文？这些都由字体属性控制。

1.1 font-family：设置字体类型

font-family 用于指定元素的字体类型，就像给文字选择 "穿衣风格"，不同的字体能传递不同的页面氛围（如宋体显正式、微软雅黑显现代）。

1.1.1 基础语法与用法

css 复制代码

/* 单个字体 */
元素 {
  font-family: "字体名称";
}

/* 多个备选字体（推荐） */
元素 {
  font-family: "首选字体", "备选字体1", "备选字体2", 通用字体族;
}

1.1.2 关键注意事项

字体名称规范：
- 字体名不含空格时，可直接写（如 font-family: SimSun;，宋体的英文名称）；
- 字体名含空格时，必须用引号包裹（如 font-family: "Microsoft YaHei";，微软雅黑的英文名称）；
- 支持中文名称（如 font-family: "微软雅黑";），但不推荐 ------ 不同浏览器对中文字体名的兼容性不同，优先使用英文名称。
备选字体机制：
- 浏览器会按从左到右的顺序查找字体，找到本地已安装的字体就使用；
- 若所有指定字体都未安装，会使用最后的 "通用字体族"（如 sans-serif 无衬线字体、serif 衬线字体、monospace 等宽字体）。
兼容性建议：
- 优先使用系统默认字体（无需额外引入，加载快、兼容性好），如 Windows 的 "微软雅黑"、Mac 的 "苹方"；
- 避免使用小众字体 ------ 用户本地未安装时，会被替换为默认字体，导致样式错乱。

1.1.3 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font-family 字体示例</title>
  <style>
    .font-msyh {
      /* 微软雅黑：优先英文名称，备选中文名称，最后无衬线字体 */
      font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
      font-size: 20px;
      color: #333;
    }
    .font-simsun {
      /* 宋体：英文名称 SimSun，备选衬线字体 */
      font-family: SimSun, "宋体", serif;
      font-size: 20px;
      color: #666;
    }
    .font-arial {
      /*  Arial：无衬线字体，兼容性强 */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      color: #999;
    }
  </style>
</head>
<body>
  <div class="font-msyh">这是微软雅黑字体（现代、清晰，适合正文）</div>
  <br>
  <div class="font-simsun">这是宋体字体（端庄、正式，适合标题或传统内容）</div>
  <br>
  <div class="font-arial">This is Arial font (Simple, universal, suitable for English content)</div>
</body>
</html>

运行效果：三个 div 分别显示微软雅黑、宋体、Arial 字体，即使某类字体未安装，也会被备选字体替换，保证样式不错乱。

1.2 font-size：设置字体大小

font-size 用于控制文字的大小，是最常用的字体属性之一。文字大小直接影响页面的可读性 ------ 标题需大而醒目，正文需适中易读，注释需小而不抢眼。

1.2.1 基础语法与单位

css 复制代码

元素 {
  font-size: 数值 + 单位; /* 常用单位：px、em、rem */
}

1.2.2 常用单位说明

px（像素） ：固定单位，最常用！像素是屏幕的最小显示单位，font-size: 16px 表示文字高度为 16 个像素。
- 优点：大小固定，直观易控，兼容性好；
- 缺点：不支持响应式（屏幕缩放时，文字大小不变）；
- 适用场景：大部分固定尺寸的文字（如正文、标题）。
em ：相对单位，相对于当前元素的字体大小（1em = 当前元素的 font-size 值）。
- 例：若父元素 font-size: 16px，子元素 font-size: 1.5em，则子元素文字大小为 16px * 1.5 = 24px；
- 优点：支持响应式，能随父元素字体大小同步变化；
- 缺点：嵌套层级多时，计算复杂（容易 "叠罗汉"）；
- 适用场景：局部响应式文字（如按钮内文字相对于按钮大小）。
rem ：相对单位，相对于根元素（<html>）的字体大小（1rem = <html> 的 font-size 值）。
- 例：若 <html> font-size: 16px，则 font-size: 2rem 表示 32px；
- 优点：计算简单，不受嵌套层级影响，是响应式开发的首选单位；
- 适用场景：全局响应式文字（如移动端适配不同屏幕）。

1.2.3 关键注意事项

浏览器默认大小 ：不同浏览器的默认字体大小不同（Chrome 默认 16px，IE 默认 16px，Firefox 默认 16px），建议在 <body> 中统一设置默认字体大小（如 body { font-size: 16px; }），避免兼容性问题。

标题标签默认大小 ：**<h1>-<h6>**标签有默认字体大小（h1 约 2em，h2 约 1.5em 等），若需统一风格，需单独覆盖默认样式。

单位不能省略 ：font-size: 20 是无效的，必须加单位 （如 20px、1.5em）。

1.2.4 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font-size 字体大小示例</title>
  <style>
    body {
      font-size: 16px; /* 统一默认字体大小 */
    }
    .size-px {
      font-size: 24px; /* 像素单位：固定24px */
      color: red;
    }
    .size-em {
      font-size: 1.5em; /* 相对单位：16px * 1.5 = 24px */
      color: green;
    }
    .size-rem {
      font-size: 1.5rem; /* 相对根元素：16px * 1.5 = 24px */
      color: blue;
    }
    /* 覆盖标题标签默认大小 */
    h1 {
      font-size: 32px;
    }
    h2 {
      font-size: 28px;
    }
  </style>
</head>
<body>
  <h1>标题1：32px（覆盖默认大小）</h1>
  <h2>标题2：28px（覆盖默认大小）</h2>
  <p class="size-px">像素单位：24px（固定大小）</p>
  <p class="size-em">em单位：1.5em（相对于body的16px，等于24px）</p>
  <p class="size-rem">rem单位：1.5rem（相对于根元素的16px，等于24px）</p>
  
  <!-- 嵌套场景下的em单位 -->
  <div style="font-size: 20px;">
    <p class="size-em">嵌套em单位：1.5em（相对于父元素的20px，等于30px）</p>
  </div>
</body>
</html>

运行效果：前三个 <p> 标签文字大小均为 24px（不同单位实现相同效果），嵌套的 <p> 标签文字大小为 30px（em 单位随父元素变化）。

1.3 font-weight：设置字体粗细

font-weight 用于控制文字的粗细，让文字更有层次感 ------ 标题加粗突出重点，正文常规保证易读，注释变细不抢视线。

1.3.1 基础语法与取值

css 复制代码

元素 {
  /* 关键字取值 */
  font-weight: normal; /* 正常粗细（默认，等同于400） */
  font-weight: bold; /* 加粗（等同于700） */
  font-weight: bolder; /* 比父元素更粗 */
  font-weight: lighter; /* 比父元素更细 */
  
  /* 数字取值（推荐，更精准） */
  font-weight: 100; /* 最细 */
  font-weight: 400; /* 正常（normal） */
  font-weight: 700; /* 加粗（bold） */
  font-weight: 900; /* 最粗 */
}

1.3.2 关键注意事项

数字取值范围 ：仅支持 100、200、300、400、500、600、700、800、900 这 9 个值，且必须是 100 的整数倍（如 font-weight: 750 无效）。

关键字与数字对应：

normal = 400（默认值）；

bold = 700（最常用的加粗值）；

不是所有字体都支持所有粗细值 ------ 小众字体可能只支持 400 和 700，设置 300 或 900 可能无效果。

兼容性建议 ：优先使用数字取值（如 700 代替 bold），兼容性更好；避免使用 bolder 和 lighter（依赖父元素粗细，效果不可控）。

1.3.3 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font-weight 字体粗细示例</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 20px;
    }
    .weight-100 { font-weight: 100; color: #999; }
    .weight-400 { font-weight: 400; color: #666; } /* 正常 */
    .weight-700 { font-weight: 700; color: #333; } /* 加粗 */
    .weight-900 { font-weight: 900; color: #000; } /* 最粗 */
    .weight-bold { font-weight: bold; color: red; } /* 等同于700 */
  </style>
</head>
<body>
  <p class="weight-100">100：最细（适合注释、辅助文字）</p>
  <p class="weight-400">400：正常（适合正文内容）</p>
  <p class="weight-700">700：加粗（适合小标题、重点内容）</p>
  <p class="weight-900">900：最粗（适合大标题、强强调内容）</p>
  <p class="weight-bold">bold：关键字加粗（等同于700，效果和上面一致）</p>
</body>
</html>

运行效果：文字粗细从左到右逐渐变粗，700 和 bold 效果完全一致，直观展现不同粗细的应用场景。

1.4 font-style：设置文字样式（倾斜 / 正常）

font-style 主要用于控制文字是否倾斜，最常用的场景不是 "让文字倾斜"，而是 "取消默认倾斜"（如 <em>、<<i> 标签默认倾斜，需改为正常样式）。

1.4.1 基础语法与取值

css 复制代码

元素 {
  font-style: normal; /* 正常样式（默认，取消倾斜） */
  font-style: italic; /* 斜体（模拟倾斜，字体本身支持） */
  font-style: oblique; /* 倾斜（强制倾斜，效果较生硬） */
}

1.4.2 关键注意事项

italic vs oblique：
- italic：使用字体本身自带的斜体样式（如果字体支持），效果自然、美观；
- oblique：强制让文字倾斜，无论字体是否支持斜体，效果较生硬；
- 实际开发中，优先使用 italic（效果更好），oblique 很少使用。
常用场景：
- 取消 <em>、<<i> 标签的默认倾斜（如 em { font-style: normal; }）；
- 偶尔用于特殊文字强调（如引用内容、英文标题），但不建议滥用（倾斜文字可读性较差）。

1.4.3 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font-style 文字样式示例</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 20px;
    }
    .style-normal { font-style: normal; }
    .style-italic { font-style: italic; color: red; }
    .style-oblique { font-style: oblique; color: blue; }
    /* 取消em标签默认倾斜 */
    em { font-style: normal; color: green; }
  </style>
</head>
<body>
  <p class="style-normal">normal：正常样式（默认）</p>
  <p class="style-italic">italic：斜体（自然倾斜，适合特殊强调）</p>
  <p class="style-oblique">oblique：强制倾斜（效果较生硬）</p>
  <p>默认的em标签：<em>这是em标签（已取消倾斜，变成正常样式）</em></p>
</body>
</html>

运行效果：italic 斜体自然，oblique 倾斜生硬，<em> 标签默认倾斜被取消，变成正常样式（实际开发中最常用的场景）。

1.5 字体属性简写（font）

为了简化代码，CSS 支持将 font-style、font-weight、font-size、line-height、font-family 合并为一个 **font**属性（简写属性），按顺序书写即可。

1.5.1 简写语法

css 复制代码

元素 {
  font: font-style font-weight font-size/line-height font-family;
}

1.5.2 关键注意事项

必选属性 ：**font-size**和 font-family 是必选的，其他属性可选（不写则使用默认值）；

line-height 与 font-size ：两者用 **/**连接（如 20px/1.5，表示 font-size: 20px，line-height: 30px）；

顺序固定 ：必须按**font-style → font-weight → font-size/line-height → font-family**的顺序书写，不能颠倒；

默认值 ：未写的属性会使用默认值（如未写 font-style 则默认 normal，未写 font-weight 则默认 400）。

1.5.3 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>font 简写属性示例</title>
  <style>
    /* 完整简写：style + weight + size/line-height + family */
    .font-short {
      font: italic 700 20px/1.8 "Microsoft YaHei", sans-serif;
      color: #333;
    }
    /* 简化简写：省略style和weight（使用默认值normal、400） */
    .font-short-simple {
      font: 18px/1.5 "SimSun", serif;
      color: #666;
    }
    /* 等价的完整写法（对比用） */
    .font-full {
      font-style: italic;
      font-weight: 700;
      font-size: 20px;
      line-height: 1.8;
      font-family: "Microsoft YaHei", sans-serif;
      color: #333;
    }
  </style>
</head>
<body>
  <p class="font-short">完整简写：斜体、加粗、20px、行高1.8、微软雅黑</p>
  <p class="font-short-simple">简化简写：正常样式、正常粗细、18px、行高1.5、宋体</p>
  <p class="font-full">等价完整写法：和第一个p标签样式完全一致</p>
</body>
</html>

运行效果：font-short 和 font-full 样式完全一致，font-short-simple 为简化写法，代码更简洁（实际开发中推荐使用简写）。

1.6 字体属性小结

属性名	作用	常用取值 / 单位	核心注意事项
font-family	设置字体类型	微软雅黑、宋体、Arial 等	含空格需加引号，添加备选字体，优先英文名称
font-size	设置字体大小	px（固定）、em/rem（相对）	浏览器默认 16px，标题需覆盖默认大小，单位不能省
font-weight	设置字体粗细	400（正常）、700（加粗）等	数字取值更精准，700 等同于 bold
font-style	设置文字样式	normal（正常）、italic（斜体）	常用於取消 em/i 标签默认倾斜，少用 oblique
font	简写属性	style weight size/line family	必选 size 和 family，顺序固定，简化代码

二、文本属性：让文字排版 "工整又美观"

如果说字体属性是文字的 "颜值"，那文本属性就是文字的 "排版章法"------ 控制文字的颜色、对齐方式、装饰效果、缩进、行间距等，让文字排列整齐、层次分明、可读性更强。

2.1 color：设置文本颜色

color用于设置文字的颜色，是最常用的文本属性之一。合适的文本颜色能提升页面可读性（如深色文字配浅色背景），还能传递情感（如红色表示警告、绿色表示成功）。

2.1.1 颜色取值方式（4 种常用）

css 复制代码

元素 {
  /* 1. 预定义颜色值（单词，最常用） */
  color: red; /* 红色 */
  color: blue; /* 蓝色 */
  color: #333; /* 深灰色（常用正文颜色） */
  
  /* 2. 十六进制值（最精准，推荐） */
  color: #ff0000; /* 红色（6位） */
  color: #f00; /* 红色（3位简写，等同于#ff0000） */
  color: #ffff00; /* 黄色 */
  
  /* 3. RGB/RGBA值（支持透明度，常用） */
  color: rgb(255, 0, 0); /* 红色（R=255, G=0, B=0） */
  color: rgba(255, 0, 0, 0.5); /* 红色，透明度50%（A=0-1） */
  
  /* 4. HSL/HSLA值（按色相、饱和度、亮度，较少用） */
  color: hsl(0, 100%, 50%); /* 红色 */
  color: hsla(0, 100%, 50%, 0.5); /* 红色，透明度50% */
}

2.1.2 关键注意事项

十六进制简写规则 ：当 6 位十六进制值中，每两位字符相同时，可简写为 3 位（如 #ff0000 → #f00，#ffffcc → #ffc），简化书写。

RGB 值范围 ：R（红）、G（绿）、B（蓝）的取值范围是 0-255（色光三原色），rgb(255,255,255) 是白色，rgb(0,0,0) 是黑色。

透明度控制：

RGBA 中的 A（Alpha）取值范围是 0-1（0 完全透明，1 完全不透明）；

如需兼容旧浏览器，可使用 opacity 属性（但 opacity 会影响整个元素，包括背景，而 RGBA 仅影响文字颜色）。

实用技巧：

正文颜色推荐使用 #333（深灰）而非 #000（纯黑），更柔和、易读；

辅助文字（如注释、提示）推荐使用 #999（浅灰）；

可使用 VS Code 颜色选择器（鼠标悬停在颜色值上），可视化调整颜色。

2.1.3 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>color 文本颜色示例</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 20px;
      background-color: #f5f5f5; /* 浅灰背景，突出文字颜色 */
    }
    .color-word { color: red; } /* 预定义颜色值 */
    .color-hex-6 { color: #ff00ff; } /* 6位十六进制 */
    .color-hex-3 { color: #f0f; } /* 3位十六进制（等同于#ff00ff） */
    .color-rgb { color: rgb(0, 255, 0); } /* RGB值 */
    .color-rgba { color: rgba(0, 0, 255, 0.5); } /* RGBA值（半透明） */
    .color-text { color: #333; } /* 正文常用颜色 */
    .color-aux { color: #999; } /* 辅助文字颜色 */
  </style>
</head>
<body>
  <p class="color-word">预定义颜色值：red（红色）</p>
  <p class="color-hex-6">6位十六进制：#ff00ff（紫色）</p>
  <p class="color-hex-3">3位十六进制：#f0f（紫色，和上面一致）</p>
  <p class="color-rgb">RGB值：rgb(0,255,0)（绿色）</p>
  <p class="color-rgba">RGBA值：rgba(0,0,255,0.5)（半透明蓝色）</p>
  <p class="color-text">正文常用颜色：#333（深灰，易读）</p>
  <p class="color-aux">辅助文字颜色：#999（浅灰，不抢重点）</p>
</body>
</html>

运行效果：不同取值方式呈现不同颜色，#333 和 #999 分别适合正文和辅助文字，RGBA 实现半透明效果。

2.2 text-align：设置文本水平对齐

text-align 用于控制文字（或行内元素、行内块元素）的水平对齐方式，是排版中最常用的属性之一（如标题居中、正文左对齐、按钮文字居中）。

2.2.1 基础语法与取值

css 复制代码

元素 {
  text-align: left; /* 左对齐（默认，适合正文） */
  text-align: center; /* 居中对齐（适合标题、按钮） */
  text-align: right; /* 右对齐（适合日期、表单标签） */
  text-align: justify; /* 两端对齐（适合多行文本文档，如新闻、文章） */
}

2.2.1 关键注意事项

作用对象 ：不仅能控制文字对齐，还能控制元素内的行内元素（如 <span>、<a>）和行内块元素（如 <img>、<button>）的水平对齐。

例：div { text-align: center; } 会让 div 内的文字、图片、按钮都居中对齐。

justify 两端对齐：

仅对多行文有效（单行文本无效果）；

会自动调整单词 / 字符间距，让每行文字的左右两端都紧贴容器边缘，排版更整洁；

中文文本需配合 text-justify: inter-ideograph;（IE 支持）或text-justify: distribute;（Chrome 支持），效果更好。

常见误区 ：text-align 只控制水平对齐，不控制垂直对齐 （垂直对齐需用 line-height、flex 等属性）。

2.2.3 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>text-align 文本对齐示例</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 18px;
    }
    .container {
      width: 500px;
      height: auto;
      border: 1px solid #ccc;
      margin: 10px 0;
      padding: 10px;
    }
    .align-left { text-align: left; } /* 左对齐 */
    .align-center { text-align: center; } /* 居中对齐 */
    .align-right { text-align: right; } /* 右对齐 */
    .align-justify { 
      text-align: justify;
      text-justify: inter-ideograph; /* 中文两端对齐适配 */
    } /* 两端对齐 */
  </style>
</head>
<body>
  <div class="container align-left">
    左对齐（默认）：适合正文内容，阅读流畅。<br>
    这是第二行文字，依然左对齐。
  </div>
  
  <div class="container align-center">
    居中对齐：适合标题、按钮文字。<br>
    <img src="rose.jpg" alt="示例图片" width="200"> <!-- 图片也会居中 -->
  </div>
  
  <div class="container align-right">
    右对齐：适合日期、表单标签。<br>
    2024年5月20日
  </div>
  
  <div class="container align-justify">
    两端对齐：适合多行文本文档（如新闻、文章）。两端对齐会自动调整字符间距，让每行文字的左右两端都紧贴容器边缘，排版更整洁、美观。这是一段测试文本，用于演示两端对齐的效果，确保多行文字都能实现均匀分布。
  </div>
</body>
</html>

运行效果：左对齐适合正文，居中对齐让标题和图片居中，右对齐适合日期，两端对齐让多行文本排版更整洁。

2.3 text-decoration：设置文本装饰

text-decoration 用于给文字添加装饰效果（如下划线、上划线、删除线），最常用的场景是 "去掉 <a> 标签的默认下划线"。

2.3.1 基础语法与取值

css 复制代码

元素 {
  text-decoration: none; /* 无装饰（常用，去掉下划线） */
  text-decoration: underline; /* 下划线（常用，强调文字） */
  text-decoration: overline; /* 上划线（不常用） */
  text-decoration: line-through; /* 删除线（常用，标识废弃内容） */
  text-decoration: underline red dotted; /* 复合取值：样式+颜色+线型 */
}

2.3.2 关键注意事项

复合取值语法 ：text-decoration: 线型颜色样式（顺序可灵活调整），如 text-decoration: underline #f00 dashed;（红色虚线下划线）。
常用场景：
- 去掉 <a> 标签默认下划线（a { text-decoration: none; }）------ 实际开发中必用（如导航链接、按钮链接）；
- 下划线（underline）：用于强调文字（如关键词、引用内容）；
- 删除线（line-through）：用于标识废弃内容（如商品原价、过期信息）；
- 上划线（overline）：极少使用（影响可读性）。
兼容性 ：所有浏览器都支持基础取值（none、underline 等），复合取值（如虚线下划线）在现代浏览器中均支持。

2.3.3 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>text-decoration 文本装饰示例</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 20px;
    }
    .decor-none { text-decoration: none; color: blue; } /* 无装饰 */
    .decor-underline { text-decoration: underline; color: red; } /* 下划线 */
    .decor-overline { text-decoration: overline; color: green; } /* 上划线 */
    .decor-line-through { text-decoration: line-through; color: #999; } /* 删除线 */
    .decor-complex { text-decoration: underline #f00 dashed; } /* 复合取值：红色虚线下划线 */
    /* 去掉a标签默认下划线，并添加hover效果 */
    a {
      text-decoration: none;
      color: #333;
    }
    a:hover {
      text-decoration: underline;
      color: red;
    }
  </style>
</head>
<body>
  <p class="decor-none">无装饰：常用于去掉a标签默认下划线（如下面的链接）</p>
  <p class="decor-underline">下划线：用于强调文字（如关键词）</p>
  <p class="decor-overline">上划线：不常用（影响可读性）</p>
  <p class="decor-line-through">删除线：用于标识废弃内容（如原价：¥999）</p>
  <p class="decor-complex">复合取值：红色虚线下划线（样式更丰富）</p>
  
  <br>
  <div>导航链接示例（无默认下划线，hover显示下划线）：
    <a href="#">首页</a> |
    <a href="#">产品</a> |
    <a href="#">服务</a> |
    <a href="#">关于我们</a>
  </div>
</body>
</html>

运行效果：a 标签默认下划线被去掉，hover 时显示红色下划线（实际开发中导航链接的常用样式）；其他装饰效果分别对应不同场景，复合取值让样式更丰富。

2.4 text-indent：设置文本首行缩进

text-indent用于控制段落的首行缩进（仅首行生效，其他行不受影响），是中文排版的核心属性（如正文首行缩进 2 字符）。

2.4.1 基础语法与单位

css 复制代码

元素 {
  text-indent: 数值 + 单位; /* 常用单位：em、px */
}

2.4.2 常用单位说明

em（推荐） ：相对单位，1em = 当前元素的 font-size 值，首行缩进 2em 即 "首行缩进 2 个字符"（中文排版标准）。
- 优点：自适应字体大小 ------ 若字体大小改变，缩进量会同步调整，始终保持 2 个字符；
- 例：font-size: 16px 时，text-indent: 2em = 32px；font-size: 20px 时，text-indent: 2em = 40px。
px（固定单位）：
- **优点：**缩进量固定，精准可控；
- **缺点：**不自适应 ------ 字体大小改变后，缩进量不变，可能不再是 2 个字符；
- **适用场景：**字体大小固定的场景（如固定尺寸的卡片正文）。
百分比（%） ：相对单位，相对于父元素的宽度（如 text-indent: 10% 表示首行缩进父元素宽度的 10%），极少使用（缩进量不稳定）。

2.4.3 关键注意事项

仅对块级元素生效 ：text-indent 只作用于块级元素（如 <p>、<div>、<h1>），对行内元素（如 <span>、<a>）无效。

负缩进 ：text-indent 支持负值（如 text-indent: -2em），表示首行向左缩进（文字会超出容器），常用于实现 "首字下沉" 或特殊排版效果（需配合 padding-left 避免文字被截断）。

换行不影响 ：即使段落内有 <br> 换行，也仅首行缩进（后续换行的行不会缩进）。

2.4.4 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>text-indent 文本首行缩进示例</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 18px;
    }
    .container {
      width: 600px;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 10px 0;
    }
    .indent-em { text-indent: 2em; } /* 推荐：2em（2个字符缩进） */
    .indent-px { text-indent: 36px; } /* 固定：36px（等同于18px*2） */
    .indent-negative {
      text-indent: -2em;
      padding-left: 2em; /* 避免文字超出容器被截断 */
      color: red;
    } /* 负缩进：首行向左缩进 */
  </style>
</head>
<body>
  <div class="container indent-em">
    2em 缩进（推荐）：这是一段中文正文，首行缩进2个字符，符合中文排版习惯。em单位是相对单位，无论字体大小如何改变，缩进量始终是2个字符，自适应效果好。这是第二行文字，不会缩进，仅首行生效。
  </div>
  
  <div class="container indent-px">
    36px 缩进（固定）：这是一段中文正文，首行缩进36px（等同于18px字体的2个字符）。px单位是固定单位，若字体大小改变，缩进量不会同步调整，可能不再是2个字符。
  </div>
  
  <div class="container indent-negative">
    负缩进示例：首行向左缩进2em，通过padding-left: 2em避免文字被截断。这种方式常用于特殊排版（如首字下沉、引用标记），让页面更有设计感。
  </div>
</body>
</html>

运行效果：indent-em 首行缩进 2 个字符（中文排版标准），indent-px 缩进量固定，indent-negative 实现负缩进特殊效果。

2.5 line-height：设置行高

line-height 用于控制两行文字之间的基线距离（行高 = 文字高度 + 上下空白距离），直接影响文本的可读性 ------ 行高过小，文字拥挤难读；行高过大，页面留白过多，浪费空间。

2.5.1 基础语法与取值

css 复制代码

元素 {
  /* 1. 数值 + 单位（常用：px、em、%） */
  line-height: 30px; /* 固定行高 */
  line-height: 1.5em; /* 相对行高（1.5倍字体大小） */
  line-height: 150%; /* 相对行高（1.5倍字体大小） */
  
  /* 2. 纯数值（推荐，无单位） */
  line-height: 1.5; /* 1.5倍字体大小，最常用！ */
}

2.5.2 关键概念与计算

行高构成 ：行高 = 文字高度（font-size） + 上空白距离 + 下空白距离（上下空白距离相等）。
- 例：font-size: 16px，line-height: 24px → 上下空白距离各为 (24-16)/2 = 4px。
纯数值 vs 带单位数值：
- 纯数值 （如 1.5）：相对于当前元素的 font-size，子元素会继承这个倍数（如父元素 line-height: 1.5，子元素 font-size: 20px → 子元素行高 = 20*1.5=30px）；
- 带单位数值 （如 1.5em、150%）：父元素计算出具体行高后，子元素继承这个具体值（如父元素 font-size: 16px，line-height: 1.5em → 父元素行高 = 24px，子元素继承 24px，无论子元素字体大小如何变化）；
- 推荐使用纯数值 （如 1.5）：继承效果更灵活，适配不同字体大小的子元素。
常用行高值：
- 正文文本 ：line-height: 1.5（1.5 倍字体大小，可读性最佳）；
- 标题文本 ：line-height: 1.2（1.2 倍字体大小，紧凑醒目）；
- 单行文本文字垂直居中 ：line-height = 元素高度（如 height: 50px，line-height: 50px → 文字垂直居中）。

2.5.3 关键注意事项

浏览器默认行高 ：Chrome 浏览器默认line-height: normal（约 1.14），IE 约 1.15，建议在 <body> 中统一设置 line-height: 1.5，保证跨浏览器兼容性。

行高与垂直居中 ：对于单行文本，设置 line-height = 元素高度 是最简单的垂直居中方法（无需复杂布局）；对于多行文本，需使用 flex 等布局方式。

行高不影响文字大小 ：line-height 仅控制行间距，不会改变文字本身的大小（font-size 控制文字大小）。

2.5.4 实战代码样例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>line-height 行高示例</title>
  <style>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 18px;
      line-height: 1.5; /* 统一默认行高（推荐） */
    }
    .container {
      width: 600px;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 10px 0;
    }
    .line-height-normal { line-height: normal; } /* 浏览器默认行高（约1.14） */
    .line-height-body { line-height: 1.5; } /* 正文推荐行高（1.5倍） */
    .line-height-title { line-height: 1.2; font-size: 24px; } /* 标题行高（1.2倍） */
    .line-height-center {
      height: 80px;
      line-height: 80px; /* 行高=元素高度，单行文本垂直居中 */
      background-color: #f5f5f5;
    }
    /* 纯数值继承示例 */
    .parent {
      font-size: 16px;
      line-height: 1.5; /* 纯数值，子元素继承倍数 */
    }
    .child {
      font-size: 20px; /* 子元素字体大小20px，行高=20*1.5=30px */
    }
  </style>
</head>
<body>
  <div class="container line-height-normal">
    浏览器默认行高（约1.14）：行间距较小，文字拥挤，可读性差。这是第二行文字，明显感觉和第一行距离太近。
  </div>
  
  <div class="container line-height-body">
    正文推荐行高（1.5倍）：行间距适中，文字清晰易读，符合中文阅读习惯。这是第二行文字，和第一行距离舒适，长时间阅读不易疲劳。这是第三行文字，整体排版整洁。
  </div>
  
  <div class="container line-height-title">
    标题行高（1.2倍）：行间距紧凑，突出标题的醒目性，避免占用过多空间。
  </div>
  
  <div class="container line-height-center">
    单行文本垂直居中：line-height=元素高度（80px），文字完美垂直居中。
  </div>
  
  <div class="container parent">
    父元素：font-size=16px，line-height=1.5（纯数值）<br>
    <span class="child">子元素：font-size=20px，继承line-height=1.5，行高=20*1.5=30px（自适应）</span>
  </div>
</body>
</html>

运行效果：line-height: 1.5 是正文最佳行高，line-height: 1.2 适合标题，line-height=元素高度 实现单行文本垂直居中，纯数值继承让子元素行高自适应。

2.6 文本属性小结

属性名	作用	常用取值 / 单位	核心注意事项
color	设置文本颜色	预定义值、十六进制、RGB/RGBA	正文用 #333，辅助文字用 #999，RGBA 支持透明度
text-align	设置水平对齐	left、center、right、justify	作用于文字、行内元素，justify 仅对多行文有效
text-decoration	设置文本装饰	none、underline、line-through	常用於去掉 a 标签下划线，line-through 标识废弃内容
text-indent	设置首行缩进	em（推荐）、px	仅对块级元素生效，2em=2 个字符，支持负缩进
line-height	设置行高	纯数值（1.5）、px、em	正文用 1.5，单行垂直居中 = 元素高度，纯数值继承好

总结

希望本文的详细拆解和实战代码，能帮你彻底打通 CSS 常用属性的使用壁垒，让你在美化网页时不再迷茫，从容应对各类设计需求！如果在实操中遇到属性兼容、样式冲突等问题，欢迎在评论区留言交流～

【前端开发之CSS】（三）CSS 常用元素属性宝典（上）：从字体到文本，手把手教你打造高颜值网页！

目录

前言

一、字体属性：给文字穿上 "精致外衣"

1.1 font-family：设置字体类型

1.1.1 基础语法与用法

1.1.2 关键注意事项

1.1.3 实战代码样例

1.2 font-size：设置字体大小

1.2.1 基础语法与单位

1.2.2 常用单位说明

1.2.3 关键注意事项

1.2.4 实战代码样例

1.3 font-weight：设置字体粗细

1.3.1 基础语法与取值

1.3.2 关键注意事项

1.3.3 实战代码样例

1.4 font-style：设置文字样式（倾斜 / 正常）

1.4.1 基础语法与取值

1.4.2 关键注意事项

1.4.3 实战代码样例

1.5 字体属性简写（font）

1.5.1 简写语法

1.5.2 关键注意事项

1.5.3 实战代码样例

1.6 字体属性小结

二、文本属性：让文字排版 "工整又美观"

2.1 color：设置文本颜色

2.1.1 颜色取值方式（4 种常用）

2.1.2 关键注意事项

2.1.3 实战代码样例

2.2 text-align：设置文本水平对齐

2.2.1 基础语法与取值

2.2.1 关键注意事项

2.2.3 实战代码样例

2.3 text-decoration：设置文本装饰

2.3.1 基础语法与取值

2.3.2 关键注意事项

2.3.3 实战代码样例

2.4 text-indent：设置文本首行缩进

2.4.1 基础语法与单位

2.4.2 常用单位说明

2.4.3 关键注意事项

2.4.4 实战代码样例

2.5 line-height：设置行高

2.5.1 基础语法与取值

2.5.2 关键概念与计算

2.5.3 关键注意事项

2.5.4 实战代码样例

2.6 文本属性小结

总结