css样式表的三种类型

作者：末世修罗发布日期:2025-11-16 浏览:85

/* 内联样式表 (Inline CSS) */
<!-- 直接在 HTML 标签中使用 style 属性 -->
<p style="color: blue; font-size: 16px;">这是一个内联样式的段落。</p>

/* 内部样式表 (Internal CSS) */
<!-- 在 HTML 文件的 <head> 部分定义样式 -->
<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个内部样式的段落。</p>
</body>

/* 外部样式表 (External CSS) */
<!-- 在单独的 .css 文件中定义样式，并在 HTML 文件中引用 -->
/* styles.css 文件内容 */
p {
    color: red;
    font-size: 20px;
}

<!-- HTML 文件中引用外部样式表 -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个外部样式的段落。</p>
</body>

解释说明：

内联样式表：直接在 HTML 元素中使用 style 属性定义样式，适用于单个元素的样式设置。
内部样式表：在 HTML 文件的 <head> 部分使用 <style> 标签定义样式，适用于整个 HTML 文件中的样式设置。
外部样式表：将样式定义在一个单独的 .css 文件中，并通过 <link> 标签在 HTML 文件中引用，适用于多个 HTML 文件共享相同的样式。

上一篇：css绝对定位和相对定位

下一篇：css 文字边框