HTML: HTML 样式
HTML负责网页的结构设计，而CSS（层叠样式表）则负责它的外观（样式设置）。在HTML中，您可以以三种方式编写样式：内联样式、内部样式表和外部样式表。
1. 内联样式（Inline Style）
在标签的 style 属性中直接写 CSS，只作用于当前元素：
▶ 示例
HTML
<p style="color: blue; font-size: 18px;">
这是一段蓝色大号文字。
</p>
<div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
这是一个带圆角的灰色卡片。
</div>
💡 适用场景：
内联样式优先级最高，适合快速测试或需要 JavaScript 动态修改样式的场景。但生产环境尽量避免，因为难以维护。
2. 内部样式表（Internal Style Sheet）
在 <head> 中用 <style> 标签定义样式，当前页面的所有元素都能引用：
▶ 示例
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; text-align: center; }
.card {
background: #fff;
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>我的页面</h1>
<div class="card">这是一个卡片</div>
</body>
</html>
3. 外部样式表（External Style Sheet）
将 CSS 写在独立 .css 文件中，用 <link> 引入。这是最推荐的方式——一个 CSS 文件可控制整个网站的样式：
▶ 示例
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- style.css 文件内容： -->
<!-- h1 { color: navy; } -->
<!-- .highlight { background: yellow; } -->
📌 三种方式优先级：
内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。当同一个元素被多种方式设置样式时，优先级高的生效。
4. 常用 CSS 属性速览
以下是在 HTML 中最常用的一些 CSS 属性，了解它们就能做出像样的页面了：
color— 文字颜色background-color— 背景颜色font-size— 字体大小font-weight— 字体粗细（bold = 粗体）text-align— 文本对齐（left/center/right）padding— 内边距（内容与边框的距离）margin— 外边距（元素之间的距离）border— 边框width / height— 宽高display— 显示方式（block/inline/flex/none）
❓ 常见问题
Q 内联样式、内部样式、外部样式有什么区别？
A 三种方式的区别：1）内联样式（
style属性）只作用于当前元素，写在HTML标签内；2）内部样式（<style>标签）作用于当前页面，写在<head>中；3）外部样式（.css文件）作用于所有引用它的页面，通过<link>引入。优先级：内联 > 内部 > 外部。实际开发中，95%的情况用外部样式表。Q 为什么推荐用外部样式表？
A 外部样式表有四个核心优势：1）复用——多个页面共用一个CSS文件，改一处全局生效；2）缓存——浏览器会缓存CSS文件，首次加载后后续页面访问更快；3）分离——HTML负责结构，CSS负责样式，职责清晰，便于维护；4）协作——前端开发者可以并行工作，互不干扰。内联样式只适合调试和极特殊场景。
Q 样式优先级是怎么计算的？
A 优先级从高到低：1）
!important（慎用，会打乱优先级）；2）内联样式（style属性）；3）ID选择器（#id）；4）类选择器（.class）、属性选择器、伪类；5）元素选择器（p、div）、伪元素；6）通配符（*）、继承的样式。相同优先级时，后写的覆盖先写的。建议：不要滥用!important，用选择器 specificity 控制优先级。Q 什么时候用内联样式？
A 内联样式的使用场景非常有限：1）JavaScript动态修改样式（
element.style.color = 'red'）；2）快速调试（临时看效果）；3）邮件模板（邮件客户端对<style>支持差）。除此之外，都应该用内部或外部样式表。内联样式的缺点：难以维护、无法复用、优先级过高导致难以覆盖。📖 小节
- 三种写样式的方式：内联（style属性）、内部（
<style>标签）、外部（<link>引入.css文件） - 外部样式表是最佳实践——复用、缓存、分离结构与表现
- 样式优先级：内联 > 内部 > 外部 > 浏览器默认
- CSS 属性由"属性名: 属性值"组成，用分号分隔
📝 作业
- 样式实践：创建一个 HTML 页面，用三种方式分别设置不同元素的样式。观察优先级的效果。
- 卡片设计：用内联样式创建一个包含标题、图片描述和按钮的卡片组件。
- 外部样式：创建一个
style.css文件，用<link>引入并应用到页面的多个元素上。
