HTML类

使用class类属性

HTML类属性可以为同一类的名字，定义相同风格的元素。

这里有三个 <div> 元素指向同一类名：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
  div.cities {
      background-color: black;
      color: white;
      margin: 20px 0 20px 0;
      padding: 20px;
  }
  </style>
</head>

<body>

  <div class="cities">
    <h2>伦敦</h2>
    <p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </div>

  <div class="cities">
    <h2>巴黎</h2>
    <p>Paris is the capital and most populous city of France.</p>
    <p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p>
    <p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
  </div>

  <div class="cities">
    <h2>东京</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    <p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>
    <p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
  </div>

</body>
</html>

让我试试

在行内元素上使用类 class属性

HTML class 属性也可用于内联元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
  <style>
    span.note {
        font-size: 120%;
        color: red;
    }
  </style>
  </head>
<body>

  <h1>我的 <span class="note">重要</span> 标题</h1>
  <p>这是一些 <span class="note">重要</span> 文本.</p>

</body>
</html>

让我试试