html中class的用法

作者：城若幻影发布日期:2026-03-14 浏览:98

<!DOCTYPE html>
<html>
<head>
    <title>HTML中class的用法</title>
    <style>
        /* 定义一个样式类 */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 使用class属性为元素应用样式 -->
    <p class="highlight">这是一个使用了class属性的段落。</p>
    <p>这是一个没有使用class属性的段落。</p>

    <!-- 可以为多个元素应用同一个class -->
    <div class="highlight">这是一个使用了class属性的div。</div>
    <span class="highlight">这是一个使用了class属性的span。</span>

    <!-- 一个元素可以有多个class -->
    <p class="highlight important">这是一个同时使用了两个class的段落。</p>

    <style>
        /* 定义另一个样式类 */
        .important {
            color: red;
        }
    </style>
</body>
</html>

解释说明：

定义样式类：在<style>标签中，我们定义了一个名为.highlight的样式类，它设置了背景颜色为黄色，并加粗字体。
使用class属性：通过在HTML元素中添加class="highlight"，我们可以将定义好的样式应用到这些元素上。
多个元素使用同一个class：多个不同的HTML元素（如<p>、<div>、<span>）可以共享同一个class，从而应用相同的样式。
一个元素多个class：一个HTML元素可以拥有多个class，例如class="highlight important"，这样可以同时应用多个样式的组合。

上一篇：html居中对齐代码怎么写

下一篇：html th