CSS -keurders
'n CSS-kieser kies die HTML-element(e) wat jy wil styl.
CSS-keurders
CSS-keurders word gebruik om die HTML-elemente wat jy wil styl te "vind" (of te kies).
Ons kan CSS-keurders in vyf kategorieë verdeel:
- Eenvoudige kiesers (kies elemente gebaseer op naam, ID, klas)
- Kombineerder-keurders (kies elemente gebaseer op 'n spesifieke verhouding tussen hulle)
- Pseudo-klas keurders (kies elemente gebaseer op 'n sekere toestand)
- Pseudo- elementkiesers (kies en styl 'n deel van 'n element)
- Eienskapkiesers (kies elemente gebaseer op 'n eienskap of eienskapwaarde)
Hierdie bladsy sal die mees basiese CSS-keurders verduidelik.
Die CSS element Selector
Die elementkieser kies HTML-elemente gebaseer op die elementnaam.
Voorbeeld
Hier sal alle <p>-elemente op die bladsy in die middel belyn wees, met 'n rooi tekskleur:
p
{
text-align: center;
color: red;
}
Die CSS-ID-kieser
Die id-kieser gebruik die id-kenmerk van 'n HTML-element om 'n spesifieke element te kies.
Die id van 'n element is uniek binne 'n bladsy, so die id-kieser word gebruik om een unieke element te kies!
Om 'n element met 'n spesifieke id te kies, skryf 'n hash (#) karakter, gevolg deur die id van die element.
Voorbeeld
Die CSS-reël hieronder sal toegepas word op die HTML-element met id="para1":
#para1
{
text-align: center;
color: red;
}
Let wel: 'n ID-naam kan nie met 'n nommer begin nie!
Die CSS-klaskieser
Die klaskieser kies HTML-elemente met 'n spesifieke klaskenmerk.
Om elemente met 'n spesifieke klas te kies, skryf 'n punt (.) karakter, gevolg deur die klasnaam.
Voorbeeld
In hierdie voorbeeld sal alle HTML-elemente met class="center" rooi en middel-belyn wees:
.center {
text-align: center;
color: red;
}
U kan ook spesifiseer dat slegs spesifieke HTML-elemente deur 'n klas beïnvloed moet word.
Voorbeeld
In hierdie voorbeeld sal slegs <p>-elemente met class="center" rooi en middelbelyn wees:
p.center {
text-align: center;
color: red;
}
HTML-elemente kan ook na meer as een klas verwys.
Voorbeeld
In hierdie voorbeeld sal die <p>-element volgens class="center" en na class="large" gestileer word:
<p class="center large">This paragraph refers to two classes.</p>
Let wel: 'n Klasnaam kan nie met 'n nommer begin nie!
Die CSS Universal Selector
Die universele kieser (*) kies alle HTML-elemente op die bladsy.
Voorbeeld
Die CSS-reël hieronder sal elke HTML-element op die bladsy beïnvloed:
*
{
text-align: center;
color: blue;
}
Die CSS-groeperingkieser
Die groepering keurder kies al die HTML-elemente met dieselfde styldefinisies.
Kyk na die volgende CSS-kode (die h1-, h2- en p-elemente het dieselfde styldefinisies):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Dit sal beter wees om die keurders te groepeer, om die kode te minimaliseer.
Om keurders te groepeer, skei elke keurder met 'n komma.
Voorbeeld
In hierdie voorbeeld het ons die keurders uit die kode hierbo gegroepeer:
h1, h2, p
{
text-align: center;
color: red;
}
Alle eenvoudige CSS-keurders
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |