HTML 类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .cities {
  6.     background-color:black;
  7.     color:white;
  8.     margin:20px;
  9.     padding:20px;
  10. } 
  11. </style>
  12. </head>
  14. <body>
  16. <div class="cities">
  17. <h2>London</h2>
  18. <p>
  19. London is the capital city of England. 
  20. It is the most populous city in the United Kingdom, 
  21. with a metropolitan area of over 13 million inhabitants.
  22. </p>
  23. </div> 
  25. </body>
  26. </html>

分类块级元素

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类。

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .cities {
  6.     background-color:black;
  7.     color:white;
  8.     margin:20px;
  9.     padding:20px;
  10. } 
  11. </style>
  12. </head>
  14. <body>
  16. <div class="cities">
  17. <h2>London</h2>
  18. <p>London is the capital city of England. 
  19. It is the most populous city in the United Kingdom, 
  20. with a metropolitan area of over 13 million inhabitants.</p>
  21. </div>
  23. <div class="cities">
  24. <h2>Paris</h2>
  25. <p>Paris is the capital and most populous city of France.</p>
  26. </div>
  28. <div class="cities">
  29. <h2>Tokyo</h2>
  30. <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
  31. and the most populous metropolitan area in the world.</p>
  32. </div>
  34. </body>
  35. </html>

分类行内元素

HTML <span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.   span.red {color:red;}
  6. </style>
  7. </head>
  8. <body>
  10. <h1>My <span class="red">Important</span> Heading</h1>
  12. </body>
  13. </html>