HTML教程-HTML类

HTML 中的类属性

HTML 类属性用于为 HTML 元素指定单个或多个类名。CSS 和 JavaScript 可以使用类名来为 HTML 元素执行一些任务。您可以在具有特定类的 CSS 中使用此类，写一个句点 (.) 字符，后跟用于选择元素的类的名称。

类属性可以在 <style> 标记中定义，也可以在单独的文件中使用 (.) 字符定义。

在 HTML 文档中，我们可以对不同的元素使用相同的类属性名称。

定义 HTML 类

要创建 HTML 类，首先使用 <head> 部分中的 <style> 标记为 HTML 类定义样式，如下例所示：

例子：

<head>  
    <style>  
        .headings{   
            color: lightgreen;  
            font-family: cursive;  
            background-color: black; }  
    </style>  
</head>

我们已经为类名“headings”定义了样式，我们可以将这个类名与我们想要提供此类样式的任何 HTML 元素一起使用。我们只需要按照下面的语法来使用它。

<tag class="ghf"> content </tag>

示例 1：

<!DOCTYPE html>  
<html>  
<head>  
    <style>  
        .headings{   
            color: lightgreen;  
            font-family: cursive;  
            background-color: black; }  
    </style>  
</head>  
<body>  
<h1 class="headings">This is first heading</h1>  
<h2 class="headings">This is Second heading</h2>  
<h3 class="headings">This is third heading</h3>  
<h4 class="headings">This is fourth heading</h4>  
</body>  
</html>

另一个具有不同类名的示例

例子：

让我们使用带有 CSS 的类名“Fruit”来设置所有元素的样式。

<style>    
.fruit {    
    background-color: orange;    
    color: white;    
    padding: 10px;    
}     
</style>    
    
<h2 class="fruit">Mango</h2>    
<p>Mango is king of all fruits.</p>    
    
<h2 class="fruit">Orange</h2>    
<p>Oranges are full of Vitamin C.</p>    
    
<h2 class="fruit">Apple</h2>    
<p>An apple a day, keeps the Doctor away.</p>

在这里你可以看到我们使用了带有 (.) 的类名“fruit”来使用它的所有元素。

注意：您可以在任何 HTML 元素上使用 class 属性。类名区分大小写。

JavaScript 中的类属性

您可以使用 getElementsByClassName() 方法使用具有指定类名的 JavaScript 访问元素。

例子：

当用户单击按钮时，让我们隐藏类名称为“fruit”的所有元素。

<!DOCTYPE html>    
<html>    
<body>    
    
<h2>Class Attribute with JavaScript</h2>    
<p>Click the button, to hide all elements with the class name "fruit", with JavaScript:</p>    
    
<button onclick="myFunction()">Hide elements</button>    
    
    
<h2 class="fruit">Mango</h2>    
<p>Mango is king of all fruits.</p>    
    
<h2 class="fruit">Orange</h2>    
<p>Oranges are full of Vitamin C.</p>    
    
<h2 class="fruit">Apple</h2>    
<p>An apple a day, keeps the Doctor away.</p>    
    
<script>    
function myFunction() {    
  var x = document.getElementsByClassName("fruit");    
  for (var i = 0; i < x.length; i++) {    
    x[i].style.display = "none";    
  }    
}    
</script>    
    
</body>    
</html>

注意：您将在我们的 JavaScript 教程中了解有关 JavaScript 的更多信息。

多个类

您可以对 HTML 元素使用多个类名（不止一个）。这些类名必须用空格分隔。

例子：

让我们用类名“fruit”和类名“center”来设计元素的样式。

<!DOCTYPE html>    
<html>    
<style>    
.fruit {    
    background-color: orange;    
    color: white;    
    padding: 10px;    
}     
    
.center {    
    text-align: center;    
}    
</style>    
<body>    
    
<h2>Multiple Classes</h2>    
<p>All three elements have the class name "fruit". In addition, Mango also have the class name "center", which center-aligns the text.</p>    
    
<h2 class="fruit center">Mango</h2>    
<h2 class="fruit">Orange</h2>    
<h2 class="fruit">Apple</h2>    
    
</body>    
</html>

可以看到第一个元素<h2>既属于“fruit”类，也属于“center”类。

同一类不同标签

您可以使用相同的类名和不同的标签，如 <h2> 和 <p> 等来共享相同的样式。

例子：

<!DOCTYPE html>    
<html>    
<style>    
.fruit {    
  background-color: orange;    
  color: white;    
  padding: 10px;    
}     
</style>    
<body>    
<h2>Same Class with Different Tag</h2>    
<h2 class="fruit">Mango</h2>    
<p class="fruit">Mango is the king of all fruits.</p>    
</body>    
</html>