3月20日 Web前端课堂笔记：CSS外部样式表实战

一、实验目标

掌握CSS外部样式表的创建、引入与复用，实现网页样式的统一管理，完成主页与子页的样式同步设置。
二、操作步骤&代码实现

1. 项目初始化

• 新建项目：项目名 mySite，存储路径为 D盘根目录

• 项目结构：
D:\mySite
├─ index.html （主页）
├─ sub.html （子页）
└─ style.css （外部样式表）
2. 外部样式表创建与引入

1. 在项目根目录新建 style.css 样式文件，统一编写全局样式

2. 在HTML主页中通过 标签外部引入样式表（放在 标签内）

3. 主页HTML结构搭建

在 index.html 中插入标题一、标题二、段落，内容自拟，示例代码如下：

这是一级标题

这是二级标题

这是正文段落，用于演示CSS样式效果，外部样式表可以统一管理全站样式~

4. 样式规则编写（style.css）

实现要求的样式效果：
/* 全局页面背景色：淡蓝色 */
body {
background-color: lightblue;
}

/* 标题一、标题二文本颜色：橙色 */
h1, h2 {
color: orange;
}

/* 段落文本颜色：红色 */
p {
color: red;
}
5. 子页创建与样式复用

1. 新建子页 sub.html，复用同一份 style.css 样式表

2. 子页HTML代码（仅需引入相同样式表，即可同步背景色）：

子页标题

子页通过复用外部样式表，自动继承淡蓝色背景，无需重复编写样式~

三、核心知识点总结

1. CSS引入方式：外部样式表是最推荐的样式管理方式，通过 标签引入，可实现多页面样式复用，减少代码冗余

2. 样式优先级：外部样式表 < 内部样式表 < 行内样式，本实验仅使用外部样式表，样式全局生效

3. 颜色取值：

◦ 淡蓝色：lightblue（关键字），也可写为 #ADD8E6 / rgb(173, 216, 230)

◦ 橙色：orange（关键字），也可写为 #FFA500 / rgb(255, 165, 0)

◦ 红色：red（关键字），也可写为 #FF0000 / rgb(255, 0, 0)