css三种引入方式

作者：苏染瞳° 发布日期:2026-03-09 浏览:114

# CSS 三种引入方式

## 1. 内联样式 (Inline Style)
直接在 HTML 标签中使用 `style` 属性来定义样式。这种方式的优先级最高，但不推荐大量使用，因为它会使得 HTML 代码变得难以维护。

```html
<p style="color: red; font-size: 20px;">这是一个内联样式的段落。</p>

2. 内部样式表 (Internal Style Sheet)

在 HTML 文档的 <head> 部分使用 <style> 标签来定义样式。这种方式适用于单个页面的样式定义。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个内部样式表的段落。</p>
</body>
</html>

3. 外部样式表 (External Style Sheet)

将样式定义在一个单独的 .css 文件中，然后通过 <link> 标签引入到 HTML 文件中。这种方式便于维护和复用，是推荐的方式。

CSS 文件 (styles.css)

p {
    color: green;
    font-size: 18px;
}

HTML 文件

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个外部样式表的段落。</p>
</body>
</html>

上一篇：换行 css

下一篇：css盒子