HTML class类属性

IT 文章1周前更新小编

0 0 0

HTML 中的类属性

HTML 类属性用于指定 HTML 元素的一个或多个类名。类名可以被 CSS 和 JavaScript 用来执行一些与 HTML 元素相关的任务。您可以在 CSS 中使用该类，只需写一个句点 (.)，然后跟上类名以选择元素。

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

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

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

定义 HTML 类

要创建一个 HTML 类，首先使用以下示例在 <head> 部分内定义 HTML 类的样式：<style> 标签：

示例：

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

我们为类名 “headings” 定义了样式，然后可以在任何我们想要提供此样式的 HTML 元素中使用这个类名。只需遵循以下语法来使用它。

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

示例 1：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

<!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>

使用不同类名的另一个示例

示例：让我们使用类名 “Fruit” 来为所有元素设置 CSS 样式。

<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 元素上使用类属性。类名是区分大小写的。

JavaScript 中的类属性

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

示例：

<!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>

当用户单击按钮时，让我们隐藏所有带有类名 “fruit” 的元素。注意：您将在我们的 JavaScript 教程中了解更多关于 JavaScript 的内容。

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

立即访问

多个类

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

示例：

<!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>

让我们为类名 “fruit” 和类名 “center” 的元素设置样式。您可以看到第一个元素 <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>