类属性

6.1 类属性和样式标签

但这还不是全部。在发明了数百种“样式”之后，问题来了：如何使用它们？然后他们想出了将他们分组为“班级”的想法。当然，这些类与 Java 中的类不同。只是特殊风格的团体。

如果在使用“类”之前你有一张图片：

<img src="logo.png" style="width=100px;height=100px;opacity=0.5">

现在它可以写成：

<img src="logo.png" class="picture">

<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

我们创建了一个特殊的«style» picture并将样式值从style. 然后我们将 <img> 和“样式”图片与标签绑定在一起class。

6.2 选择器，选择器的类型

这些单独呈现的样式被称为classes或selectors。它们有几个重要的特征。

一个html-element可以有多个选择器。他们的名字用空格表示。例子：

<img src="logo.png" class="picture main">

我们在这里谈到选择器的原因之一是因为它们可以自动应用。而且这个有用的属性以后会用的很频繁。包括 Java 开发人员。

以下是其中的简短列表：

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

您不必记住所有内容。但是，如果您研究了这张表几次并且所有这些都存入了您的脑海，那就太好了。现代生活中没有网络，无处可去，而在网络上——无处不在没有选择器。