CSS书写规范#

良好的书写规范，让我们更专业。虽然代码自动格式化，但是我们还需要了解：

1. 选择器和大括号中间保留1个空格距离。
2. 属性名和属性值中间也要保留1个空格。
3. 每个CSS属性单独占一行。后期会打包压缩，无需担心体积问题。

示例代码

1
p {
2
  color: gold;
3
  font-size: 20px;
4
}

CSS注释 + AI注释#

CSS注释的快捷键是 ctrl + /，注意注释内容左右两侧保持一个空格距离是良好习惯。

示例代码

1
span {
2
  /* 这里添加注释 */
3
  color: green;
4
}

AI工具注释

1. 单个属性注释可以在CSS属性后面打一个空格即可自动添加注释。
2. 如果想要给多个属性添加注释，选中CSS添加到右侧对话区，输入提示词即可。

id选择器和类选择器区别#

类选择器

• 语法：以 . 开头，后跟类名（如 .nav）
• 作用：选择 class 属性的一个或多个元素
• 特点：可以使用多次
• 类似：身份证的名字，可以使用多次
• 场景：后期修改样式基本都是类选择器

id选择器

• 语法：以 # 开头，后跟 id 名（如 #header）
• 作用：选择特定 id 属性的唯一元素
• 特点：同一页面中，id 值必须唯一（不能重复）
• 类似：身份证的编号，唯一，只能用一次
• 场景：后期主要是配合 JavaScript 添加交互效果

邻接兄弟选择器#

选中紧跟在指定元素后面的第一个同级元素。
语法：

1
指定元素 + 同级元素 {
2
  样式声明;
3
  ...
4
}

通用兄弟选择器#

选中指定元素后面所有同级元素（不要求紧邻）。
语法：

1
指定元素 ~ 同级元素 {
2
  样式声明;
3
  ...
4
}

我们用以下HTML结构来详细说明邻接兄弟选择器和通用兄弟选择器的区别。

1
<div class="box">
2
  <p>文字内容</p>
3
  <p>文字内容</p>
4
  <p>文字内容</p>
5
  <h2>标题</h2>
6
  <p>文字内容</p>
7
  <p>文字内容</p>
8
  <p>文字内容</p>
9
</div>

使用邻接兄弟选择器选中紧跟在h2后面的第一个p元素

1
h2 + p {
2
  color: pink;
3
}

效果：

使用通用兄弟选择器选中紧跟在h2后面的所有p元素

1
h2 ~ p {
2
  color: pink;
3
}

效果：

字体颜色color#

最常见的颜色指定方式：使用关键字、十六进制值和 rgb() 值。
学习可以用关键字，开发用十六进制，特殊情况用rgb。

1. 关键字
这些颜色通常不会在生产环境的网站中使用，主要学习使用。
比如：red、green、blue、pink等。
示例代码：

1
p {
2
  color: pink;
3
}

2. 十六进制
这个是开发最常用的。实际开发中，我们从设计稿直接复制即可。
比如：红色 #FF0000 或者 #F00。
示例代码：

1
p {
2
  color: #f00;
3
}

3. rgb格式
rgb() 函数接受三个参数，分别表示颜色的红、绿和蓝。也是设计稿复制的。
比如：红色 rgb(255,0,0)。
示例代码：

1
p {
2
  color: rgb(255, 0, 0);
3
}

4. rgba格式
rgba() 函数与 rgb() 类似，但多了一个参数表示透明度。0是完全透明，1是不透明
比如：红色 rgba(255,0,0, 0.3) 表示红色透明度为 0.3。
示例代码：

1
p {
2
  color: rgba(255, 0, 0, 0.3);
3
}

字体族font-family#

给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体

1
body {
2
  fonot-familiy: Arial, Helvetica, sans-serif;
3
}

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的单位

在实际开发中，都是规定好的可以直接复制即可，无需记忆

字体大小font-size#

font-size可以设置字体大小

1
p {
2
  font-size: 18px;
3
}

像素px

---

CSS像素(CSS Pixel)是CSS中用于定义长度，尺寸的单位(简写为px)
绝对单位

不同浏览器默认字体大小不一样，谷歌默认16px，建议给body标签统一指定大小，做到浏览器统一

字体风格font-style#

font-style用来打开和关闭文本italic(斜体)
属性值：

• normal：将文本设置为普通字体(将存在的斜体关闭)
• italic：如果当前字体的斜体版本可用，那么文本设置为斜体版本

1
p {
2
  font-style: italic; /* 设置斜体样式 */
3
}

最常见：让em或者i标签取消默认倾斜

1
em {
2
  font-style: normal;
3
}
4

5
i {
6
  font-style: normal;
7
}

字体粗体font-weight#

font-weight设置文字的粗体大小

使用场景:

1. 很多标题是不要加粗的，此时可以用CSS取消加粗
2. 部分大批量文字可以利用CSS样式加粗

属性值：

• normal：正常粗细
• bold：加粗 其他值受属性影响基本不用

数字属性值（常用）：

• 400：正常粗细
• 700：加粗 取值范围100到900之间，常用就是400和700

示例：

1
p {
2
  font-weight: 700;
3
}

字体装饰text-decoration#

设置/取消字体上的文本装饰

使用场景：

1. 最常见设置链接下划线，比如取消下划线等
2. 特殊情况添加删除线

属性值：

• none:取消文本装饰
• underline:下划线
• overline:上划线
• line-through:穿过文本的线

示例：

1
a {
2
  text-decoration: none;
3
}

字体样式总结#

文本布局样式表#

文本对齐text-align#

控制文本在它所在的块级盒子内如何水平对齐

使用场景：

1. 文本/图片在盒子水平对齐
2. 文章文字两端对齐

属性值：

• left:文本左对齐
• right:文本右对齐
• center:文本水平居中对齐
• justify:自动改变字间距，两端对齐

示例：

1
p {
2
  text-align: center; /* 居中对齐 */
3
}

首行缩进text-indent#

设置块级元素中文本行前面空格（缩进）的长度

使用场景：

1. 段落首行缩进两个字的效果
2. logo隐藏文字效果(后续讲解)

属性值：数字
常见单位是em，相对单位，本元素的文字大小1em等于当前元素的字体大小，如果当前元素没有大小，则按照父元素文字大小

示例：

1
p {
2
  text-indent: 2em; /* 缩进2个文字大小 */
3
}

字间距letter-spacing#

用于设置文本字符的间距

使用场景：

1. 调整字与字间距，用户体验更好

属性值：数字 常见单位是px ，默认是0px

示例：

1
p {
2
  letter-spacing: 2px; /* 字间距2px */
3
}

行高line-height#

设置文本每行的高

使用场景：

1. 设置多行文本之间的上下间距。
2. 让单行文本垂直居中。

常用属性值：

• 数字px
• 数字不带单位(当前字体大小的倍数)

示例：

1
p {
2
  line-height: 24px; /* 行高24px */
3
}

单行文本垂直居中原理：
行高组成：

1. 上间距
2. 字体大小
3. 下间距

行高等于盒子高度，即可实现垂直居中

文本布局总结#

链接伪类#

链接伪类用于根据链接的不同状态（如未访问，悬停，点击等）为其添加样式，从而提升用户体验和界面交互性。

使用场景：

1. 设置链接不同状态的样式

链接伪类使用：

伪类顺序规则（LVHA 顺序） a:link -> a:visited -> a:hover -> a:active

注意事项：

• 链接伪类的顺序不能颠倒，否则会导致样式失效
• 链接伪类可以与其他选择器组合使用，比如：p a:hover表示段落中的悬停链接

示例：

1
a:link {
2
  color: blue; /* 未访问链接为蓝色 */
3
}
4

5
a:visited {
6
  color: purple; /* 已访问链接为紫色 */
7
}
8

9
a:hover {
10
  color: red; /* 鼠标悬停链接为红色 */
11
}
12

13
a:active {
14
  color: green; /* 链接被点击时为绿色 */
15
}

实际开发中，一般这样写：

淘宝

1
a {
2
  text-decoration: none;
3
}
4
a:hover {
5
  text-decoration: underline;
6
}

京东

1
a {
2
  color: #666;
3
  text-decoration: none;
4
}
5
a:hover {
6
  color: #ff0f23;
7
}

小米

1
a {
2
  color: #757575;
3
}
4
a,
5
a:hover {
6
  text-decoration: none;
7
}
8
a:hover {
9
  color: #ff6700;
10
}

用户行为伪类#

用户以某种方式和文档交互的时候使用，这些用户行为伪类，有时叫做动态伪类。

使用场景：

1. 鼠标经过元素的时候，修改样式
2. 表单获得焦点的时候，修改样式

用户行为伪类使用：

示例：

鼠标经过元素

1
div {
2
  background-color: pink;
3
}
4
div:hover {
5
  background-color: red;
6
  color: red;
7
  /* 鼠标经过元素，背景颜色和文字颜色都变成红色 */
8
}

获得焦点的元素（表单）

1
input {
2
  border: 1px solid #ccc;
3
}
4
input:focus {
5
  border: 2px solid red;
6
  width: 200px;
7
  /* 表单获得焦点时，边框变成红色,宽度变成200px */
8
}

原则#

1. 优先级相等的时候，CSS中最后的那个声明的样式将会被应用到元素上。（层叠就近原则）
2. 其余判断哪个选择器权重高，就优先执行那个样式
3. 权重是4位一组，是分开的层级，不能进位。

权重累加#

权重是累加的，每个选择器的层级权重相加，最终得到一个4位的权重值。

示例：#nav .item a 的权重为：
(0,1,0,0) + (0,0,1,0) + (0,0,0,1) = (0,1,1,1)

tip:查看权重可以使用trae鼠标悬停在选择器上查看，也可以通过浏览器的调试工具查看。

盒子模型组成-边框#

border属性用于设置盒子边框

1
div {
2
  border: 1px solid #f1f1f1;
3
}

1
div {
2
  border-top: 3px solid #ff9900;
3
  border-bottom: 1px solid pink;
4
  border-left: 1px solid pink;
5
  border-right: 1px solid pink;
6
}

盒子模型组成-圆角边框#

border-radius属性用于设置盒子圆角边框

使用场景：

1. 盒子设置圆角更好看
2. 盒子或者图片设置为圆形

属性值：
border-radius: 圆角大小

示例：

1
div {
2
  border-radius: 10px;
3
}

特殊场景一：

1. 胶囊圆角
2. 盒子或者图片设置为圆形

实现：

• 胶囊圆角：长方形将圆角设置为盒子高度的一半
• 圆形：正方形将圆角设置为盒子宽度的一半或者50%

示例：

1
/* 胶囊 */
2
div {
3
  width: 200px;
4
  height: 100px;
5
  border-radius: 50px;
6
}
7

8
/* 圆形 */
9
div {
10
  width: 200px;
11
  height: 200px;
12
  border-radius: 50%;
13
}

特殊场景二：

1. 分别设置不同角的圆角大小

圆角原理图示：

盒子模型组成-内边距#

padding属性用于设置盒子内边距，内边距是内容与边框之间的距离。

使用场景：

1. 让盒子内容和边框保留一定距离，更美观

1
div {
2
  padding: 10px;
3
}

1
div {
2
  padding-left: 10px;
3
}

盒子模型组成-外边距#

外边距margin是盒子周围一圈看不到的空间，它会把其他元素退离盒子

使用场景：

1. 让盒子与其他元素之间有一定距离，更美观

示例：

1
div {
2
  margin: 10px;
3
}

1
div {
2
  margin-left: 10px;
3
}

盒子模型-尺寸计算#

在 CSS 盒子模型的默认定义（标准盒模型）中：

• 元素的 width/height 仅指内容区域的大小。
• padding（内边距）和 border（边框）会额外增加盒子的总尺寸。

实际宽度计算示例

• 基础情况：

  • 内容宽度：200px
  • 无 padding、无 border
  • 盒子实际宽度 = 200px

• 带 padding 和 border 的情况：

  • 内容宽度：200px
  • 边框：5px（左右各 5px）
  • 内边距：10px（左右各 10px）
  • 计算：200 + 5 + 5 + 10 + 10 = 230
  • 盒子实际宽度 = 230px

结论：在默认盒模型下

• 总宽度 = width + 左右padding + 左右border
• 总高度 = height + 上下padding + 上下border
• 这会导致布局计算变得复杂，容易超出预期尺寸。

box-sizing 属性说明
box-sizing 用于定义元素的盒模型计算方式，控制 width 和 height 是否包含 padding 和 border。

语法

1
box-sizing: 属性值;

属性值说明：

当设置 box-sizing: border-box; 时：

• 元素总宽度固定为 200px
• 即使有 border: 5px 和 padding: 10px，内容区域会自动缩小，总宽度仍保持 200px

background背景常见属性#

| 属性 | 作用 | 常用值 | 示例代码 | | ----------------------- | -------------------- | ----------------------------------------------------------- | -----------------0--------------- | | background-color | 设置元素背景颜色 | 颜色名称、十六进制、RGB、透明度 | background-color: #f0f0f0; | | background-image | 设置背景图片 | url(image.jpg) | background-image: url(bg.png); | | background-repeat | 控制背景图片是否重复 | repeat（默认）、no-repeat、repeat-x、repeat-y | background-repeat: no-repeat; | | background-position | 定位背景图片位置 | x y（如 center top，或 px、% 单位） | background-position: center; | | background-size | 调整背景图片尺寸 | 默认 auto、cover（覆盖）、contain（包含）或 px、% | background-size: cover; | | background-attachment | 背景是否随页面滚动 | scroll（默认）、fixed | background-attachment: fixed; |

示例：

1
div {
2
  /* 背景颜色 */
3
  background-color: #f0f0f0;
4
  /* 背景图片 */
5
  background-image: url(bg.png);
6
  /* 背景图片不重复 */
7
  background-repeat: no-repeat;
8
  /* 背景图片居中 */
9
  background-position: center;
10
  /* 背景图片覆盖 */
11
  background-size: cover;
12
  /* 背景图片固定不动 */
13
  background-attachment: fixed;
14
}

背景复合写法#

background 属性可以同时设置多个背景属性，包括背景颜色，背景图片，背景位置，背景重复方式，背景尺寸，背景固定不动等。

背景复合写法：

1
div {
2
  background: 颜色 图片 重复 固定 位置/尺寸; /* 顺序无关 */
3
}

示例：

1
div {
2
  div {
3
  background: #f0f0f0 url(bg.png) no-repeat fixed center / cover;
4
}
5
}

背景渐变#

在CSS中，可使用linear-gradient(线性渐变)和radial-gradient(径向渐变)实现背景渐变效果。

场景:

1. 文字底色渐变甚至动画，更吸引用户
2. 盒子添加更加美观

1
div {
2
  /* 线性渐变：从左到右，从红色到蓝色 */
3
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
4
}
5

6
.gradient-box {
7
  /* 线性渐变：从左上角到右下角，从红色到蓝色 */
8
  width: 300px;
9
  height: 200px;
10
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
11
}

1
div {
2
  /* 设置背景渐变 */
3
  background: linear-gradient(to right, pink, red);
4

5
  /* 兼容性写法：谷歌老版本浏览器 */
6
  -webkit-background-clip: text;
7
  /* 文字范围裁剪背景 */
8
  background-clip: text;
9

10
  /* 文本填充颜色设置为透明，让背景渐变显示出来 */
11
  -webkit-text-fill-color: transparent;
12
}

1
div {
2
  /* 径向渐变：从中心向四周，从红色到蓝色 */
3
  background: radial-gradient(circle, #ff6b6b, #4ecdc4);
4
}

最佳实践#

1
/* 全局重置 */
2
* {
3
  margin: 0; /* 清除所有元素的 margin */
4
  padding: 0; /* 清除所有元素的 padding */
5
  box-sizing: border-box; /* 推荐同时设置盒模型 */
6
}
7

8
/* 重置列表样式 */
9
ul,
10
ol {
11
  list-style: none; /* 去除列表样式 */
12
}
13

14
/* 重置链接样式 */
15
a {
16
  text-decoration: none; /* 去除下划线 */
17
}

1
<link rel="stylesheet" href="./css/Normalize.css" />

字体图标使用步骤#

1. 下载字体图标文件 去官网或者由设计师提供字体图标文件，将其保存到项目目录下。 各个文件的作用：

   • iconfont.css：包含字体图标类名的 CSS 样式表，用于定义图标对应的字体和 Unicode 编码。
   • iconfont.ttf、iconfont.woff、iconfont.woff2：字体文件，包含实际的图标字形。浏览器会根据用户设备支持的字体格式加载对应的字体文件。

2. 引入到HTML文件中 根据下载的压缩包，使用 <link> 标签引入对应的 CSS 文件。

   1
   <link rel="stylesheet" href="./fonts/iconfont.css" />

3. 使用字体图标

   • 一般通过标签调用类名来选择对应的字体图标。
   • 可根据实际需求，通过 CSS 调整图标的样式，如颜色、大小、位置等。

   1
   <i class="iconfont icon-home"></i>