類屬性

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;
}

您不必記住所有內容。但是，如果您研究了這張表幾次並且所有這些都存入了您的腦海，那就太好了。現代生活中沒有網絡，無處可去，而在網絡上——無處不在沒有選擇器。