Luokkaselektori
Luokkaselektori
Luokkaselektori on ilmainen HTML for Kids-oppitunti CoddyKitissä. Tämä on oppitunti 1/1. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu HTML for Kids-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML for Kids-kurssilla on yhteensä 1 oppituntia.
Miksi luokkavalitsimia käytetään
Hei,
Olemme päässeet luokkavalitsimiin, jotka ovat yksi CSS:n tärkeimmistä aiheista.
Luokkavalitsimet ovat meille tuttuja, koska olemme käyttäneet niitä tähän asti usein.
Tässä oppitunnissa vahvistamme tietämystämme ja opimme samalla niiden edut muihin valitsimiin verrattuna.
Luokkavalitsimen syntaksi
Aloitetaan siis.
Käytämme pistevalitsinta (.) luokkavalitsimen määrittämiseen. Alla on my-class-niminen luokkavalitsin, jolle on annettu font-size-tyyliksi 10px.
.my-class {
font-size: 10px;
}
Voimme määrittää luokkavalitsimelle myös useamman kuin yhden tyylin.
.my-class {
font-size: 10px;
}
Useita valitsimia
Samalle elementille voidaan määrittää useampi kuin yksi luokka.
Alla olevassa esimerkissä määritetään kaksi luokkavalitsinta, joiden nimet ovat el1 ja el2.
Elementin class-attribuuttiin voidaan lisätä kaksi tai useampia luokkia välilyönnillä eroteltuina, kun elementti luodaan p-tagilla.
Esikatseluosiosta näet, että molempien luokkien tyylit vaikuttavat elementtiin samanaikaisesti.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>Miksi siis luokkavalitsin kannattaa valita tagi- ja ID-valitsimen sijaan?
Miksi siis luokkavalitsin kannattaa valita tagi- ja ID-valitsimen sijaan?
Tagivalitsimen käyttö voi johtaa ei-toivottuihin tuloksiin, koska se vaikuttaa kaikkiin kyseisellä tagilla luotuihin elementteihin. Siksi käytämme näitä valitsimia yleensä silloin, kun kaikilla elementeillä tulee olla jokin yhteinen ominaisuus.
Jos esimerkiksi haluamme jokaisen elementin font-family-arvoksi 'Lato', teemme määrityksen seuraavasti.
a{
font-family: Lato,sans-serif
}Miksi siis luokkavalitsin kannattaa valita tagi- ja ID-valitsimen sijaan? 2
Voisimme tehdä elementtikohtaisen määrityksen ID-valitsimella.
Koska kaikki tyylimäärityksemme koskivat kuitenkin vain yhtä elementtiä, meidän olisi kirjoitettava koodi uudelleen toiselle elementille, jonka halusimme näyttää samoilla ominaisuuksilla.
HTML-dokumentissa voi olla vain yksi elementti samalla ID:llä.
CSS:n spesifisyys
Opitaan nyt CSS:n spesifisyyden käsite.
Luodaan jälleen ongelma, jotta ymmärtäisimme aiheen paremmin, ja opitaan tämä käsite ratkaisemalla ongelma.
CSS:n spesifisyys 2
Alla olevassa esimerkissä
p-tagille on tehty tyylimääritys.
Tyylimääritys tehdään luokkavalitsimella, jonka nimi on .first.
Molemmat valitsimet valitsevat HTML-dokumentistamme saman elementin.
Molemmat valitsimet määrittävät saman color-ominaisuuden korvaavan tyylin. Tässä tapauksessa syntyy ristiriita.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
CSS:n spesifisyys 3
Esimerkkiä tarkastellessamme voimme aiemman tietomme perusteella ajatella, että väristä tulee punainen.
Tämä johtuu siitä, että CSS:n kaskadi kertoo koodijärjestyksessä viimeisenä olevan määrityksen voittavan.
Tässä on kuitenkin pieni tarkennus. Jos spesifisyys on sama, viimeisenä tuleva koodi voittaa.
Kyseessä on arviointi, joka osoittaa valitsimen spesifisyyden merkityksen kyseisessä elementissä tai kyseisissä elementeissä.
Selain arvioi korkean spesifisyyden omaavan määrityksen riippumatta sen sijainnista koodissa.
Varoitus
Luokkavalitsin on spesifimpi määritys kuin elementtivalitsin. Siksi sen spesifisyysarvo on suurempi.
Valitsimen spesifisyys
Sen selvittäminen, mikä valitsin on spesifimpi, on itse asiassa hyvin yksinkertaista.
Koska elementille annetaan vain yksi ID ja verkkosivulla on sitä vain yksi, odotamme sen olevan ensisijainen valitsin.
Luokkavalitsimet voidaan puolestaan arvioida tagivalitsimia spesifimmin, koska ne valitsevat tagia rajatumman ryhmän.
Alla olevassa esimerkissä näemme ID-valitsimen voittavan, kun sama elementti valitaan kolmella eri valitsimella.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>Spesifisyyslaskuri
Voitte käyttää verkossa olevaa spesifisyyslaskuria tästä linkistä.
Milloin spesifisyydellä on merkitystä
Onko näitä laskutoimituksia siis käytettävä jatkuvasti?
Ei tietenkään. Ristiriitoja ei synny, kun kirjoitamme koodimme standardien mukaisesti.
Matemaattisia laskutoimituksia ei siis tarvitse tehdä jatkuvasti, mutta ongelmatilanteessa näistä tiedoista voi olla apua ongelman ratkaisemisessa.
Onnittelut
Onnittelut. 🥳🥳🥳
Olet suorittanut oppitunnin Luokkavalitsin ja CSS:n täsmällisyys.
Seuraavassa osiossa opimme valitsintyypit.
Voit jatkaa napsauttamalla seuraavaa osiota.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 16
- Oppitunnit
- 35
Usein kysytyt kysymykset
Onko oppitunti ”Luokkaselektori” ilmainen?
Kyllä – oppitunnin ”Luokkaselektori” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko HTML for Kids-kurssin, päivitä CoddyKit PROhon. HTML for Kids-kurssilla on yhteensä 1 oppituntia.
Mitä opin oppitunnilla ”Luokkaselektori”?
Luokkaselektori Harjoittelet HTML for Kids-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML for Kids-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML for Kids-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/1.
Kuinka kauan ”Luokkaselektori”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML for Kids-oppitunnilla?
Kyllä. Jokainen HTML for Kids-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.