html style

作者：洃铯哖輪发布日期:2025-02-09 浏览:59

<!DOCTYPE html>
<html>
<head>
    <title>HTML Style Example</title>
    <style>
        /* 内部样式表：定义了 body 和 h1 的样式 */
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <!-- 行内样式：直接在元素中定义样式 -->
    <p style="color: red;">这是一个带有行内样式的段落。</p>

    <!-- 类样式：使用 class 属性定义多个元素的样式 -->
    <p class="center">这是一个带有类样式的居中段落。</p>

    <!-- ID 样式：使用 id 属性定义单个元素的样式 -->
    <p id="special">这是一个带有 ID 样式的特殊段落。</p>

    <h1>这是一个标题</h1>
    <p>这是一个普通的段落。</p>

    <style>
        /* 额外的样式规则 */
        .center {
            text-align: center;
        }
        #special {
            font-weight: bold;
        }
    </style>
</body>
</html>

解释说明：

内部样式表：在 <head> 部分使用 <style> 标签定义全局样式，适用于整个 HTML 文档。
行内样式：直接在 HTML 元素中使用 style 属性定义样式，只对当前元素有效。
类样式：通过 class 属性定义样式，可以应用于多个元素。
ID 样式：通过 id 属性定义样式，通常用于唯一标识一个元素。

以上代码展示了如何在 HTML 中使用不同的方式来应用样式。

上一篇：html单选框

下一篇：html美化