html引入css

作者：惨美歌发布日期:2025-07-02 浏览:3

<!DOCTYPE html>
<html>
<head>
    <!-- 通过<link>标签引入外部CSS文件 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

解释说明：

<link> 标签用于在 HTML 文件中引入外部 CSS 文件。
rel="stylesheet" 表示该链接是一个样式表。
type="text/css" 指定链接文件的类型为 CSS（虽然现代浏览器通常可以省略此属性）。
href="styles.css" 指定外部 CSS 文件的路径。在这个例子中，styles.css 文件应该位于与 HTML 文件相同的目录下。

如果你需要将 CSS 内联或嵌入到 HTML 文件中，可以使用以下方式：

<!DOCTYPE html>
<html>
<head>
    <!-- 在<head>部分使用<style>标签嵌入CSS -->
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

解释说明：

<style> 标签用于在 HTML 文件的 <head> 部分嵌入 CSS 样式。
这种方法适用于少量的样式规则，或者当样式仅用于当前页面时。

上一篇：html color

下一篇：文字居中怎么设置html