1. font-family ：自定义字体的“别名”，后续使用时直接写这个名字即可，比如 font-family: BOOMBOX;
2. src: url() ：字体文件的路径，需要注意路径的相对位置是否正确。
- 这里的 font/BOOMBOX.TTF 表示：当前HTML文件同级目录下， font 文件夹里的
BOOMBOX.TTF文件。
- 常见字体格式：
.ttf 、 .woff 、 .woff2 、 .eot，现代开发推荐用.woff2，兼容性和加载速度更好。
3. 作用：引入后，页面中所有元素都可以通过 font-family: 自定义名称; 来使用这个字体。
![2c0e4a21128d0bc03b592292cfcf3e97]()
- 分组选择器 h1,p{}
- 语法：多个选择器之间用英文逗号 , 分隔
- 作用：给多个不同的标签/类/ID，同时设置相同的CSS样式，减少重复代码
- font-family: BOOMBOX; 应用自定义字体
- 关联上面的代码：这里的 BOOMBOX 就是用 @font-face 定义的自定义字体名称
- 作用：让
h1和 p 标签的文字，都使用.引入的 BOOMBOX 字体
一、什么是 CSS 选择器？
CSS 选择器的作用是：精准选中你想要设置样式的 HTML 元素，然后给它们添加颜色、大小、字体等样式。
它是 CSS 最基础、最核心的部分，所有样式都要通过选择器来“定位”元素。
二、基础选择器分类与详解
- 标签选择器（元素选择器）
语法格式
标签名 {
/* 样式 */
}
作用：选中页面中所有同名的 HTML 标签，统一设置样式。
例子
/* 给所有p标签设置文字颜色为黑色 */
p {
color: #000000;
}
/* 给所有h1标签设置居中对齐 */
h1 {
text-align: center;
}
特点
- 简单粗暴，对所有同名标签生效
- 优先级低，会被类选择器、ID选择器覆盖
- 类选择器 .
语法格式
.类名 {
/* 样式 */
}
作用：选中所有 class 属性值等于“类名”的元素，给它们设置样式。
例子
/* CSS部分：定义类样式 */
.orange {
color: orange;
}
.blue {
color: blue;
}
<!-- HTML部分：给元素添加class属性 -->
<p class="orange">这段文字是橙色的</p>
<div class="blue">这段文字是蓝色的</div>
<p class="orange">我也是橙色的</p>
特点
- 可以给多个不同的标签，设置同一个类样式（复用性强）
- 一个标签可以同时加多个类，用空格分隔：
<p class="orange center">
- 优先级高于标签选择器
- 命名规范：不能以数字开头，建议用英文、数字、下划线、短横线，见名知意
- ID 选择器 #
语法格式
ID名 {
/* 样式 */
}
作用
选中 id 属性值等于“ID名”的唯一元素。
例子
/* CSS部分：定义ID样式 */
header {
background-color: black;
color: white;
}
<!-- HTML部分：给元素添加id属性 -->
<div id="header">这是页面头部</div>
特点
- 理论上一个页面里，同一个ID只能出现一次（唯一性）
- 优先级比类选择器、标签选择器都高
- 更多用于
JS获取元素，不推荐大量用ID写CSS样式（不利于复用）
- 通配符选择器 *
语法格式
- {
/* 样式 */
}
作用
选中页面中所有的 HTML 元素，通常用来做全局初始化。
例子
/* 清除所有元素的默认内外边距，是前端常用的初始化写法 */
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
特点
- 作用范围最大，优先级最低
- 适合用来做全局样式重置，不适合写具体业务样式
- 分组选择器 ,
语法格式
选择器1, 选择器2, 选择器3 {
/* 共同样式 */
}
作用
给多个不同的选择器，同时设置相同的样式，减少重复代码。
例子（就是之前写的那段）
/* 同时给h1和p标签，设置自定义字体和居中 */
h1, p {
font-family: BOOMBOX;
text-align: center;
}
/* 也可以混合不同类型的选择器 */
.orange, #header, div {
font-weight: bold;
}
特点
- 逗号必须是英文逗号，中文逗号会报错
- 只是给多个选择器设置相同样式，不会改变它们本身的优先级
三、选择器优先级对比（重要！）
当多个选择器同时给同一个元素设置样式时，生效的规则是：
** ID选择器 > 类选择器 > 标签选择器 > 通配符选择器**