专栏：JavaEE 进阶跃迁营
个人主页：手握风云
目录
一、CSS介绍
1.1. 什么是CSS
CSS（Cascading Style Sheet，层叠样式表）是用于控制网页样式与布局的技术，核心作用是对网页中元素的位置、外观进行像素级精确控制，实现页面美化，并达成 “页面结构（HTML）与样式分离” 的开发模式，让代码更易维护。
CSS 可类比为 “网页的化妆术”——HTML 负责搭建网页的 “骨架”（如标题、段落、图片等内容结构），而 CSS 负责为这个骨架 “化妆”（如设置颜色、字体、间距、边框等视觉效果），两者配合实现从 “朴素结构” 到 “美观页面” 的转变。
1.2. 基本语法规范
选择题 + {一条声明/多条声明}。选择器是决定选择修饰谁，声明是决定要做什么。
<style>
选择器 {
/* 声明（键值对，每条声明以分号结尾） */
属性1: 值1;
属性2: 值2;
}
<style> CSS使用/* 注释内容 */ 标记，可以使用快捷键ctrl + /添加和取消。CSS 代码需写在<style>标签内（内部样式）；<style>标签通常放在 HTML 的<head>标签内，确保样式优先加载。
1.3. 引入方式
| 引入方式 | 语法描述 | 优缺点与适用场景 |
| 行内样式 | 在 HTML 标签内通过style属性直接写 CSS，属性值为 “CSS 键值对” | 优点：仅针对单个标签生效，简单直接； 缺点：无法写复杂样式，样式与结构耦合，维护困难； |
| 内部样式 | 在 HTML 中定义<style>标签，标签内部编写 CSS 代码 | 优点：无需额外文件，适合单页面简单样式； 缺点：代码冗余，多页面复用性差； |
| 外部样式 | 通过<link>标签引入外部.css文件，href属性指定文件路径 | 优点：样式与 HTML 完全分离，多页面可复用，易维护； 缺点：需额外加载文件（可通过 CDN 优化）； |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 行内样式 -->
<p style="color: red;">段落1</p>
<p style="color: red;">段落2</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 内部样式 */
p {
color: blue;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
</body>
</html>
/* 外部样式 */
p {
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<p>段落1</p>
<p>段落2</p>
</body>
</html>当样式冲突时，采取就近原则。
1.4. 规范
CSS不区分大小写，但开发中统一使用小写字母，保证代码规范。空格规范，冒号 : 后需加空格，选择器与 { 之间需加空格（如p { color : red}）。
二、CSS选择器
2.1. 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS学习</title>
<style>
div {
color: green;
}
a {
color: blueviolet;
}
</style>
</head>
<body>
<div>div111</div>
<div>div222</div>
<div><span>div333</span></div>
<a href="https://www.bilibili.com/">哔哩哔哩</a>
</body>
</html>
2.2. 类选择器
如果我们只想针对一个而不是全部标签生效，就可以使用类选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS学习</title>
<style>
.div {
color: red;
}
</style>
</head>
<body>
<div class="div">div111</div>
<div>div222</div>
<div><span>div333</span></div>
<div class="div"><a href="https://www.bilibili.com/">哔哩哔哩</a></div>
</body>
</html>
超链接（<a>标签）没有显示红色，因为浏览器对超链接有默认样式，且<a>标签作为 “子元素”，不会自动继承父元素（.div）的文本颜色。
一个类可以被多个标签使用，⼀个标签也能使用多个类。
2.3. ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<style>
#one {
color: seagreen;
}
</style>
</head>
<body>
<div id="one">div标签1</div>
<div>div标签2</div>
<div>div标签3</div>
</body>
</html>
ID原则上是唯⼀的，不能被多个标签使用。
2.4. 通配符选择器
如果想让页面的所有约束生效，那么就可以使用通配符选择器。Chrome浏览器左边会默认有2像素左右的空隙，默认字体大小为16，前端开发就需要把这些默认样式都去掉，自己来决定样式。就如同化妆师给人化妆之前，需要把之前的妆卸掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: yellowgreen;
}
</style>
</head>
<body>
<div class="div">div111</div>
<div>div222</div>
<div><span>div333</span></div>
<div class="div"><a href="https://www.bilibili.com/">哔哩哔哩</a></div>
</body>
</html>
2.5. 复合选择器
前面的三个称为单选择器，有多个单选择器组合而成的是复合选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
<style>
ul li {
color: blue;
}
ol li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
</body>
</html>
以上还可以替换成其他标签或者是其他的选择器进行组合。分组选择器需要通过通过英文逗号（,）分隔多个选择器，表示 “同时选中所有被分隔的选择器所匹配的元素”。
选择器1, 选择器2, 选择器3 ... {
样式声明;
}三、常用CSS
3.1. color
颜色除了有前面的英文名称表达方式，还可以使用rgb代码的色盘或者十六进制的表示。
3.2. font-size
font-size是 CSS 中控制字体大小的核心属性，直接影响文本的可读性和页面布局。单位类型有像素(px)、相对单位(em、rem)、百分比(%)、关键字(large、medium)等。
字体的样式非常多，我们可以查看一个文档：MDN。我们以font-family为例：
