css样式表的三种样式

作者：花小泽ノ发布日期:2026-07-07 浏览:69

/* 内联样式 (Inline Styles) */
<!-- 在 HTML 元素中直接使用 style 属性定义样式 -->
<p style="color: blue; font-size: 16px;">这是一个内联样式的段落。</p>

/* 内部样式表 (Internal Style Sheet) */
<!-- 在 HTML 文档的 <head> 部分使用 <style> 标签定义样式 -->
<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个内部样式表的段落。</p>
</body>

/* 外部样式表 (External Style Sheet) */
<!-- 在单独的 .css 文件中定义样式，并在 HTML 文档中通过 <link> 标签引入 -->
/* styles.css 文件内容 */
p {
    color: red;
    font-size: 20px;
}

<!-- HTML 文件内容 -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一个外部样式表的段落。</p>
</body>

以上是 CSS 样式表的三种样式：内联样式、内部样式表和外部样式表。每种方式都有其适用场景，选择合适的方式可以使代码更加简洁和易于维护。

上一篇：css禁止换行

下一篇：css超出一行显示省略号