6.1 Het class-attribuut en de style-tag
Maar dat is niet alles. Nadat honderden "stijlen" waren uitgevonden, rees de vraag: hoe ze te gebruiken? En toen kwamen ze op het idee om ze in "klassen" te groeperen. Dit zijn natuurlijk niet dezelfde klassen als in Java. Gewoon speciale stijlgroepen.
En als je voordat je "klassen" gebruikte een foto had:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Nu zou het kunnen worden geschreven als:
<img src="logo.png" class="picture">
<style>
img.picture {
width=100px;
height=100px;
opacity=0.5
}
</style>
We hebben een speciale gemaakt «стиль» picture
en de stijlwaarden van de style
. En toen hebben we de <img> en de "stijl" foto gekoppeld aan de tag class
.
6.2 Selector, soorten selectors
Deze stijlen, afzonderlijk weergegeven, werden bekend als классами
of selectors
. Ze hebben verschillende belangrijke kenmerken.
Men html-element
kan meerdere selectors hebben. Hun namen worden aangegeven met een spatie. Voorbeeld:
<img src="logo.png" class="picture main">
Een van de redenen waarom we hier selectors hebben genoemd, is omdat ze automatisch kunnen worden toegepast. En deze nuttige eigenschap zal in de toekomst nog heel vaak gebruikt worden. Inclusief Java-ontwikkelaars.
Hier is een korte lijst van hen:
# | kiezer | Voorbeeld | Beschrijving |
---|---|---|---|
1 | * |
|
Geldt voor alle elementen van een HTML-document. |
2 | #ID kaart |
|
De # wordt gevolgd door de id van het element waarop de gegeven stijl moet worden toegepast. |
3 | label |
|
Geldt voor alle tabellen in het document. |
4 | tag.kiezer |
|
Is van toepassing op alle documenttabellen waarvoor het kenmerk class is opgegeven. |
5 | .kiezer |
|
Is van toepassing op alle elementen waarvoor het class-attribuut is opgegeven. Elke tag. |
6 | ouder kind |
|
Is van toepassing op alle elementen waarbij de parent-tag de hoofdklasse bevat en de child-tag de artikelklasse. |
7 | label: koppeling |
|
De pseudo-klasse :link wordt gebruikt om links op te maken waarop de gebruiker nog niet heeft geklikt. |
8 | tag:bezocht |
|
De pseudo-klasse :link wordt gebruikt om links op te maken waarop de gebruiker al heeft geklikt. |
9 | tag:gecontroleerd |
|
Deze pseudoklasse selecteert alleen aangevinkte UI-elementen: keuzerondjes of selectievakjes. |
10 | label: zweven |
|
Met deze pseudoklasse kunt u de stijl van een element wijzigen wanneer u er met de muis over beweegt. |
elf | tag:eerste kind |
|
Met deze pseudoklasse kan alleen het eerste onderliggende element worden geselecteerd. |
Je hoeft niet alles te onthouden. Maar het zou goed zijn als je deze tabel een paar keer bestudeerde en dit alles in je hoofd werd gedeponeerd. Zonder internet in het moderne leven, nergens, en op internet - nergens zonder selectors.
GO TO FULL VERSION