在网页制作中，CSS（Cascading Style Sheets）样式表是一种强大的工具，用于定义和控制网页元素的布局、颜色、字体等视觉表现。本资料主要介绍了引入CSS样式表的四种常见方式，帮助初学者理解并掌握如何有效地应用CSS来美化网页。
1. 内联样式：
内联样式是最基础的CSS应用方式，它通过在HTML元素的`style`属性中直接写入CSS代码。例如：
```html
<p style="color: red; font-size: 20px;">这是一段使用内联样式的文本</p>
```
这种方式简单易懂，但缺点是样式无法复用，可能导致HTML文档过于臃肿，不利于维护。
2. 内部样式表（内部链接）：
内部样式表通常放在HTML文档的`<head>`部分，通过`<style>`标签包裹CSS规则。例如：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>这是一段使用内部样式表的文本</p>
</body>
</html>
```
这种方式让CSS与HTML分离，可复用性比内联样式高，但仍然局限于单个文档。
3. 外部样式表（外部链接）：
外部样式表是最推荐的方式，它将CSS代码保存在单独的`.css`文件中，然后在HTML文档中通过`<link>`标签引用。例如：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一段使用外部样式表的文本</p>
</body>
</html>
```
这样，多个页面可以共享一个样式表，提高代码复用率和易于维护。同时，有利于网页加载速度，因为浏览器可以缓存CSS文件，减少重复请求。
4. 行内样式块（@import）：
虽然不推荐，但在某些情况下，可以在内部样式表中使用`@import`规则引入其他CSS文件。例如：
```css
@import url("styles.css");
```
然而，这种方式会阻塞页面渲染，直到所有被导入的样式表加载完成，因此在性能上不如直接使用`<link>`标签。
总结来说，选择合适的CSS引入方式取决于项目需求和规模。对于小项目或简单的页面，内部样式表可能足够；大型项目或需要跨页面复用样式时，外部样式表是更好的选择。内联样式只适用于个别情况下的快速调整，而`@import`通常应避免使用。通过熟练掌握这些方法，你可以更高效地管理和控制网页的视觉呈现。
