CSS 核心基础：样式表与选择器入门

CSS 是什么

层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

CSS 就是 "东方四大邪术" 之化妆术.

基本语法规范

java 复制代码

<style>
p {
    /* 设置字体颜色 */
    color: red;
    /* 设置字体大小 */
    font-size: 30px;
}
</style>

<p>hello</p>

选择器 + {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值

CSS 样式表的三种引入方式

CSS 样式表主要分为内部样式表 、行内样式表 和外部样式表三种引入方式，各自有不同的特点和适用场景。

一、内部样式表

定义：将样式写在 <style> 标签中，嵌入到 HTML 文档内部。
位置：理论上 <style> 可以放在 HTML 的任意位置，但通常放在 <head> 标签中（便于集中管理样式）。
优点：样式与页面结构实现了初步分离，比行内样式更易维护。
缺点：样式与 HTML 仍在同一文件中，分离不够彻底；当 CSS 内容较多时，会导致 HTML 文件臃肿。
适用场景：小体量页面、快速原型开发，搜狗搜索等部分网站仍保留这种写法。
代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>内部样式表示例</title> <style> div { font-size: 16px; color: blue; } </style> </head> <body>
这是内部样式表的效果
</body> </html>

二、行内样式表

定义：通过标签的 style 属性，为单个标签指定样式。
特点：
- 只适用于编写简单样式，仅对当前标签生效。
- 优先级较高，会覆盖内部样式表和外部样式表的同名样式。
缺点：无法编写复杂样式，样式与结构完全耦合，不利于维护（违背 "样式与结构分离" 的原则）。
代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行内样式表示例</title> <style> /* 内部样式表设置为红色，但会被行内样式覆盖 */ div { color: red; } </style> </head> <body>
想要生活过的去，头上总得带点绿
</body> </html>

三、外部样式表（实际开发最常用）

定义：将样式单独写在 .css 后缀的外部样式文件中，再通过 <link> 标签引入到 HTML 文档中。
步骤：① 创建 CSS 文件（如 style.css）；② 在 HTML 的 <head> 标签中使用 <link> 标签引入该 CSS 文件。
代码示例 ：
- 第一步：创建 style.css 文件
  
  /* style.css 外部样式文件 */
  div {
  color: purple;
  font-size: 20px;
  }
- 第二步：创建 demo.html 文件，引入 CSS
  <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部样式表示例</title> <link rel="stylesheet" href="style.css"> </head> <body>
  上帝为你关上一扇门，然后就去睡觉了
  </body> </html>
优点：样式与 HTML 结构彻底分离，便于多人协作开发和后期维护；同一个 CSS 文件可被多个 HTML 页面复用，减少代码冗余。
缺点：受浏览器缓存影响，修改 CSS 文件后，页面可能不会立刻生效。
解决缓存问题 ：
- 浏览器中按 Ctrl + F5 强制刷新页面，强制重新加载 CSS 文件；
- 给 CSS 文件添加版本号（如 style.css?v=1.0），修改时更新版本号。

一、CSS 代码风格规范

样式格式
- 紧凑风格：样式属性写在同一行（如 p { color: red; font-size: 30px; }）
- 展开风格（推荐）：每个属性单独换行，结构更清晰（如： css
  复制代码
```
p {
  color: red;
  font-size: 30px;
}
```
）
样式大小写CSS 本身不区分大小写，但开发中统一使用小写字母，保证代码一致性。
空格规范
- 冒号（:）后需加空格（如 color: red）
- 选择器与左大括号（{）之间需加空格（如 p {）

二、CSS 选择器

1. 选择器的功能

用于选中页面中的指定元素，是设置元素样式的前提（类似游戏中 "先选中单位，再指挥行动"）。

2. 选择器的种类（CSS2 标准）

分为基础选择器 和复合选择器两类：

类别	具体类型
基础选择器	标签选择器、类选择器、id 选择器、通配符选择器
复合选择器	后代选择器、子选择器、并集选择器、伪类选择器

注：CSS3 对选择器做了补充，需结合后续内容学习。

补充说明

CSS 选择器是控制页面样式的核心工具，不同选择器的优先级、适用场景不同：

基础选择器用于选中单一类型的元素（如标签选择器选中所有同标签元素）；
复合选择器用于更精准的元素选择（如后代选择器选中某元素内的子元素）。

三、基础选择器详解

1. 标签选择器

定义：用 HTML 标签名作为选择器，选中所有该标签的元素。
语法：标签名 { 样式属性; }
示例：p { color: green; }（选中所有<p>标签设置文字绿色）
特点：能快速为同类型标签统一设置样式，但无法差异化选择标签。

2. 类选择器

定义：用类名选中元素，实现差异化样式设置。
语法：
- 定义：.类名 { 样式属性; }
- 调用：<标签 class="类名">
示例：
复制代码
```
.red { color: red; }
```
<div class="red">红色文字</div>
特点：
- 一个类选择器可被多个标签调用
- 一个标签可调用多个类名（类名之间用空格分隔），例如：<div class="red big">...</div>
- 类名命名规范：不能以纯数字、中文命名，建议使用英文 + 数字，见名知意

3. id 选择器

定义：用 id 属性值选中唯一的元素。
语法：
- 定义：#id名 { 样式属性; }
- 调用：<标签 id="id名">
示例：
复制代码
```
#nav { font-size: 16px; }
```
<div id="nav">导航栏</div>
特点：id 在 HTML 页面中是唯一的，一个 id 选择器只能被一个标签调用，不能复用。

4. 通配符选择器

定义：用*表示，选中页面中所有的 HTML 元素。
语法：* { 样式属性; }

示例：

复制代码

* {
    margin: 0; /* 清除所有元素的外边距 */
    padding: 0; /* 清除所有元素的内边距 */
}

特点：无需调用，自动选中所有元素；常用于清除页面默认样式，特殊场景使用（因会增加浏览器渲染负担，不建议随意使用）。

基础选择器总结

选择器类型	语法	作用	特点
标签选择器	标签名 {...}	选中所有同标签元素	统一设置样式，无法差异化
类选择器	. 类名 {...}	选中一个 / 多个标签	可复用，支持多类名
id 选择器	#id 名 {...}	选中单个标签	唯一，不可复用
通配符选择器	* { ... }	选中所有标签	自动选中，用于清除默认样式

四、复合选择器详解

1. 后代选择器（包含选择器）

作用：选中父元素内的所有后代元素（包括子元素、孙元素等所有层级）。
语法：元素1 元素2 { 样式属性; }（元素 1 和元素 2 之间用空格分隔）

示例：

复制代码

ul li { color: blue; } /* 选中ul内所有li元素 */
.nav a { font-size: 14px; } /* 选中类为nav的元素内所有a元素 */

注意：元素 1 是祖先元素，元素 2 是后代元素，可嵌套多层（如div ul li a）。

2. 子选择器（子元素选择器）

作用：仅选中父元素的直接子元素（不包含孙元素等深层级元素）。
语法：元素1>元素2 { 样式属性; }（元素 1 和元素 2 之间用 >` 分隔）

示例：

复制代码

div>p { color: red; } /* 仅选中div的直接子元素p，不包含div内li中的p */
.box>a { text-decoration: none; } /* 仅选中类为box的元素的直接子元素a */

3. 并集选择器（群组选择器）

作用：同时选中多个元素，为其设置相同的样式，减少代码冗余。
语法：元素1, 元素2, 元素3 { 样式属性; }（元素之间用逗号分隔）

示例：

复制代码

div, p, .red {
    color: green;
    font-size: 16px;
} /* 同时选中所有div、p标签和类为red的元素 */
h1, .nav>li { font-weight: normal; } /* 选中h1标签和类为nav的元素的直接子元素li */

书写规范 ：多个元素可换行书写，例如：
复制代码
```
div,
p,
.red {
    color: green;
}
```

4. 伪类选择器

作用：选中元素的特定状态（如链接的未访问 / 已访问状态、鼠标悬浮状态等）。
特点：以冒号（:）结尾，用于表示元素的特殊状态。
常见类型 ：

（1）链接伪类选择器

用于设置<a>标签的不同状态，需按LVHA 顺序书写（否则样式可能失效）：
- a:link：选中未被访问过的链接
- a:visited：选中已被访问过的链接
- a:hover：选中鼠标悬浮在上面的链接
- a:active：选中鼠标点击并按住时的链接
- 示例：
  复制代码
```
a:link { color: #333; text-decoration: none; } /* 未访问链接：灰色，无下划线 */
a:visited { color: #666; } /* 已访问链接：深灰色 */
a:hover { color: red; text-decoration: underline; } /* 鼠标悬浮：红色，有下划线 */
a:active { color: green; } /* 点击时：绿色 */
```
- 实际开发简化写法 ：通常只设置a（默认状态）和a:hover（悬浮状态），例如：
  复制代码
```
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: red;
    text-decoration: underline;
}
```
（2）焦点伪类选择器

用于选中获取焦点的表单元素（如输入框input）。
- 语法：input:focus { 样式属性; }
- 示例：
  复制代码
```
input:focus {
    outline: none; /* 清除默认焦点轮廓 */
    border: 1px solid red; /* 焦点时边框变红 */
    background-color: #f5f5f5; /* 焦点时背景色变浅 */
}
```

复合选择器总结

选择器类型	语法	作用	关键符号
后代选择器	元素 1 元素 2 {...}	选中元素 1 内所有元素 2	空格
子选择器	元素 1 > 元素 2 {...}	选中元素 1 的直接子元素 2	>（大于号）
并集选择器	元素 1, 元素 2 {...}	选中元素 1 和元素 2	,（逗号）
伪类选择器	元素：伪类 {...}	选中元素的特定状态	:（冒号）（如 link、hover、focus）

CSS 属性有很多, 可以参考文档https://www.w3school.com.cn/cssref/index.asp 不需要全都背下来, 而是在使用中学习.

CSS 核心基础：样式表与选择器入门

CSS 是什么

基本语法规范

CSS 样式表的三种引入方式

一、内部样式表

二、行内样式表

三、外部样式表（实际开发最常用）

一、CSS 代码风格规范

二、CSS 选择器

1. 选择器的功能

2. 选择器的种类（CSS2 标准）

补充说明

三、基础选择器详解

1. 标签选择器

2. 类选择器

3. id 选择器

4. 通配符选择器

基础选择器总结

四、复合选择器详解

1. 后代选择器（包含选择器）

2. 子选择器（子元素选择器）

3. 并集选择器（群组选择器）

4. 伪类选择器

（1）链接伪类选择器

（2）焦点伪类选择器

复合选择器总结