css怎么嵌入到html

作者：洃铯哖輪发布日期:2026-01-25 浏览:101

<!DOCTYPE html>
<html>
<head>
    <title>CSS嵌入到HTML示例</title>
    <!-- 内联样式 -->
    <p style="color: blue; font-size: 20px;">这是一个使用内联样式的段落。</p>

    <!-- 内部样式表 -->
    <style>
        /* 定义一个类样式 */
        .example {
            color: green;
            font-size: 18px;
        }

        /* 定义一个标签样式 */
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>这是标题</h1>
    <p class="example">这是一个使用内部样式表的段落。</p>

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

解释说明：

内联样式：直接在HTML元素中使用style属性定义样式，如<p style="color: blue; font-size: 20px;">。
内部样式表：在HTML文档的<head>部分使用<style>标签定义样式，适用于整个页面。例如，定义了一个类样式.example和一个标签样式h1。
外部样式表：通过<link>标签引入外部CSS文件，通常用于多个页面共享同一套样式。这里假设有一个名为styles.css的外部样式表文件。

希望这个示例能帮助你理解如何将CSS嵌入到HTML中。

上一篇：html图片怎么导入

下一篇：html添加背景图片