CSS网页美化学习笔记

下饭康

90人浏览 · 2026-05-22 23:53:28

下饭康 · 2026-05-22 23:53:28 发布

CSS 网页美化学习笔记

本博客主要涵盖了基础选择器、字体文本样式、盒子模型、浮动与定位等核心内容。

一、CSS 基础概念

1.1 CSS 认识

CSS（Cascading Style Sheets，层叠样式表） 是一种用于描述 HTML 文档外观和格式的样式语言。

在 Web 标准三层模型中：

结构层：HTML —— 负责页面骨架与内容语义
表现层：CSS —— 负责视觉呈现与美化
行为层：JavaScript —— 负责交互逻辑与动态效果

1.2 CSS 引入方式

CSS 共有三种引入方式，按优先级从低到高排列如下：

引入方式	语法示例	适用场景
外联式	`<link rel="stylesheet" href="./style.css">`	项目开发首选，样式与结构分离，便于复用和维护
内嵌式	`<style> p { color: red; } </style>`	单页面快速调试或小型 Demo
行内式	`<p style="color: green;">文本</p>`	优先级最高，仅用于极少数需要强制覆盖的场景

优先级规则：行内式 > 内嵌式 > 外联式（同级遵循"后来者居上"原则）。

二、基础选择器

选择器是 CSS 的核心机制，用于精准定位需要设置样式的 HTML 元素。

2.1 标签选择器

p {
  color: red;
}

结构：标签名 { CSS属性名: 属性值; }
作用：选中页面中所有该类型的标签
注意点：
1. 选择的是一类标签，而非单独某一个
2. 无论嵌套层级多深，均能命中目标标签

2.2 类选择器

.one {
  color: red;
}

<div class="one">类选择器</div>

结构：.类名 { CSS属性名: 属性值; }
作用：通过类名选中所有带有该类名的标签
命名规范：
- 可由数字、字母、下划线、中划线组成
- 不能以数字或中划线开头
- 一个标签可同时拥有多个类名，类名之间以空格分隔
- 类名可重复，一个类选择器可同时选中多个标签

2.3 ID 选择器

#two {
  color: blue;
}

<div id="two">id选择器</div>

结构：#id属性值 { CSS属性名: 属性值; }
作用：通过唯一标识符选中特定标签
注意点：
1. 同一页面中，ID 属性值必须唯一，不可重复
2. 一个标签只能有一个 ID 属性值
3. 一个 ID 选择器只能选中一个标签

2.4 通配符选择器

* {
  margin: 0;
  padding: 0;
}

结构：* { CSS属性名: 属性值; }
作用：选中页面中所有标签
注意点：
1. 实际开发中极少使用，仅在特殊场景（如清除默认内外边距）下使用
2. 性能开销较大，不推荐在大型项目中滥用

三、字体与文本样式

3.1 字体样式

属性	作用	常用值
`font-size`	字体大小	`12px`、`14px`、`16px` 等
`font-weight`	字体粗细	`normal`(400)、`bold`(700)、数值
`font-style`	字体样式	`normal`、`italic`（斜体）
`font-family`	字体类型	`"Microsoft YaHei"`、`Arial` 等

3.2 文本样式

属性	作用	常用值
`text-indent`	文本缩进	`2em`（首行缩进两字符）
`text-align`	水平对齐	`left`、`center`、`right`
`text-decoration`	文本修饰	`none`、`underline`、`line-through`

3.3 行高（line-height）

行高由三部分组成：上间距 + 文本高度 + 下间距。

p {
  line-height: 32px;
}

典型应用场景：

单行文本垂直居中：设置 line-height 等于父元素高度
消除上下间距：设置 line-height: 1，常用于精准布局

3.4 颜色

属性	作用
`color`	设置文字颜色
`background-color`	设置背景颜色

颜色取值方式：

颜色关键字：red、blue、black
十六进制：#ff0000、#87ceeb
RGB/RGBA：rgb(255, 0, 0)、rgba(0, 0, 0, 0.5)

四、Chrome 调试工具

Chrome 开发者工具是前端开发中不可或缺的调试利器。

4.1 打开方式

快捷键：F12 或 Ctrl + Shift + I
右键菜单：在页面元素上右键 → “检查”

4.2 核心面板

面板	功能
Elements	显示当前页面的 HTML 结构，支持实时编辑
Styles	显示当前选中标签的 CSS 样式，支持实时修改

4.3 选择元素的两种方式

在左侧 Elements 面板中直接点击目标元素
点击左上角选择器按钮后，直接在网页中点击目标元素

4.4 样式调试操作

操作	方法
修改属性值	直接点击属性值进行编辑
添加属性	在最后一个属性的分号后点击，直接输入新属性
控制样式生效	点击属性前的小复选框，勾选/取消勾选

⚠️ 重要：调试工具中的修改仅为临时效果，刷新页面后失效。如需永久生效，必须在源代码中修改。

4.5 特殊情况识别

现象	含义	可能原因
样式上有删除线	样式失效	① 被注释掉 ② 被其他样式覆盖
样式前有黄色小三角	样式报错	① 属性值后缺少分号 ② 使用了中文标点 ③ 属性名或值拼写错误

五、复合选择器

5.1 后代选择器（空格）

.nav li {
  color: red;
}

语法：选择器1 选择器2 { CSS }
作用：在选择器1 选中的元素的后代（儿子、孙子、重孙子等）中，找到满足选择器2 的元素
注意：选择器之间通过空格隔开

5.2 子代选择器（>）

.nav > li {
  color: red;
}

语法：选择器1 > 选择器2 { CSS }
作用：仅选中选择器1 的直接子元素（儿子）
注意：选择器之间通过 > 隔开

5.3 并集选择器（,）

h1, h2, p {
  color: red;
}

语法：选择器1, 选择器2 { CSS }
作用：同时选中多组标签，设置相同样式
注意：
- 每组选择器之间通过逗号分隔
- 每组选择器可以是基础选择器或复合选择器
- 建议每组选择器单独写一行，提高可读性

5.4 hover 伪类选择器

a:hover {
  color: red;
}

语法：选择器:hover { CSS }
作用：选中鼠标悬停在元素上的状态
注意：伪类选择器选中的是元素的某种状态，而非元素本身

5.5 结构伪类选择器

根据元素在 HTML 中的结构关系查找元素，减少对 class 的依赖。

公式	功能
`:nth-child(2n)` 或 `:nth-child(even)`	选中偶数项
`:nth-child(2n+1)` 或 `:nth-child(odd)`	选中奇数项
`:nth-child(n+5)`	选中从第 5 个开始往后的元素
`:nth-child(-n+5)`	选中前 5 个元素

5.6 Emmet 语法

Emmet 是一种快速编写 HTML/CSS 的缩写语法，能大幅提升编码效率。

六、背景相关属性

6.1 背景颜色

.box {
  background-color: #87ceeb;
}

默认值：transparent（透明）
不会影响盒子大小，但能清晰展示盒子的位置和范围

6.2 背景图片

.box {
  background-image: url("images/bg.jpg");
}

URL 中的引号可以省略
默认在水平和垂直方向平铺
仅起装饰作用，不能撑开盒子

6.3 背景平铺

.box {
  background-repeat: no-repeat;
}

属性值	效果
`repeat`	默认值，水平和垂直方向均平铺
`no-repeat`	不平铺，只显示一次
`repeat-x`	仅在水平方向平铺
`repeat-y`	仅在垂直方向平铺

6.4 背景位置

.box {
  background-position: center center;
}

取值方式一：方位名词

水平方向	垂直方向
`left`	`top`
`center`	`center`
`right`	`bottom`

最多可表示 9 个位置（3×3 组合）

取值方式二：坐标值

原点 (0, 0) 为盒子的左上角
X 轴：水平向右
Y 轴：垂直向下
操作：将图片左上角与坐标点重合

方位名词与坐标值可以混用，第一个值表示水平方向，第二个值表示垂直方向。

6.5 背景属性连写

.box {
  background: #87ceeb url("bg.jpg") no-repeat center center;
}

推荐书写顺序：background: color image repeat position
可按需省略某些值
注意：若需单独设置某个属性，应写在连写属性的下方，或放入连写内部

七、元素显示模式

HTML 元素按显示特性可分为三类：

7.1 块级元素（display: block）

特点：

独占一行（一行只能显示一个）
宽度默认是父元素的 100%，高度默认由内容撑开
可以设置宽高

代表标签：div、p、h1~h6、ul、li 等

7.2 行内元素（display: inline）

特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签：a、span、strong、em 等

7.3 行内块元素（display: inline-block）

特点：

一行可以显示多个
可以设置宽高

代表标签：input、textarea、button、select、img

注：img 标签具有行内块元素特点，但在 Chrome 调试工具中显示为 inline。

7.4 显示模式转换

/* 转换为块级元素 */
span {
  display: block;
}

/* 转换为行内块元素 */
a {
  display: inline-block;
}

目的：改变元素默认的显示特点，使其符合布局需求。

八、盒子模型

8.1 盒子模型概述

CSS 中规定每个盒子由以下四部分构成：

组成部分	英文	说明
内容区域	content	存放文字、图片等实际内容
内边距区域	padding	内容与边框之间的距离
边框区域	border	盒子的边界线
外边距区域	margin	盒子与盒子之间的距离

8.2 内容区域（Content）

.box {
  width: 234px;
  height: 300px;
}

width 和 height 默认设置的是内容区域的大小
常见取值：数字 + px

8.3 边框（Border）

单个属性设置：

.box {
  border-width: 1px;      /* 边框粗细 */
  border-style: solid;     /* 边框样式 */
  border-color: red;       /* 边框颜色 */
}

连写形式：

.box {
  border: 1px solid red;
}

单方向设置：

.box {
  border-top: 1px solid red;
  border-right: 2px dashed blue;
  border-bottom: 1px solid red;
  border-left: 2px dashed blue;
}

8.4 内边距（Padding）

.box {
  padding: 10px;           /* 四边均为 10px */
  padding: 10px 20px;     /* 上下 10px，左右 20px */
  padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */
  padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */
}

记忆规则：从上开始赋值，然后顺时针赋值；若设置值不足，看对面的值。

8.5 外边距（Margin）

.box {
  margin: 10px;           /* 四边均为 10px */
  margin: 0 auto;         /* 上下 0，左右自动（水平居中） */
}

记忆规则：与 padding 相同，从上开始顺时针赋值。

注意：

块级元素可通过 margin: 0 auto 实现水平居中

浮动元素不能通过 text-align: center 或 margin: 0 auto 实现自身水平居中

九、浮动（Float）

9.1 浮动的作用

让垂直布局的盒子变为水平布局，常用于实现左右排列效果。

.left {
  float: left;
}

.right {
  float: right;
}

9.2 浮动的特点

脱标：浮动元素脱离标准流，在标准流中不占位置
层级提升：浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动：下一个浮动元素会在上一个浮动元素后面左右排列
受边界影响：浮动元素会受到上方元素边界的影响
特殊显示效果：一行可以显示多个，且可以设置宽高

9.3 清除浮动

当子元素浮动后，由于脱标不占位置，无法撑开标准流的块级父元素，导致父元素高度为 0，影响后续布局。

清除浮动的方法：

方法	代码	说明
直接设置父元素高度	`.parent { height: 300px; }`	简单直接，但不够灵活
overflow 隐藏	`.parent { overflow: hidden; }`	常用方法，触发 BFC
额外标签法	在父元素末尾添加空 div 并设置 `clear: both`	结构冗余，不推荐
伪元素清除	`.parent::after { content: ""; display: block; clear: both; }`	最佳实践，结构清晰

十、定位（Position）

10.1 定位的基本介绍

定位可以让元素自由摆放在网页的任意位置，主要用于：

解决盒子与盒子之间的层叠问题
让盒子固定在屏幕中的某个位置

10.2 定位的基本使用

第一步：设置定位方式

属性值	名称	参照物
`static`	静态定位（默认）	无
`relative`	相对定位	自己原来的位置
`absolute`	绝对定位	最近的非 static 定位祖先元素
`fixed`	固定定位	浏览器可视区域

第二步：设置偏移值

属性	方向
`top`	距离顶部的偏移
`bottom`	距离底部的偏移
`left`	距离左侧的偏移
`right`	距离右侧的偏移

选取原则：就近原则（离哪边近用哪个）。

10.3 相对定位（relative）

特点：相对于自己原来的位置进行移动，没有脱标，在页面中仍占位置
应用场景：
1. 配合绝对定位组成"子绝父相"
2. 小范围的微调移动

10.4 绝对定位（absolute）

特点：
1. 默认相对于浏览器可视区域进行移动
2. 已经脱标，在页面中不占位置
3. 会向上查找具有非 static 定位的父元素作为参照
应用场景：配合相对定位组成"子绝父相"

10.5 子绝父相

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  left: 10px;
}

含义：子元素使用绝对定位，父元素使用相对定位
好处：父元素使用相对定位对网页整体布局影响最小，同时又能为子元素提供定位参照

10.6 固定定位（fixed）

特点：
1. 相对于浏览器可视区域进行移动
2. 已经脱标，在页面中不占位置
3. 不随页面滚动而改变位置
应用场景：固定导航栏、回到顶部按钮、侧边悬浮广告等

10.7 元素层级关系（z-index）

.box1 {
  z-index: 10;
}

.box2 {
  z-index: 5;
}

属性：z-index
取值：数字，数字越大，层级越高
作用：改变定位元素的堆叠顺序

⚠️ 注意：定位的元素会脱标（如绝对定位），脱标后的元素宽高默认由内容撑开，需手动设置宽高。

十一、综合练习要点

练习 1：产品卡片布局

掌握字体大小、颜色、行高的综合运用
理解 text-align 和 line-height 的配合使用

练习 2：图文混排布局

运用浮动实现左右布局
掌握图片与文字的间距控制

练习 3：页面整体布局

理解头部、侧边栏、内容区、底部的结构划分
运用浮动和清除浮动完成多栏布局

练习 4：遮罩层效果

运用绝对定位实现覆盖效果
结合 hover 伪类实现交互
使用 opacity 或 rgba 控制透明度

附录：常用 CSS 属性速查表

属性	作用
`color`	文字颜色
`font-size`	字体大小
`font-weight`	字体粗细
`font-family`	字体类型
`text-align`	文本水平对齐
`text-indent`	文本缩进
`text-decoration`	文本修饰
`line-height`	行高
`width` / `height`	宽高
`background-color`	背景颜色
`background-image`	背景图片
`background-repeat`	背景平铺
`background-position`	背景位置
`border`	边框
`padding`	内边距
`margin`	外边距
`display`	显示模式
`float`	浮动
`clear`	清除浮动
`position`	定位方式
`top` / `bottom` / `left` / `right`	偏移值
`z-index`	层级