引入css的三种方式

作者：殇丶離別发布日期:2025-10-07 浏览:86

# 引入CSS的三种方式

## 1. 外部样式表 (External Stylesheet)

将CSS代码写在一个单独的`.css`文件中，然后在HTML文件中通过`<link>`标签引入。

### 示例代码：

```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

/* styles.css */
h1 {
    color: blue;
}

解释：

href="styles.css"：指定外部CSS文件的路径。
这种方式适合大型项目，便于维护和复用。

2. 内部样式表 (Internal Stylesheet)

将CSS代码写在HTML文件的<style>标签内，通常放在<head>部分。

示例代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

解释：

<style>标签内的CSS代码只对当前页面有效。
适用于小型项目或简单的页面样式。

3. 行内样式 (Inline Styles)

直接在HTML元素的style属性中定义CSS样式。

示例代码：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
    <h1 style="color: red;">Hello World</h1>
</body>
</html>

解释：

style="color: red;"：直接在HTML元素中定义样式。
这种方式优先级最高，但不推荐大量使用，因为它会混杂HTML结构和样式，不利于维护。

上一篇：css 设置滚动条样式

下一篇：css 旋转180度