HTML提供结构，CSS负责样式，二者结合可实现美观布局。1. 内联样式通过style属性直接设置，适用于单元素调整但难复用；2. 内部样式表置于head中，用style标签定义，适合单页统一排版；3. 外部样式表将CSS独立为文件，通过link引入，利于多页共享与维护，推荐使用；4. 关键CSS属性如font-family、color、text-align、line-height等显著提升排版效果，结合语义化标签可实现专业视觉呈现。
HTML 和 CSS 结合使用，可以让网页从简单的文本结构变成具有丰富排版和视觉效果的页面。HTML 负责内容的结构，比如标题、段落、列表等；CSS 则负责这些内容的样式，比如颜色、字体、间距、对齐方式等。通过将两者结合，可以实现美观且易于维护的网页布局。
1. 使用内联样式（行内样式）
最直接的方式是在 HTML 标签中使用 style 属性来添加 CSS 样式。这种方式适合单个元素的快速调整，但不利于整体管理。
例如：<p style="color: blue; font-size: 18px; text-align: center;">这是一段居中的蓝色文字</p>
优点是简单直观，缺点是难以复用，修改多个元素时效率低。
立即学习“前端免费学习笔记（深入）”；
2. 使用内部样式表（在 head 中写 CSS）
将 CSS 写在 HTML 文件的 <head> 区域中，使用 <style> 标签包裹。适用于单个页面的样式设置。
示例：
<head><br>
<style><br>
p { color: green; font-family: 'Arial', sans-serif; }<br>
h1 { text-align: center; text-transform: uppercase; }<br>
</style><br>
</head>
这样所有 p 标签文字会变成绿色并使用 Arial 字体，h1 标题则居中并转为大写，实现统一排版。
3. 使用外部样式表（推荐方式）
将 CSS 单独保存为 .css 文件，然后在 HTML 中通过 link 标签引入。这是最推荐的方式，便于多页面共享样式，也利于维护。
步骤如下：- 创建一个文件如
style.css，内容为：
body { font-family: 'Helvetica', sans-serif; background-color: #f4f4f4; }<br> h1 { color: #333; border-bottom: 2px solid #0066cc; padding-bottom: 5px; }<br> .highlight { background-color: yellow; font-weight: bold; } - 在 HTML 文件中引入：
<link rel="stylesheet" href="style.css">
之后在 HTML 中使用 class 或标签选择器应用样式，如：<p class="highlight">这段文字会高亮显示</p>
4. 实现丰富排版的关键 CSS 属性
结合 HTML 结构与以下 CSS 属性，可以显著提升排版效果：
- font-family：设置字体，如“微软雅黑”、“Times New Roman”等
- font-size：控制文字大小，可用 px、em、rem 等单位
- color 和 background-color：设置文字和背景颜色
- text-align：控制对齐方式（left、center、right、justify）
- line-height：调整行间距，提升可读性
- text-transform：转换字母大小写（uppercase、lowercase）
- text-decoration：添加下划线、删除线等
- letter-spacing：控制字间距，常用于标题美化
例如，一个优雅的标题样式可以这样写：h1 { font-family: 'Georgia', serif; font-size: 2.5rem; color: #2c3e50; text-align: center; letter-spacing: 1px; line-height: 1.2; }
基本上就这些方法。合理使用外部样式表配合语义化 HTML 标签（如 header、article、section），再结合上述 CSS 属性，就能轻松实现专业级的排版效果。不复杂但容易忽略细节，比如字体搭配和留白处理，这些对整体视觉影响很大。
