HTML 进阶教程：HTML 与 CSS 的协作方式
学习 HTML 只是第一步。要让您的网页拥有美观的样式、字体和布局，您必须引入 CSS。HTML 通过三种方式与 CSS 文件进行连接和协作，每种方式都有其适用场景。
核心原则：结构与表现分离
在专业的 Web 开发中，我们始终遵循“结构与表现分离”的原则：
HTML 只负责定义网页的内容和结构（例如：这是一个标题，这是一个段落）。
CSS 只负责定义网页的表现和样式（例如：这个标题是红色、居中、字体大小是 $24\text{px}$）。
这种分离极大地提高了代码的可读性、可维护性和加载效率。
一、 外部样式表 (External Style Sheet)
这是最推荐和最专业的方法。 您将所有的 CSS 规则写在一个独立的 .css 文件中，然后在 HTML 文件的 <head> 部分引用它。
1. 优势
完全分离： 内容和样式完全分离，便于管理。
多页复用： 多个 HTML 页面可以共享同一个 CSS 文件，实现网站风格统一。
缓存优化： 浏览器可以缓存 CSS 文件，加快后续页面的加载速度。
2. 协作方式：<link> 标签
在 HTML 文件的 <head> 区域使用 <link> 标签引用外部 CSS 文件：
<head>
<meta charset="utf-8">
<title>我的网站</title>
<link rel="stylesheet" href="styles/main.css">
</head>
rel="stylesheet"：定义了被链接文档与 HTML 文档的关系，表示这是一个样式表。href="styles/main.css"：指向您的 CSS 文件的路径（可以是相对路径或绝对 URL）。
二、 内部样式表 (Internal Style Sheet)
您可以使用 <style> 标签将 CSS 代码直接写在 HTML 文件的 <head> 部分内部。
1. 优势
单个页面样式： 适用于仅对当前页面有效的、特殊且独特的样式。
无需额外文件： 不需要单独创建
.css文件。
2. 协作方式：<style> 标签
将 CSS 代码放置在 <head> 区域的 <style> 标签内：
<head>
<meta charset="utf-8">
<title>特别活动页面</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
注意： 这种方法不适合多页面网站，因为它违背了样式分离的原则，且会增加 HTML 文件的大小。
三、 行内样式 (Inline Style)
行内样式是通过 HTML 元素的 style 属性直接将 CSS 规则应用到单个元素上。
1. 优势
优先级最高： 它的样式优先级最高，能够覆盖外部和内部样式。
快速测试： 方便进行快速的局部样式测试。
2. 协作方式：style 属性
在 HTML 元素的开始标签中使用 style 属性：
<body>
<h1 style="color: red; font-size: 20px;">这是一个红色的标题</h1>
<p style="background-color: yellow;">这个段落有黄色的背景。</p>
</body>
注意： 强烈不推荐 大量使用行内样式。它使得样式难以维护、代码冗长，且不能被重用。只有在极少数需要覆盖特定样式或动态生成样式时才考虑使用。
总结：优先级和选择
#HTML(9)文章作者：樱羽雨奈
文章链接：https://www.xiyung.cn/archives/html-jjjc
版权声明：本博客所有文章除特别声明外，均采用CC BY-NC-SA 4.0 许可协议，转载请注明出处！