html和css怎么连接

作者：冷视天下发布日期:2025-07-10 浏览:53

<!DOCTYPE html>
<html>
<head>
    <title>HTML 和 CSS 连接示例</title>
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <!-- 内部样式表 -->
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

解释说明：

外部样式表：通过 <link> 标签引入外部的 CSS 文件。href 属性指定了 CSS 文件的路径。
内部样式表：在 HTML 文档的 <head> 部分使用 <style> 标签定义样式规则，这些样式仅对当前页面有效。
内联样式：可以直接在 HTML 元素中使用 style 属性定义样式，但这通常不推荐，因为它会降低代码的可维护性。

如果你需要将 HTML 和 CSS 分离到不同的文件中，可以创建一个名为 styles.css 的文件，并将内部样式表中的内容移到该文件中。

上一篇：纯html网页模板

下一篇：html设置id