css的三种引入方式

作者：紛手也是一茽の媄丽发布日期:2025-04-22 浏览:30

# CSS 的三种引入方式

## 1. 内联样式 (Inline Style)

直接在 HTML 标签中使用 `style` 属性来定义样式。这种方式只对当前元素有效。

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

解释说明: 内联样式是将 CSS 代码直接写在 HTML 元素的 style 属性中，这种方式适用于单个元素的样式设置，但不推荐广泛使用，因为它会增加 HTML 代码的复杂度，且不利于维护。

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>

解释说明: 内部样式表是将 CSS 代码放在 HTML 文件的 <head> 部分的 <style> 标签中，适用于同一个页面内的多个元素。相比内联样式，它更易于维护，但仍局限于单个页面。

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

将 CSS 代码保存在一个单独的 .css 文件中，并通过 <link> 标签将其引入到 HTML 文件中。这种方式可以应用于多个页面。

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

解释说明: 外部样式表是将 CSS 代码保存在一个独立的 .css 文件中，然后通过 HTML 文件中的 <link> 标签引入。这种方式便于维护和复用，适用于多个页面共享相同的样式。

上一篇：css实现自动轮播图

下一篇：css 设置字体