JavaEE 进阶第三期：开启前端入门之旅(三)
专栏：JavaEE 进阶跃迁营
个人主页：手握风云
目录
一、CSS介绍
1.1. 什么是CSS
1.2. 基本语法规范
1.3. 引入方式
1.4. 规范
二、CSS选择器
2.1. 标签选择器
2.2. 类选择器
2.3. ID选择器
2.4. 通配符选择器
2.5. 复合选择器
三、常用CSS
3.1. color
3.2. font-size
一、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为例：
