HTML中修改标题和段落的第三种方式——外部样式表
本文续写上一篇文章：HTML中修改标题和段落的前两种方式
一、使用方法
- 书写CSS文档
- HTML文档中插入 1. 中的链接
（其实本质就是内部样式表中<head>里边单独写的<style>中的部分单独放在了CSS文档里面，再在HTML文档里面引用一下）
二、具体示例
CSS文档： （放在CSS文件夹里，命名后缀为.css，命名最好与要修饰的HTML文档同名）
@charset "utf-8";
/* CSS Document 部分 */
h2
{
text-align: center;
color: red;
}
p
{
font-size: 24px;
text-decoration: underline;
color: blue;
}
文件位置示范
结合具体代码看输出效果
HTML代码（未插入链接）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表1</title>
</head>
<body>
<h2>123456</h2>
<p>555</p>
<h2>123456</h2>
<p>555</p>
<h2>123456</h2>
<p>555</p>
<h2>123456</h2>
</body>
</html>
输出效果
HTML代码（已插入链接）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表1</title>
<link rel="stylesheet" href="../css/style3-3.css">
</head>
<body>
<h2>123456</h2>
<p>555</p>
<h2>123456</h2>
<p>555</p>
<h2>123456</h2>
<p>555</p>
<h2>123456</h2>
</body>
</html>
输出效果
总结
1. 内联样式（行内样式）
- 优点：快速、直接针对单个元素生效。
- 缺点：难以维护，复用性差，容易导致代码冗余。
2. 内部样式表
- 优点：可集中管理当前页面的样式，复用性较好。
- 缺点：仅对当前页面生效，多页面需重复编写。
3. 外部样式表
- 优点：最佳实践，样式可跨页面复用，便于维护和扩展。
- 缺点：需额外管理CSS文件。
优先级说明
当多种方式同时存在时，优先级为：内联样式 > 内部样式表 > 外部样式表（若选择器权重相同）。
建议优先使用外部样式表，保持结构与样式分离，提高代码可维护性。