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 開發人員。
以下是其中的簡短列表:
# | 選擇器 | 例子 | 描述 |
---|---|---|---|
1個 | * |
|
適用於 HTML 文檔的所有元素。 |
2個 | #ID |
|
# 後跟要應用給定樣式的元素的 ID。 |
3個 | 標籤 |
|
適用於文檔中的所有表格。 |
4個 | 標籤選擇器 |
|
適用於具有指定類屬性的所有文檔表。 |
5個 | .選擇器 |
|
適用於具有指定類屬性的所有元素。任何標籤。 |
6個 | 親子 |
|
適用於父標籤包含主類且子標籤包含文章類的所有元素。 |
7 | 標籤:鏈接 |
|
:link 偽類用於設置用戶尚未點擊的鏈接的樣式。 |
8個 | 標籤:訪問過 |
|
:link 偽類用於設置用戶已經點擊過的鏈接的樣式。 |
9 | 標籤:勾選 |
|
這個偽類將只選擇選中的 UI 元素:單選按鈕或複選框。 |
10 | 標籤:懸停 |
|
這個偽類允許您在將鼠標懸停在元素上時更改元素的樣式。 |
十一 | 標籤:第一個孩子 |
|
這個偽類將只允許選擇第一個子元素。 |
您不必記住所有內容。但是,如果您研究了這張表幾次並且所有這些都存入了您的腦海,那就太好了。現代生活中沒有網絡,無處可去,而在網絡上——無處不在沒有選擇器。
GO TO FULL VERSION