html引用css的三种方法

作者：冫LOVE灬丶棒棒发布日期:2026-03-20 浏览:63

<!-- 方法一：外部样式表（External CSS） -->
<!-- 在 HTML 文件的 <head> 部分使用 <link> 标签引用外部的 CSS 文件 -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

<!-- 方法二：内部样式表（Internal CSS） -->
<!-- 在 HTML 文件的 <head> 部分使用 <style> 标签定义样式 -->
<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

<!-- 方法三：内联样式（Inline CSS） -->
<!-- 直接在 HTML 元素中使用 style 属性定义样式 -->
<!DOCTYPE html>
<html>
<body>
    <p style="color: red; font-size: 18px;">这是一个段落。</p>
</body>
</html>

解释说明：

外部样式表（External CSS）：通过 <link> 标签引入外部的 CSS 文件，这种方式便于维护和复用样式。
内部样式表（Internal CSS）：在 HTML 文件的 <head> 部分使用 <style> 标签定义样式，适用于单个页面的样式定义。
内联样式（Inline CSS）：直接在 HTML 元素中使用 style 属性定义样式，这种方式灵活性高但不利于维护，通常只用于个别元素的特殊样式。

上一篇：html去掉下划线代码

下一篇：html标签作用