上一节:
下一节:

  HTML 类属性

  • 在CSS中使用class属性

    class属性为HTML元素指定一个或多个类名。 CSS和JavaScript可以使用类名来为具有指定类名的元素执行某些任务。 在CSS中，要选择具有特定类的元素，写一个点（.）字符，后跟类的名称： 例如：在CSS中使用class属性 
    <style>
          .lang {
              background-color: green;
              color: white;
              padding: 10px;
          } 
          </style>

          <h2 class="lang">Java</h2>
          <p>PHP是世界上最好的语言吗？</p>

          <h2 class="lang">PHP</h2>
          <p>PHP是世界上最好的语言。</p>

          <h2 class="lang">Python</h2>
          <p>PHP是世界上最好的语言，呵呵。</p>
    尝试一下
    结果：

    Java

    PHP是世界上最好的语言吗？

    PHP

    PHP是世界上最好的语言。

    Python

    PHP是世界上最好的语言，呵呵。
    提示： class属性可用于任何HTML元素。 注意： 类名区分大小写！ 提示： 可以在CSS教程学习更多的CSS知识。

  • 在JavaScript中使用class属性

    JavaScript可以使用以下getElementsByClassName()方法访问具有指定类名的元素： 例如：在JavaScript中使用class属性 
    <h2 class="lang-one">Java</h2>
        <p>PHP是世界上最好的语言吗？</p>

        <h2 class="lang-one">PHP</h2>
        <p>PHP是世界上最好的语言。</p>

        <h2 class="lang-one">Python</h2>
        <p>PHP是世界上最好的语言，呵呵。</p>

        <button type="button" onclick="myFunction();">改变文本颜色</button>

        <script>
        function myFunction() {
        var x = document.getElementsByClassName("lang-one");
        for (var i = 0; i < x.length; i++) {
          i%2 == 0 ? x[i].style.color = 'red' : x[i].style.color = 'green';
        }
        }
        </script>
    尝试一下
    提示： 可以在JavaScript教程学习更多的CSS知识。

  • 一个元素多个类

    HTML元素可以有多个类名，每个类名必须用空格分隔。 
    <style>
          .lang2{
            color: green;
          }

          .other{
            font-size: 28px;
          }
        </style>
        <h2 class="lang2 other">PHP</h2>
        <h2 class="lang2">Java</h2>
        <h2 class="lang2">Python</h2>
    尝试一下
    在上面的示例中，第一个<h2>元素属于“lang2”类和“other”类。

  • 不同元素同一个类

    不同元素可以具有相同的类名，从而共享相同的样式： 
    <style>
          .lang3{
            color: green;
            font-weight:bold;
          }

         
        </style>
        <h2 class="lang3">PHP</h2>
        <p class="lang3">Java</p>
    尝试一下
    在上面的示例中，h2和p元素同时共享“lang3”类。
上一节:
下一节: