Valitsimet: tyyliteltävien kohteiden valitseminen
Kohdistatte tyylit elementteihin niiden attribuuttien perusteella ja käytätte yleisvalitsinta tehokkaasti.
Valitsimet: tyyliteltävien kohteiden valitseminen on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/3. 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 CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 3 oppituntia.
Valitkaa kohteenne
Ennen muotoilua osoitatte, mitä haluatte muotoilla. Se on valitsimen tehtävä. Tällä oppitunnilla asia loksahtaa paikalleen, lupaan sen. ✨
Kuin osoittaisi sormella
Valitsin on kuin osoittaisitte sormella: "tuo asia, juuri tuossa." Niin yksinkertaista se on. Mitään ei tarvitse opetella ulkoa.
Tyylitelkää tagin perusteella
Helpoin valitsin käyttää tagin nimeä. Kirjoittakaa "p", niin valitsette kaikki sivun kappaleet kerralla.
<p>All paragraphs turn red.</p>
Tyylitelkää luokan perusteella
Haluatteko muotoilla vain joitakin elementtejä? Antakaa niille luokka ja valitkaa se pisteellä, kuten .note. Erittäin joustavaa!
<p class="note">This note is orange.</p>
Luokat ovat uudelleenkäytettäviä
Parasta on, että yhtä luokkaa voi käyttää uudelleen monissa elementeissä. Muotoilkaa kerran ja käyttäkää kaikkialla. Suuri ajansäästö. ⏱️
Tyylitelkää id:n perusteella
Tarvitsetteko yhden erityisen elementin? Antakaa sille id ja valitkaa se risuaidalla, kuten #header. Id on tarkoitettu yksilölliseksi.
<h1 id="header">Page Header</h1>
Piste vai risuaita
Nopea muistisääntö: piste on tarkoitettu monelle (luokalle) ja risuaita yhdelle (id:lle). Tagien nimissä ei käytetä mitään symbolia.
Kuin nimilaput
Ajatelkaa luokkia ryhmän nimilappuina ja id-tunnisteita yhden VIP-vieraan merkkinä. Valitsimet vain lukevat nämä laput. 🏷️
Yhdistelkää niitä
Oikeilla sivuilla tageja, luokkia ja id-tunnisteita yhdistellään, jotta juuri halutut asiat voidaan muotoilla. Nyt tunnette kaikki kolme! 🙌
Se onnistui!
Osaatte kertoa, mitä CSS on, lukea säännön ja valita kohteita valitsimilla. Siinä on todellinen CSS-perusta. Olen ylpeä teistä! 🎉
Pikatesti
Viimeinen tarkistus! Mitä symbolia käytetään CSS:ssä luokan valitsemiseen?
Opi CSS 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
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Valitsimet: tyyliteltävien kohteiden valitseminen” ilmainen?
Kyllä – oppitunnin ”Valitsimet: tyyliteltävien kohteiden valitseminen” 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 CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 3 oppituntia.
Mitä opin oppitunnilla ”Valitsimet: tyyliteltävien kohteiden valitseminen”?
Kohdistatte tyylit elementteihin niiden attribuuttien perusteella ja käytätte yleisvalitsinta tehokkaasti. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/3.
Kuinka kauan ”Valitsimet: tyyliteltävien kohteiden valitseminen”-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ä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-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.
Kaikki tämän kurssin oppitunnit
- Mikä CSS on?
- Miten CSS herättää sivut eloon
- Valitsimet: tyyliteltävien kohteiden valitseminen