一、CSS 三种样式引入方式（核心重点）
CSS（层叠样式表）是 HTML 的 "化妆品"，负责美化页面结构，其书写位置主要有 3 种，各有适用场景和优缺点：
1. 内联样式（行内样式）
- 书写位置：直接在 HTML 标签的
style属性中定义样式。 - 语法：
<标签 style="样式名: 样式值; 样式名: 样式值;">内容</标签> - 示例：
<p style="color: blue; font-size: 18px;">快了韩斯。</p> - 优点：无需额外选择器，直接作用于目标标签，快速生效。
- 缺点：结构与样式耦合，标签冗余；复用性极差，修改需逐个调整；优先级过高，后期维护困难。
- 总结：仅推荐用于少量、不常修改的简单样式。
2. 内部样式表
-
书写位置：在 HTML 的
<head>标签内，通过<style>子标签包裹样式代码。 -
语法：
html<head> <style> 选择器 { 样式名: 样式值; 样式名: 样式值; /* 末尾分号可省略 */ } </style> </head> -
优点：结构与样式初步分离，代码清晰；同一文件内可复用，修改方便。
-
缺点：样式仅作用于当前 HTML 文件，复用性有限；文件体积增大后，维护成本上升。
-
总结：适合样式较少、无需跨文件复用的场景。
3. 外部样式表（推荐使用）
- 书写位置：单独创建
.css文件编写样式，通过<link>标签在 HTML 中关联。 - 语法：
- 新建
xxx.css文件，内部直接编写样式（无需<style>标签）； - HTML 中引入：
<link rel="stylesheet" href="css文件路径">
- 新建
- 优点：完全实现结构与样式分离；支持多文件复用，维护效率高；文件结构清晰。
- 缺点：需额外创建 CSS 文件，初期配置稍繁琐。
- 总结：开发首选，尤其适合多页面项目。
补充：样式优先级与引入方式对比
-
优先级规则（从高到低）：内联样式 > 内部样式表 > 外部样式表
-
两种 CSS 文件引入方式区别（面试常考）：
特性 <link>标签@import语法语法归属 HTML 标签，写在 HTML 环境中 CSS 语法，写在 CSS 环境中 作用方式 关联外部 CSS 文件 导入外部 CSS 到当前样式表中 编码效率 效率更高，加载性能更优 效率稍低，依赖 CSS 解析顺序 语法示例 <link href="./03.css" rel="stylesheet">@import './03.css';或@import url(./03.css);
二、CSS 基础选择器（4 个常用核心）
选择器的作用是精准 "选中" 需要美化的 HTML 结构，再通过样式规则定义外观，以下是最常用的 4 种基础选择器：
1. 标签选择器
- 语法：
标签名 { 样式规则 } - 作用：选中页面中所有该类型的标签（全局生效）。
- 示例：
h1 { color: red; }（将所有<h1>标题改为红色） - 注意：慎用！可能意外影响不需要的同类标签，需结合页面结构合理使用。
2. id 选择器
- 语法：
#id属性值 { 样式规则 } - 作用：选中页面中唯一具有该 id 属性的标签（id 值不可重复）。
- 示例：
<p id="p1">风急天高猿啸哀</p>对应#p1 { color: green; } - 注意点：id 值不能以数字开头、不能重复、不能用汉字；适合给外层唯一框架元素命名。
3. class 选择器（复用首选）
- 语法：
.class属性值 { 样式规则 } - 作用：选中所有具有该 class 属性的标签（class 值可重复复用）。
- 示例：
<p class="p2">无边落木萧萧下</p>对应.p2 { color: blue; } - 注意点：可跨标签复用，搭配关系选择器使用可减少样式冲突，是开发中最常用的选择器。
4. 通配选择器
- 语法：
* { 样式规则 } - 作用：选中页面中所有 HTML 标签，无差别生效。
- 示例：
* { font-size: 24px; margin: 0; padding: 0; } - 常用场景：设置全局公共样式（如统一字体大小）；清除浏览器默认边距（margin/padding）、去除列表项目符号（list-style: none）、清除链接下划线（text-decoration: none），解决浏览器兼容性问题。
- 注意：优先级最低，会被其他选择器覆盖。
三、HTML 图片格式详解（实用知识点）
网页中图片格式的选择直接影响加载速度和显示效果，常用格式及特性如下：
| 图片格式 | 核心特性 | 适用场景 |
|---|---|---|
| JPEG(JPG) | 支持多颜色、可压缩；不支持透明 | 照片、颜色丰富的图片 |
| GIF | 支持颜色少、简单透明；支持动态图 | 简单图标、动态效果图片 |
| PNG | 支持多颜色、复杂透明；不支持动图 | 颜色复杂的透明图片（网页首选） |
| WebP | 兼具所有格式优点、文件体积小；兼容性较差 | 对兼容性要求不高的高效加载场景 |
| Base64 | 图片转字符编码引入；无需额外请求 | 需与网页同步加载的小图标 |
| SVG | 矢量图、放大不失真；鸿蒙框架常用 | 图标、LOGO、需要适配多尺寸的图形 |
图片使用原则
- 效果不一致时，优先选择显示效果更优的格式；
- 效果一致时，优先选择文件体积更小的格式（提升加载速度）。
四、今日核心总结
- CSS 样式引入：优先使用外部样式表（复用性强、维护方便），避免过度使用内联样式；
- 选择器使用：class 选择器是复用核心，id 选择器保证唯一性，通配选择器用于全局初始化；
- 图片格式：网页图标首选 PNG，照片用 JPG，动态图用 GIF，追求高效选 WebP（需考虑兼容性）；
- 关键原则：结构（HTML）与样式（CSS）分离，代码更清晰、维护更高效。