6.1 Klassattributet och stiltaggen
Men det är inte allt. Efter att hundratals "stilar" uppfunnits, uppstod frågan: hur man använder dem? Och sedan kom de på idén att gruppera dem i "klasser". Det är naturligtvis inte samma klasser som i Java. Bara speciella stilgrupper.
Och om du hade en bild innan du använde "klasser":
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Nu kan det skrivas som:
<img src="logo.png" class="picture">
<style>
img.picture {
width=100px;
height=100px;
opacity=0.5
}
</style>
Vi skapade en speciell «style» picture
och överförde stilvärdena från style
. Och sedan knöt vi <img> och "stil"-bilden med taggen class
.
6.2 Väljare, typer av väljare
Dessa stilar, renderade separat, blev kända som classes
eller selectors
. De har flera viktiga funktioner.
Man html-element
kan ha flera väljare. Deras namn anges med ett mellanslag. Exempel:
<img src="logo.png" class="picture main">
En anledning till att vi har berört väljare här är att de kan tillämpas automatiskt. Och denna användbara egendom kommer att användas mycket ofta i framtiden. Inklusive Java-utvecklare.
Här är en kort lista över dem:
# | Väljare | Exempel | Beskrivning |
---|---|---|---|
1 | * |
|
Gäller alla element i ett HTML-dokument. |
2 | #id |
|
# följs av id för elementet som den givna stilen ska tillämpas på. |
3 | märka |
|
Gäller alla tabeller i dokumentet. |
4 | tag.väljare |
|
Gäller alla dokumenttabeller som har klassattributet specificerat. |
5 | .väljare |
|
Gäller alla element som har klassattributet specificerat. Vilken tagg som helst. |
6 | förälder barn |
|
Gäller alla element där den överordnade taggen innehåller huvudklassen och den underordnade taggen innehåller artikelklassen. |
7 | tag: länk |
|
Pseudoklassen :link används för att utforma länkar som användaren inte har klickat på ännu. |
8 | tag:besökt |
|
Pseudoklassen :link används för att utforma länkar som användaren redan har klickat på. |
9 | tag:markerad |
|
Denna pseudoklass kommer endast att välja markerade UI-element: alternativknappar eller kryssrutor. |
10 | Tag: sväva |
|
Denna pseudoklass låter dig ändra stilen på ett element när du håller musen över det. |
elva | Tag: första barnet |
|
Denna pseudoklass tillåter endast att det första underordnade elementet väljs. |
Du behöver inte memorera allt. Men det skulle vara bra om du studerade den här tabellen ett par gånger och allt detta lades in i ditt huvud. Utan webben i det moderna livet, ingenstans och på webben - ingenstans utan väljare.