首页教程软件教程正文

HTML class类属性

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 228 浏览 2637 个字

摘要 :

文章目录 HTML 中的类属性定义 HTML 类使用不同类名的另一个示例 JavaScript 中的类属性多个类相同类名不同标签 HTML 中的类属性 HTML 类属性用于指定 HTML 元素的……

文
章
目
录

HTML 中的类属性
定义 HTML 类
使用不同类名的另一个示例
JavaScript 中的类属性
多个类
相同类名不同标签

HTML 中的类属性

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

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

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

定义 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：

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