CSS valitsimet
- Edellinen sivu CSS syntaksi
- Seuraava sivu CSS käyttö
CSS valitsimet
CSS-valitsimet käytetään ‘etsimiseen’ (tai valitsemiseen) tyylejä asettavia HTML-elementtejä.
Voimme jakaa CSS-valitsimet viiteen luokkaan:
- Yksinkertaiset valitsimet (valita elementtejä nimien, id:n tai luokan perusteella)
- Yhdistämisvalitsimet(Valita elementtejä niiden välisistä tiettyjen suhteiden perusteella)
- Pseudoluokka-valitsimet(Valita elementtejä tiettyjen tilojen perusteella)
- Pseudoelementti-valitsimet(Valita elementin osa ja asettaa sen tyyli)
- Ominaisuusvalitsimet(Valita elementtejä ominaisuuksien tai ominaisuusarvojen perusteella)
Tämä sivu selittää perus CSS-valitsimet.
CSS-elementti-valitsin
Elementivalitsin valitsee HTML-elementit elementin nimellä.
Esimerkki
Tässä kaikilla sivulla olevilla <p>-elementeillä asetetaan keskustasotus ja punainen tekstin väri:
p {
text-align: center;
color: red;
}
CSS-ID-valitsin
ID-valitsin käyttää HTML-elementin ID-ominaisuutta valitakseen tietyn elementin.
Elementin ID on yksilöllinen sivulla, joten ID-valitsinta käytetään valitsemaan yksilöllinen elementti!
Jos haluat valita tietyn ID:n elementin, kirjoita nuoli (＃) ja sitten elementin ID.
Esimerkki
Tämä CSS-sääntö vaikuttaa HTML-elementtiin, jolla on id="para1":
#para1 {
text-align: center;
color: red;
}
Huomaa:ID-nimi ei voi aloittaa numeroa.
CSS-luokkavalitsin
Luokkavalitsin valitsee HTML-elementit, joilla on tietty luokanimi.
Jos haluat valita tietyn luokan elementin, kirjoita piste (.) ja sitten luokan nimi.
Esimerkki
Tässä esimerkissä kaikki class="center":llä varustetut HTML-elementit ovat punaisia ja keskustasotettuja:
.center {
text-align: center;
color: red;
}
Voit myös määrittää, että vain tiettyjä HTML-elementtejä vaikuttaa luokkaan.
Esimerkki
Tässä esimerkissä vain class="center":llä varustetut <p>-elementit keskustasotetaan:
p.center {
text-align: center;
color: red;
}
HTML-elementit voivat myös viitata useisiin luokkiin.
Esimerkki
Tässä esimerkissä <p>-elementti asetetaan tyyleiksi class="center" ja class="large":
<p class="center large">Tämä kappale viittaa kahteen luokkaan.</p>
Huomaa:Luokanimi ei voi aloittaa numeroa!
CSS-yleinen valitsin
Yleinen valitsin (*) valitsee sivulla olevat kaikki HTML-elementit.
Esimerkki
Seuraavat CSS-säännöt vaikuttavat sivulla oleviin kaikkiin HTML-elementteihin:
* {
text-align: center;
color: blue;
}
CSS-ryhmävalitsimet
Ryhmävalitsimet valitsevat kaikki HTML-elementit, joilla on samat tyylit.
Tarkastele seuraavaa CSS-koodia (h1, h2 ja p-elementillä on samat tyylit)
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
On parasta jaata valitsimet, jotta voit vähentää koodia mahdollisimman paljon.
Jos haluat jaata valitsimet, erottele ne pilkulla.
Esimerkki
Tässä esimerkissä me jaamme yllä olevat valitsimet:
h1, h2, p {
text-align: center;
color: red;
}
Kaikki yksinkertaiset CSS-valitsimet
| Valitsin | Esimerkki | Esimerkki kuvaus |
|---|---|---|
| .class | .intro | Valitse kaikki elementit, joilla on class="intro". |
| #id | #firstname | Valitse id="firstname"-elementti. |
| * | * | Valitse kaikki elementit. |
| elementti | p | Valitse kaikki <p>-elementit. |
| elementti,elementti,.. | div, p | Valitse kaikki <div>-elementit ja kaikki <p>-elementit. |
Lisäluettelo
课外书：CSS-ID-valitsin
- Edellinen sivu CSS syntaksi
- Seuraava sivu CSS käyttö
