Alku CSS: stä
CSS käyttää mallin sovitussääntöjä sen määrittämiseksi, mikä tyyli koskee asiakirjan elementtiä. Näitä malleja kutsutaan valitsimiksi, ja ne vaihtelevat tagien nimien (esim. P vastaamaan kohdetunnisteita) hyvin monimutkaisiin kuvioihin, jotka sopivat hyvin tiettyihin dokumentin osiin (esimerkiksi p # myid> b.highlight sopisi kaikkiin b-tunnisteisiin luokan kohokohta, joka on kappaleen lapsi id idellä).
CSS-valitsin on CSS-tyyppisen puhelun osa, joka määrittää, mitä osaa web-sivusta pitäisi muotoilla. Valitsimessa on yksi tai useampia ominaisuuksia, jotka määrittävät valitun HTML- tyylin tyylin.
CSS-valitsimet
Valitsimia on useita:
- tyypin valitsimet, jotka vastaavat tiettyä elementtiä
- luokan valitsimet-yhteensopivat elementit, joilla on tietty luokka
- ID-valitsimet - jotka vastaavat elementtiä, jolla on tietty tunnus
- jälkeläiset valitsimet - elementtejä, jotka ovat tietyn elementin jälkeläisiä
- lapsenvalitsimet-sovituselementit, jotka ovat tietyn elementin lapsia
- universaalit valitsimet, jotka sopivat kaikkiin elementteihin
- vierekkäiset sisarusvalitsimet-yhteensopivat elementit välittömästi edeltää tietty elementti
- attribuutin valitsimet-sovituselementit, joilla on tietty attribuutti tai attribuuttiarvo
- pseudo-luokan valitsimet-sovituselementit, joilla on tietty pseudo-luokka
- pseudo-elementtivalitsimet-sovituselementit, joilla on tiettyjä pseudo-elementtiominaisuuksia
Muotoile CSS-tyylit ja CSS-valitsimet
CSS-tyylin muoto näyttää tältä:
valitsin {tyyliominaisuus: tyyli; }
Erota useita valitsimia, joilla on sama tyyli pilkuilla. Tätä kutsutaan valitsijaryhmäksi. Esimerkiksi:
selector1 , selector2 {style property: tyyli; }
Ryhmittelyvalitsimet ovat lyhytsanomamekanismi, jonka avulla CSS-tyylit pysyvät pieninä.
Edellä mainitulla ryhmällä olisi sama vaikutus kuin:
selector1 {tyyliominaisuus: tyyli; }
selector2 {tyyliominaisuus: tyyli; }
Testaa aina CSS-valitsimesi
Kaikki selaimet eivät tue kaikkia CSS-valitsimia. Varmista siis, että testaat valitsintasi mahdollisimman monissa selaimissa niin monta käyttöjärjestelmää kuin mahdollista. Mutta jos käytät CSS 1- tai CSS2-valitsimia, sinun pitäisi olla kunnossa.