前端新手必看！CSS核心内容梳理：从语法规范到弹性布局，学完就能用-css-CSS教程网

前端新手必看！CSS核心内容梳理：从语法规范到弹性布局，学完就能用

作为前端新手，你是否曾遇到过这些痛点？写的CSS样式不生效，不知道问题出在哪；想让元素居中却调了半小时；明明写了样式，换个浏览器就错乱。这篇博客从实际需求出发，用“人话+实例”拆解CSS核心知识，帮你5分钟掌握关键技能，1小时搞定实战案例。

一、CSS是什么？先搞懂“为什么要学”

你可以把HTML看作“人的骨架”，负责页面的结构；而CSS就是“化妆术+穿搭”，负责美化页面、控制元素位置。它能让单调的文字变成色彩丰富、布局工整的网页，还能实现“样式和结构分离”——改样式时不用动HTML代码，效率翻倍。

举个直观的例子：
没加CSS的HTML页面，就像没穿衣服的人，元素堆在一起毫无章法；加了CSS后，页面会有清晰的颜色、字体、间距和布局，就像精心打扮后的样子。

二、CSS入门必学：3个核心基础（90%场景用得上）

2.1 基本语法：记住“找谁+改啥”

CSS的语法特别简单，核心结构只有两部分：选择器和声明块，就像“找到人，再给他打扮”。

/* 选择器 { 声明块（键值对） } */
p {  /* 选择器：找到所有<p>标签 */
  color: red;  /* 声明1：文字颜色改成红色（键:值;） */
  font-size: 16px;  /* 声明2：字体大小16像素 */
}

易错点提醒：

声明块里的每个键值对必须用;结尾，漏写会导致后面的样式失效；
选择器和{之间必须留一个空格，这是规范，也能避免语法错误；
CSS注释用/* 内容 */，快捷键Ctrl+/，注释内容不会被浏览器解析。

2.2 3种引入方式：选对场景效率高

不同的项目场景，需要用不同的CSS引入方式，选错了会增加维护成本。

引入方式	写法示例	优点	缺点	适用场景
内部样式表	在`<head>`里写`<style>`标签	样式和HTML在一个文件，临时测试方便	样式多了会让HTML文件臃肿	小demo、临时调试
行内样式表	`<div style="color: green;">`	针对性改单个元素样式，优先级高	无法复用，耦合度高	单独调整某个元素（如特殊按钮）
外部样式表	新建`.css`文件，用`<link rel="stylesheet" href="style.css">`引入	样式和HTML彻底分离，复用性强，维护方便	需额外加载文件	实际开发（项目、网站）

实战技巧：

外部样式表是开发首选，但修改后可能因浏览器缓存不生效，按Ctrl+F5强制刷新即可；
行内样式优先级最高，会覆盖其他方式的样式，除非加了!important（尽量少用，会破坏优先级逻辑）。

2.3 代码风格：写得规范，别人才看得懂

新手常忽略代码风格，但不规范的代码会让后续维护变难。推荐以下标准：

展开式写法（比紧凑式易读）：

/* 推荐：展开式 */
div {
  color: #333;
  font-size: 14px;
}

/* 不推荐：紧凑式（样式多了看不清） */
div { color: #333; font-size: 14px; }

统一小写：CSS不区分大小写，但统一小写能避免混乱（如font-size别写成Font-Size）；
空格规范：冒号后面加空格（color: red），选择器和{之间加空格（div {）。

三、核心技能：选择器（精准“找到”元素）

选择器是CSS的“眼睛”，能帮你精准定位要修改的元素。掌握以下8种，能覆盖95%的开发场景。

3.1 4种基础选择器：入门必备

基础选择器是“单打选手”，单独使用就能定位元素，是复合选择器的基础。

（1）标签选择器：“批量选中同一类元素”

按HTML标签名选择，比如选所有<p>、<div>，适合批量修改同一类元素。

/* 选中所有<p>标签，改成灰色 */
p {
  color: #666;
  line-height: 24px; /* 行高，让文字更易读 */
}

缺点：无法差异化选择（比如想让某个<p>变红，标签选择器做不到）。

（2）类选择器：“灵活选中多个元素”

用.类名定义，通过元素的class属性调用，是开发中最常用的选择器（灵活、可复用）。

/* 定义类选择器：.+类名 */
.text-red {
  color: red;
}
.text-bold {
  font-weight: 700; /* 文字加粗（400是正常，700=bold） */
}

<!-- 调用类选择器：class="类名1 类名2"（多个类用空格分隔） -->
<p class="text-red">这段文字是红色的</p>
<div class="text-red text-bold">这段文字又红又粗</div>

易错点：

类名不能用纯数字或中文（如.123、.红色会报错）；
长类名用-分隔（如.user-info，别用驼峰userInfo，CSS不推荐）。

（3）ID选择器：“唯一选中一个元素”

用#ID名定义，通过元素的id属性调用，一个ID在页面中只能用一次（类似身份证号）。

/* 定义ID选择器：#ID名 */
#header {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 加个阴影，更有层次感 */
}

<!-- 调用ID选择器：id="ID名" -->
<header id="header">网站头部</header>

注意：别和类选择器混用！ID是“唯一标识”，类是“通用标签”，比如“用户头像”用类（可能多个），“登录按钮”用ID（只有一个）。

（4）通配符选择器：“选中所有元素”

用*表示，会选中页面所有元素，主要用于“清除浏览器默认样式”。

/* 清除所有元素的默认内外边距（浏览器会自带边距，导致布局错乱） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 重要！让边框和内边距不撑大盒子 */
}

警告：别用通配符写样式（如* { color: red; }），会影响所有元素，性能也差。

3.2 4种复合选择器：精准“筛选”元素

复合选择器是“组合选手”，把基础选择器组合起来，实现更精准的定位。

（1）后代选择器：“选父元素里的子元素”

用空格分隔两个选择器，选中“父元素下所有符合条件的子元素”（包括孙子、曾孙）。

/* 选中.nav类下的所有<a>标签（不管是儿子还是孙子） */
.nav a {
  text-decoration: none; /* 去掉下划线 */
  color: #333;
}

/* 选中#main下的<p>标签里的<span>标签 */
#main p span {
  color: #f00; /* 让段落里的span变红 */
}

<div class="nav">
  <a href="#">首页</a> <!-- 会被选中 -->
  <div>
    <a href="#">分类</a> <!-- 也会被选中（孙子元素） -->
  </div>
</div>

（2）子选择器：“只选父元素的亲儿子”

用>分隔，只选中“父元素的直接子元素”（不包括孙子），比后代选择器更严格。

/* 只选中.nav下的直接子元素<a>，孙子<a>不选 */
.nav > a {
  color: blue;
}

<div class="nav">
  <a href="#">首页</a> <!-- 会被选中（亲儿子） -->
  <div>
    <a href="#">分类</a> <!-- 不被选中（孙子） -->
  </div>
</div>

（3）并集选择器：“同时选中多个元素”

用,分隔多个选择器，实现“多元素同样式”，减少重复代码。

/* 同时选中<h1>、<h2>、.title类，让它们文字居中 */
h1, h2, .title {
  text-align: center;
  margin-bottom: 20px;
}

写法规范：多个选择器分行写，最后一个不加逗号，方便后续修改：

h1,
h2,
.title,
.btn { /* 新增选择器时直接换行，不易出错 */
  text-align: center;
}

（4）伪类选择器：“选中元素的特殊状态”

伪类用:表示，能选中元素的“动态状态”（如鼠标 hover、链接未访问），是交互效果的核心。

最常用的两种伪类：

链接伪类（a标签专用）：必须按LVHA顺序写（否则失效），记忆口诀“绿化”（Link→Visited→Hover→Active）。

/* 1. 未访问的链接 */
a:link {
  color: #333;
  text-decoration: none;
}

/* 2. 已访问的链接 */
a:visited {
  color: #999;
}

/* 3. 鼠标 hover 时（最常用） */
a:hover {
  color: #f40; /* 淘宝红，吸引点击 */
  text-decoration: underline;
}

/* 4. 鼠标按下未松开时 */
a:active {
  color: #c00;
}

焦点伪类（input专用）：选中“正在输入的输入框”，提升用户体验。

/* 输入框获取焦点时（光标在里面），加蓝色边框 */
input:focus {
  outline: none; /* 清除默认边框 */
  border: 2px solid #409eff; /* 自定义边框 */
}

实战技巧：链接伪类实际开发中，只需写a和a:hover（其他状态用默认即可），减少代码量。

四、实战必备：常用样式属性（让页面“好看”）

掌握以下属性，能解决80%的页面美化需求，重点记用法和易错点。

4.1 字体属性：控制文字“长相”

文字是页面的核心，字体属性决定了文字的可读性和美观度。

（1）字体类型（`font-family`）：选对字体不踩坑

/* 推荐写法：多个字体备选（从左到右查找，找不到就用下一个） */
body {
  font-family: "Microsoft YaHei", "Heiti SC", Arial, sans-serif;
  /* 解释：优先微软雅黑→黑体→Arial（无衬线字体，屏幕显示清晰） */
}

易错点：

字体名有空格时，必须加引号（如"Microsoft YaHei"）；
别用小众字体（如“方正楷体”），用户电脑没装就会显示默认字体。

（2）字体大小（`font-size`）：统一基准很重要

/* 给body设置基准字体，其他元素用相对值 */
body {
  font-size: 16px; /* chrome默认16px，建议设为16px */
}

h1 {
  font-size: 2em; /* 2倍基准（32px） */
}

p {
  font-size: 1em; /* 1倍基准（16px） */
}

注意：标题标签（h1-h6）有默认大小，开发中需重新设置，避免不一致。

（3）字体粗细（`font-weight`）：别只知道`bold`

/* 两种写法：关键字或数字（推荐数字，更精准） */
.normal {
  font-weight: normal; /* 正常（等于400） */
}

.bold {
  font-weight: 700; /* 加粗（等于bold） */
}

.light {
  font-weight: 300; /* 细体（适合文艺风格） */
}

技巧：正文用400，标题用700，避免用b标签（用CSS控制样式，更灵活）。

4.2 文本属性：控制文字“排版”

排版决定了页面的阅读体验，重点掌握对齐、缩进、装饰。

（1）文本颜色（`color`）：3种写法任选

/* 1. 预定义颜色（简单，但可选少） */
.text-red {
  color: red;
}

/* 2. 十六进制（最常用，支持所有颜色） */
.text-primary {
  color: #409eff; /* 常用的蓝色 */
}

/* 3. RGB/RGBA（支持透明，适合叠加效果） */
.text-opacity {
  color: rgba(0, 0, 0, 0.6); /* 黑色，60%透明度 */
}

实战技巧：用十六进制时，若两两相同可简写（如#ff0000→#f00），更简洁。

（2）文本对齐（`text-align`）：让文字“站队”

/* 左对齐（默认） */
.text-left {
  text-align: left;
}

/* 居中对齐（标题常用） */
.text-center {
  text-align: center;
}

/* 右对齐（时间、价格常用） */
.text-right {
  text-align: right;
}

注意：text-align不仅能对齐文字，还能对齐图片、按钮等行内元素（让父元素加text-align: center即可）。

（3）文本缩进（`text-indent`）：段落首行缩进

/* 首行缩进2个字符（中文排版常用） */
p {
  text-indent: 2em; /* 1em=当前字体大小，2em=2个字符 */
}

易错点：别用px（不同字体大小下，缩进会不一致），用em更灵活。

（4）文本装饰（`text-decoration`）：去掉下划线

/* 去掉链接下划线（最常用） */
a {
  text-decoration: none;
}

/* 加下划线（如强调文字） */
.underline {
  text-decoration: underline;
}

/* 加删除线（如原价） */
.del {
  text-decoration: line-through;
  color: #999;
}

4.3 背景属性：让元素“有底色”

背景能提升页面层次感，重点掌握背景色、背景图、背景位置。

（1）背景颜色（`background-color`）：基础底色

/* 两种写法：预定义或十六进制 */
.box {
  background-color: #f5f5f5; /* 浅灰色，常用作卡片底色 */
}

/* 透明背景（默认值） */
.transparent {
  background-color: transparent;
}

（2）背景图片（`background-image`）：加图更生动

/* 引入背景图（必须加url()） */
.banner {
  width: 100%;
  height: 200px; /* 必须设高度，否则背景图不显示 */
  background-image: url("banner.jpg"); /* 路径要写对（相对/绝对） */
  background-repeat: no-repeat; /* 禁止平铺（默认会平铺） */
  background-size: cover; /* 图片覆盖整个容器（常用） */
  background-position: center; /* 图片居中显示 */
}

易错点：

背景图不会自动撑开容器，必须给容器设width和height；
background-size: cover会让图片铺满容器，但可能裁剪部分内容；若想完整显示图片，用background-size: contain。

（3）背景简写：减少代码

/* 简写顺序：color → image → repeat → position → size */
.banner {
  background: #f5f5f5 url("banner.jpg") no-repeat center/cover;
  /* 注意：size前要加/，如center/cover */
}

4.4 圆角（`border-radius`）：告别“方盒子”

圆角能让页面更柔和，是现代UI设计的必备属性。

/* 1. 所有角统一圆角（常用） */
.btn {
  border-radius: 4px; /* 数值越大，圆角越明显 */
}

/* 2. 圆形（必须是正方形容器） */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 50%=正方形边长的一半，变成圆形 */
}

/* 3. 单独设置某个角（顺时针：左上→右上→右下→左下） */
.box {
  border-radius: 10px 20px 30px 40px;
}

实战案例：按钮常用border-radius: 20px（胶囊形），提升点击欲望。

五、难点突破：盒模型与弹性布局（解决“布局”问题）

布局是前端的核心难点，掌握盒模型和弹性布局，能解决90%的布局需求。

5.1 盒模型：理解“元素的大小”

每个HTML元素都是一个“盒子”，由4部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

（示意图：内容区是核心，padding是内容和边框的间距，border是盒子的边，margin是盒子和其他盒子的间距）

关键问题：盒子的“实际大小”怎么算？

默认情况下，盒子的实际宽度=内容宽度（width）+ padding + border，这会导致设置width: 200px的盒子，实际显示比200px大。

解决方案：给元素加box-sizing: border-box，让width包含padding和border，计算更直观。

/* 全局设置，所有元素都用border-box（开发必加） */
* {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #000;
  /* 实际宽度=200px（包含padding和border），不用手动计算 */
}

5.2 弹性布局（Flex）：搞定“对齐”和“排列”

弹性布局是现代布局的首选，能轻松实现“水平居中、垂直居中、均匀分布”等需求，比传统的浮动布局更简单。

核心概念：父容器和子元素

弹性布局的规则是：给父容器加display: flex，然后通过父容器的属性控制子元素的排列。

<!-- 父容器：.container -->
<div class="container">
  <!-- 子元素：.item -->
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

常用父容器属性（重点记这2个）

justify-content：控制子元素在“主轴”（默认水平方向）的排列

.container {
  display: flex;
  justify-content: space-between; /* 子元素两端对齐，中间间距相等（常用） */
  /* 其他可选值：
     flex-start：左对齐（默认）
     center：水平居中（常用）
     space-around：子元素两侧间距相等
     flex-end：右对齐
  */
}

align-items：控制子元素在“侧轴”（默认垂直方向）的排列

.container {
  display: flex;
  height: 200px; /* 必须设父容器高度，否则垂直方向没空间 */
  align-items: center; /* 子元素垂直居中（常用） */
  /* 其他可选值：
     stretch：子元素拉伸填满父容器（默认，子元素没高度时生效）
     flex-start：顶部对齐
     flex-end：底部对齐
  */
}

实战案例：实现“水平+垂直居中”

这是最常见的需求（如登录弹窗、按钮文字），用Flex只需3行代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 父容器必须有高度 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #409eff;
}

效果：子元素.item会在.container的正中间，不管父容器大小怎么变，都会保持居中。

六、实战案例：用CSS实现百度热榜（附完整代码）

学完理论，用实际案例巩固。下面用CSS实现百度热榜的核心样式，包含表格布局、伪类、背景图等知识点。

6.1 最终效果

（示意图：左侧排名+标题，右侧热度，排名1-3有不同颜色）

6.2 完整代码（可直接复制到CSDN）

<!DOCTYPE html>
<html lang="zh-***">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度热榜案例</title>
  <style>
    /* 1. 清除默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }

    /* 2. 表格样式 */
    table {
      width: 536px; /* 百度热榜默认宽度 */
      border-collapse: collapse; /* 合并边框，避免双边框 */
      margin: 20px auto; /* 表格水平居中 */
    }

    /* 3. 表头样式（“百度热榜”和“换一换”） */
    .title {
      font-size: 20px;
      font-weight: 700;
      padding: 10px 0;
      border-bottom: 2px solid #f5f5f5;
    }

    .title .col-2 {
      font-size: 14px;
      font-weight: normal; /* 取消加粗，和“换一换”匹配 */
    }

    /* 4. 列宽设置 */
    .col-1 {
      width: 80%;
      text-align: left;
      padding-left: 15px;
    }

    .col-2 {
      width: 20%;
      text-align: center;
      color: #999;
    }

    /* 5. 内容行样式 */
    .content {
      font-size: 18px;
      line-height: 36px; /* 行高，让文字垂直居中 */
    }

    .content tr {
      border-bottom: 1px solid #f5f5f5; /* 每行底部加灰色边框 */
    }

    /* 6. 排名数字样式（1-3不同颜色） */
    .num {
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #fff;
      border-radius: 4px;
      margin-right: 8px;
    }

    .first {
      background-color: #f54545; /* 第1名：红色 */
    }

    .second {
      background-color: #ff8547; /* 第2名：橙色 */
    }

    .third {
      background-color: #ffac38; /* 第3名：黄色 */
    }

    .other {
      background-color: #83b9f5; /* 4名及以后：蓝色 */
    }

    /* 7. 链接样式 */
    a {
      color: #333;
      text-decoration: none;
    }

    a:hover {
      color: #f40; /* 鼠标hover时变淘宝红，提升交互感 */
      text-decoration: underline;
    }

    /* 8. “换一换”图标（用背景图实现） */
    .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url("refresh.png"); /* 替换成你的刷新图标路径 */
      background-size: 100% 100%;
      vertical-align: middle; /* 图标和文字垂直居中 */
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <table>
    <!-- 表头 -->
    <tr>
      <th class="title col-1">百度热榜</th>
      <th class="title col-2">
        <a href="#">换一换<span class="icon"></span></a>
      </th>
    </tr>
    <!-- 内容行1 -->
    <tr class="content">
      <td class="col-1">
        <span class="num first">1</span>
        <a href="#">美丽中国铺展新画卷</a>
      </td>
      <td class="col-2">234万</td>
    </tr>
    <!-- 内容行2 -->
    <tr class="content">
      <td class="col-1">
        <span class="num second">2</span>
        <a href="#">2024年高考报名人数创新高</a>
      </td>
      <td class="col-2">198万</td>
    </tr>
    <!-- 内容行3 -->
    <tr class="content">
      <td class="col-1">
        <span class="num third">3</span>
        <a href="#">新能源汽车销量同比增长30%</a>
      </td>
      <td class="col-2">156万</td>
    </tr>
    <!-- 内容行4 -->
    <tr class="content">
      <td class="col-1">
        <span class="num other">4</span>
        <a href="#">全球首个AI城市管理平台上线</a>
      </td>
      <td class="col-2">123万</td>
    </tr>
  </table>
</body>
</html>

6.3 代码解析（重点知识点）

border-collapse: collapse：表格默认有双边框，加这个属性能合并边框，让样式更整洁；
vertical-align: middle：让“换一换”文字和图标垂直居中，避免图标偏移；
排名数字用display: inline-block：让数字能设置宽高和居中，实现圆形背景效果；
链接hover效果：提升用户交互体验，让用户知道“这是可点击的”。

七、常见问题排查（新手避坑指南）

样式不生效？先查这3点：
- 选择器写错了（如类选择器漏了.，ID选择器漏了#）；
- 样式被覆盖了（检查是否有更优先的选择器，如行内样式）；
- 路径错了（外部样式表href路径不对，导致CSS没加载）。
元素居中不了？看这2个场景：
- 水平居中：块级元素加margin: 0 auto（必须设宽度），行内元素给父元素加text-align: center；
- 垂直居中：用Flex布局（父容器加display: flex; align-items: center），别用vertical-align（只对行内元素生效）。
浏览器样式不一致？加“重置样式”：
不同浏览器有默认样式（如body有margin），在CSS开头加全局重置：
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

八、总结：学习路径推荐

入门：掌握基础选择器、常用属性（字体、文本、背景），能写简单页面；
进阶：吃透盒模型和弹性布局，解决布局问题；
实战：模仿百度热榜、广告板等案例，把知识落地；
优化：学习CSS3新特性（如渐变、动画），让页面更生动。

最后，CSS学习没有捷径，多写多练才能熟练。遇到问题时，用Chrome调试工具（F12）查看样式，能快速定位问题——这是前端开发的必备技能！

转载请说明出处内容投诉
CSS教程网 » 前端新手必看！CSS核心内容梳理：从语法规范到弹性布局，学完就能用

星晴

分享到：

一、CSS是什么？先搞懂“为什么要学”

二、CSS入门必学：3个核心基础（90%场景用得上）

2.1 基本语法：记住“找谁+改啥”

2.2 3种引入方式：选对场景效率高

2.3 代码风格：写得规范，别人才看得懂

三、核心技能：选择器（精准“找到”元素）

3.1 4种基础选择器：入门必备

（1）标签选择器：“批量选中同一类元素”

（2）类选择器：“灵活选中多个元素”

（3）ID选择器：“唯一选中一个元素”

（4）通配符选择器：“选中所有元素”

3.2 4种复合选择器：精准“筛选”元素

（1）后代选择器：“选父元素里的子元素”

（2）子选择器：“只选父元素的亲儿子”

（3）并集选择器：“同时选中多个元素”

（4）伪类选择器：“选中元素的特殊状态”

四、实战必备：常用样式属性（让页面“好看”）

4.1 字体属性：控制文字“长相”

（1）字体类型（font-family）：选对字体不踩坑

（2）字体大小（font-size）：统一基准很重要

（3）字体粗细（font-weight）：别只知道bold

4.2 文本属性：控制文字“排版”

（1）文本颜色（color）：3种写法任选

（2）文本对齐（text-align）：让文字“站队”

（3）文本缩进（text-indent）：段落首行缩进

（4）文本装饰（text-decoration）：去掉下划线

4.3 背景属性：让元素“有底色”

（1）背景颜色（background-color）：基础底色

（2）背景图片（background-image）：加图更生动

（3）背景简写：减少代码

4.4 圆角（border-radius）：告别“方盒子”

五、难点突破：盒模型与弹性布局（解决“布局”问题）

5.1 盒模型：理解“元素的大小”

关键问题：盒子的“实际大小”怎么算？

5.2 弹性布局（Flex）：搞定“对齐”和“排列”

核心概念：父容器和子元素

常用父容器属性（重点记这2个）

实战案例：实现“水平+垂直居中”

六、实战案例：用CSS实现百度热榜（附完整代码）

6.1 最终效果

6.2 完整代码（可直接复制到CSDN）

6.3 代码解析（重点知识点）

七、常见问题排查（新手避坑指南）

八、总结：学习路径推荐

星晴

发表评论

一个令你着迷的主题！

（1）字体类型（`font-family`）：选对字体不踩坑

（2）字体大小（`font-size`）：统一基准很重要

（3）字体粗细（`font-weight`）：别只知道`bold`

（1）文本颜色（`color`）：3种写法任选

（2）文本对齐（`text-align`）：让文字“站队”

（3）文本缩进（`text-indent`）：段落首行缩进

（4）文本装饰（`text-decoration`）：去掉下划线

（1）背景颜色（`background-color`）：基础底色

（2）背景图片（`background-image`）：加图更生动

4.4 圆角（`border-radius`）：告别“方盒子”