html教程 内容:16

HTML Class 与 ID 的差异属性

  • 查看作者
  • id 属性用于为HTML元素指定唯一的id,Class属性用于为HTML元素指定相同类名的多个元素。

    使用id属性

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #myHeader {
      background-color: lightblue;
      color: black;
      padding: 40px;
      text-align: center;
    }
    </style>
    </head>
    <body>
    <h1 id="myHeader">标题</h1>
    </body>
    </html>

    PS:id 的语法是:写一个井号#,后跟一个 id 名称。然后,在括号 { } 中定义 CSS 属性。

    Class与ID差异

    <style>
    /* 设置 id 为 "myHeader" 的元素的样式 */
    #myHeader {
      background-color: lightblue;
      color: black;
      padding: 5px;
      text-align: center;
    }
    /* 设置类名为 "city" 的所有元素的样式 */
    .city {
      background-color: tomato;
      color: white;
      padding: 10px;
    }
    </style>
    <!-- 拥有唯一 id 的元素 -->
    <h1 id="myHeader">标题</h1>
    <!-- 拥有相同类名的多个元素 -->
    <h2 class="city">段落</h2>
    <p>内容内容内容</p>
    <h2 class="city">段落</h2>
    <p>内容内容内容</p>

    PS:同一个类名可以由多个HTML元素使用,而一个id名称只能由页面中的一个HTML元素使用:

    请登录之后再进行评论

    登录
    最新评论