南昌比较好的网站设计白银市建设网站
专栏：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为例：
