一、CSS/CSS3 基础认知
1. CSS 简介
-
CSS 全称 Cascading Style Sheets （层叠样式表），用来控制网页的外观（颜色、大小、布局等）。
-
CSS3 是 CSS 的最新版本，增加了圆角、阴影、动画等新特性，让页面更生动。
2. CSS 的基本语法
选择器 {
属性名: 属性值;
属性名: 属性值;
...
}-
选择器：告诉浏览器"要给谁设置样式"。
-
声明块：花括号里的内容，由一条或多条声明组成。
-
声明 ：
属性: 值;例如color: red;。
示例：
p {
color: red;
font-size: 16px;
}上面代码让所有 <p> 标签的文字变成红色，字号 16 像素。
3. CSS 的三种书写位置（方式）
CSS 代码可以写在三个不同的地方，各有优缺点。
5.1 方式一：内嵌样式（内部样式表）
-
写在 HTML 文件的
<style>标签里，通常放在<head>中。 -
只对当前页面生效。
<head>
<style>
p {
color: blue;
}
</style>
</head>5.2 方式二：外链样式（外部样式表）
-
将 CSS 单独保存为
.css文件，通过<link>标签引入。 -
一个 CSS 文件可被多个 HTML 页面共用，利于维护。
<head>
<link rel="stylesheet" href="style.css">
</head>5.3 方式三：行内样式（内联样式）
-
直接写在 HTML 标签的
style属性中。 -
只对当前标签生效，优先级最高（后面会讲）。
<p style="color: green;">这是一段绿色文字</p>5.4 三种样式的优先级
-
行内样式 > 内嵌样式 ≈ 外链样式 （内嵌和外链的优先级取决于它们在代码中的先后顺序，后出现的会覆盖前面的相同样式）。
-
如果同时用多种方式为同一个元素设置相同属性，最终生效的是行内样式 （除非有
!important强制覆盖）。
6. 总结：CSS 三种书写位置特点与区别
| 样式位置 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 内嵌样式 | 无需额外文件 | 只能作用于一个页面 | 单个页面的样式 |
| 外链样式 | 可复用、利于缓存 | 需要额外请求 | 多页面共用样式 |
| 行内样式 | 优先级高、覆盖方便 | 不能复用，结构混乱 | 临时测试或少量样式覆盖 |
4. CSS 注释
- 用
/* 注释内容 */包裹，浏览器会忽略，方便开发者做说明。
/* 这是注释，不会影响页面 */
p {
color: orange; /* 设置段落文字为橙色 */
}二、CSS 基础选择器
1. 什么是选择器及作用
- 选择器就是用来选中 HTML 元素的工具，只有被选中的元素才会应用对应的样式。
2. 选择器分类
-
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。
-
复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等（本节会介绍后代选择器）。
3. 标签选择器
-
直接使用 HTML 标签名作为选择器。
-
会选中页面中所有该标签的元素。
/* 所有 div 文字变灰 */
div {
color: gray;
}4. id 选择器
-
用
#加上元素的id属性值。 -
id 是唯一的，一个页面中不能出现两个相同的 id。
#header {
background-color: black;
}<div id="header">头部区域</div>5. class 选择器
-
用
.加上元素的class属性值。 -
class 可以重复使用，一个元素也可以有多个 class（空格隔开）。
5.1 class 选择器用法
.box {
border: 1px solid #ccc;
}
.center {
text-align: center;
}<div class="box center">我是带边框且居中的盒子</div>5.2 原子类
-
将单一功能的样式定义成一个很小的类，然后组合使用。
-
类似于搭积木，提高复用性。例如：
.f12 { font-size: 12px; }
.red { color: red; }
.mt10 { margin-top: 10px; }<p class="f12 red mt10">红色小字，上边距10px</p>5.3 id 和 class 的命名规则
-
必须以字母 开头（可以是字母、下划线
_、短横-）。 -
后面可以跟字母、数字、下划线、短横。
-
不能以数字开头 ，不能包含特殊字符（如
!@#$%）。 -
严格区分大小写，建议使用有意义的英文单词组合（如
nav-menu、userAvatar）。
6. * 通配符选择器
-
用
*表示，会选中页面所有元素。 -
常用于清除浏览器默认内外边距。
/* 去除所有元素默认边距 */
* {
margin: 0;
padding: 0;
}⚠️ 注意：通配符选择器效率较低，大型项目中尽量少用，或使用更精确的 reset 方案。
7. 基础选择器的权重优先级
当多个选择器选中同一个元素并设置相同属性时，浏览器会根据权重决定哪个生效。
-
!important（强制最高）
-
行内样式（style 属性） → 权重 1000
-
id 选择器（#id） → 权重 0100
-
类选择器、伪类选择器、属性选择器（.class、:hover、[type]） → 权重 0010
-
标签选择器、伪元素（div、::before） → 权重 0001
-
通配符选择器（*） → 权重 0000
-
继承的样式 → 没有权重
比较规则：
-
先比较权重，权重大的生效。
-
权重相同，后出现的样式覆盖先出现的。
-
有
!important的直接最高（除非多个 !important 再比较权重）。
例子：
<style>
#box { color: red; } /* 权重 0100 */
.box { color: blue; } /* 权重 0010 */
div { color: green; } /* 权重 0001 */
</style>
<div id="box" class="box">文字颜色是红色（id 权重最大）</div>8. 测试题（巩固理解）
HTML 代码：
<div id="app" class="container">
<p class="text" style="color: pink;">hello</p>
</div>CSS 代码：
#app .text {
color: blue;
}
.container p {
color: green;
}
p {
color: orange;
}问：最终 <p> 里的文字是什么颜色？
点击查看答案
9. 总结：CSS 基础选择器
-
标签选择器：选中一类标签，权重 0001。
-
id 选择器：选中唯一元素，权重 0100。
-
类选择器：选中一类元素，可复用，权重 0010。
-
通配符选择器：选中所有元素，权重 0000，常用于 reset。
-
优先级规则帮助我们解决样式冲突。
10. 后代选择器
-
用空格 连接两个或多个选择器，表示选中父元素内部的子元素（不一定是直接子代，可以是孙子、重孙等）。
-
属于复合选择器 ，写法：
祖先 后代 { 样式 }。
/* 选中所有 article 内部的 p 元素 */
article p {
line-height: 1.8;
}<article>
<p>我是直接子代，被选中</p>
<div>
<p>我是孙子，也被选中</p>
</div>
</article>