一、实验目标
掌握CSS外部样式表的创建、引入与复用，实现网页样式的统一管理，完成主页与子页的样式同步设置。
二、操作步骤&代码实现
- 项目初始化
• 新建项目：项目名 mySite，存储路径为 D盘根目录
• 项目结构：
D:\mySite
├─ index.html （主页）
├─ sub.html （子页）
└─ style.css （外部样式表）
2. 外部样式表创建与引入
-
在项目根目录新建 style.css 样式文件，统一编写全局样式
-
在HTML主页中通过 标签外部引入样式表（放在 标签内）
在 index.html 中插入标题一、标题二、段落，内容自拟，示例代码如下：
这是一级标题
这是二级标题
这是正文段落，用于演示CSS样式效果，外部样式表可以统一管理全站样式~
4. 样式规则编写（style.css）实现要求的样式效果：
/* 全局页面背景色：淡蓝色 */
body {
background-color: lightblue;
}
/* 标题一、标题二文本颜色：橙色 */
h1, h2 {
color: orange;
}
/* 段落文本颜色：红色 */
p {
color: red;
}
5. 子页创建与样式复用
-
新建子页 sub.html，复用同一份 style.css 样式表
-
子页HTML代码（仅需引入相同样式表，即可同步背景色）：
子页标题
子页通过复用外部样式表，自动继承淡蓝色背景，无需重复编写样式~
三、核心知识点总结-
CSS引入方式：外部样式表是最推荐的样式管理方式，通过 标签引入，可实现多页面样式复用，减少代码冗余
-
样式优先级：外部样式表 < 内部样式表 < 行内样式，本实验仅使用外部样式表，样式全局生效
-
颜色取值：
◦ 淡蓝色：lightblue（关键字），也可写为 #ADD8E6 / rgb(173, 216, 230)
◦ 橙色：orange（关键字），也可写为 #FFA500 / rgb(255, 165, 0)
◦ 红色：red（关键字），也可写为 #FF0000 / rgb(255, 0, 0)