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>
Java university

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

6.2 选择器，选择器的类型

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

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


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

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

以下是其中的简短列表：

# 选择器 例子 描述
1个 * 
* {
  margin: 0;
  padding: 0;
}
适用于 HTML 文档的所有元素。
2个 ＃ID 
#img123 {
   width:100px;
   height 100px;
}
 # 后跟要应用给定样式的元素的 ID。
3个 标签 
table {
   color: black;
}
 适用于文档中的所有表格。
4个 标签选择器 
table.important {
   color: red;
}
 适用于具有指定类属性的所有文档表。
5个 .选择器 
.picture {
  opacity: 0.5
}
 适用于具有指定类属性的所有元素。任何标签。
6个 亲子 
main article {
  color: blue;
}
 适用于父标签包含主类且子标签包含文章类的所有元素。
7 标签：链接 
a:link {
color: blue;
}
 :link 伪类用于设置用户尚未点击的链接的样式。
8个 标签：访问过 
a:visited {
color: red;
}
 :link 伪类用于设置用户已经点击过的链接的样式。
9 标签：勾选 
input[type=radio]:checked {
 border: 1px solid black;
}
 这个伪类将只选择选中的 UI 元素：单选按钮或复选框。
10 标签：悬停 
div:hover {
  background: red;
}
 这个伪类允许您在将鼠标悬停在元素上时更改元素的样式。
十一 标签：第一个孩子 
ul li:first-child {
 border-top: none;
}
 这个伪类将只允许选择第一个子元素。

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