HTML _ HTML 类

HTML 类

使用class属性

设置html元素的css类，就是通过设置该元素的class属性的取值来改变其css样式。

先举一个比较简单的例子，fuck_weapon是class名：

<!DOCTYPE html>
<html>
<head>
<style>
.fuck_weapon {
    background-color: black;
    color: white;
    margin: 20px;
    padding: 20px;
} 
</style>
</head>
<body>

<div class="fuck_weapon">
  <h2>倚天剑</h2>
  <p>曹操的佩剑、也是灭绝师太的佩剑</p>
</div>

<div class="fuck_weapon">
  <h2>焚寂剑</h2>
  <p>百里屠苏的佩剑</p>
</div>

<div class="fuck_weapon">
  <h2>专否剑</h2>
  <p>上古邪剑，名曰专否，可诛仙灭地</p>
</div>

</body>
</html>

运行一下

设置行内元素的class属性

行内元素（inline）也是可以被设置class属性的。

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 150%;
    color: red;
}
</style>
</head>
<body>

<h1>邪剑<span class="note">专否</span></h1>
<p>邪剑<span class="note">专否</span> 反噬其主 主角光环碎也 剧终</p>

</body>
</html>

运行一下

使用复合类

上面的例子的class的取值都是单独的一个类名，其实类名是可以复合使用的，即组合使用。

在css描述中，如果这两种类都分别描述的，则该元素会同时具有两种描述的所有样式。这里先大致了解一下，会意即可，将来在css教程中会进一步了解把握更多细节。

<h2 class="sword niub">诛仙神剑</h2>
<h2 class="sword">焚寂剑</h2>
<h2 class="sword">专否剑</h2>

运行一下

在JavaScript中使用元素的class属性

JavaScript后续会深入学习，这里提到，主要是想说明使用class属性的一些意义，使用class类去设置元素，其实是有点潜台词地方式在声明这个元素的样式类型，有时并不仅仅是为了描述设置css样式，有时是为了对这种类型进行声明以供后续在JavaScript脚本中选择与调用。这里举一个例子，点击按钮，让所有类名为“city_name”的元素消失：

<button onclick="myFunction()">点击朕，让所有class属性为city_name的元素消失</button>

<h2 class="city_name">成都</h2>
<p>一个美女如云的城市</p>

<h2 class="city_name">重庆</h2>
<p>一个美女如云的城市</p>

<h2 class="city_name">古潼京</h2>
<p>一个曾经美女如云的城市</p>

<script>
function myFunction() {
  var x = document.getElementsByClassName("city_name");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

运行一下

HTML 类

推广