html引用css

作者：——愿望发布日期:2025-09-01 浏览:47

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 引用 CSS 示例</title>
    <!-- 方法一：通过 link 标签引用外部 CSS 文件 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 方法二：在 HTML 文件中使用内联样式 -->
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <!-- 方法三：通过 style 属性直接在元素中定义样式 -->
    <p style="color: red;">这是一个红色的段落。</p>
</body>
</html>

解释说明：

外部 CSS 文件引用：通过 <link> 标签可以引用外部的 CSS 文件。href 属性指定了 CSS 文件的路径。
内部 CSS：在 <style> 标签内可以直接编写 CSS 代码，这些样式仅对当前页面生效。
内联样式：通过 style 属性可以直接在 HTML 元素中定义样式，这种方式优先级最高，但不推荐大量使用，因为会降低代码的可维护性。

上一篇：html中padding用法

下一篇：html5新增标签