CSS Academy · Oppitunti

Miten CSS herättää sivut eloon

Käytätte elementtitageja, luokkien nimiä ja tunnisteita tiettyjen HTML-elementtien valitsemiseen ja tyylittelyyn.

Oppitunti 2/311 vaihetta

Miten CSS herättää sivut eloon on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/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.

Tuodaan sivu eloon

Nyt päästään hauskaan osaan: miten CSS todella muuttaa sivua. Se on yksinkertaisempaa kuin arvaattekaan, ja onnistutte varmasti. 💪

Perusajatus

CSS toimii antamalla ohjeita: valitkaa elementti ja kuvatkaa sitten, miltä sen pitäisi näyttää. Siinä on oikeastaan koko idea.

Tutustutaan sääntöön

CSS-säännössä on kaksi osaa: mitä muotoillaan (valitsin) ja miten sitä muotoillaan (määritykset). Helppo pari!

Katsotaan sääntöä

Tässä on kokonainen sääntö. "p" valitsee kappaleet, ja aaltosulkeiden sisällä asetamme värin. Lukekaa se kuin lause. 📖

<p>This paragraph is green.</p>

Ominaisuus ja arvo

Aaltosulkeiden sisällä kirjoitetaan ominaisuus (kuten color) ja arvo (kuten green). Ominaisuus kertoo mitä, arvo miten.

Kuin antaisi ohjeita

Se on kuin sanoisitte maalarille: "tuo seinä, maalaa se vihreäksi." Valitsin on seinä ja sääntö on ohjeenne. 🎨

Muuttakaa yksi asia

Haluatteko suuremman tekstin? Muuttakaa arvoa. Haluatteko uuden värin? Muuttakaa arvoa. CSS:n avulla voitte hienosäätää sivua heti.

Monia sääntöjä yhdessä

Oikealla sivulla on paljon pieniä sääntöjä päällekkäin. Jokainen niistä on pieni, mutta yhdessä ne luovat koko ulkoasun. Yhteistyötä! 🤝

Missä CSS sijaitsee

CSS on yleensä omassa tiedostossaan, joka linkitetään sivuun. Kun tyylit ovat yhdessä paikassa, koko sivusto päivittyy. Kätevää!

Katsokaa, miten pitkälle olette päässeet

Osaatte nyt lukea CSS-säännön ja tietää, mitä se tekee. Mahtavaa! Seuraavaksi opitte valitsemaan tarkasti, mitä muotoillaan. 🎯

Pikatesti

Varmistetaanpa asia. Minkä ratkaisee valitsin CSS-säännössä?

Aloita maksutta

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 ”Miten CSS herättää sivut eloon” ilmainen?

Kyllä – oppitunnin ”Miten CSS herättää sivut eloon” 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 ”Miten CSS herättää sivut eloon”?

Käytätte elementtitageja, luokkien nimiä ja tunnisteita tiettyjen HTML-elementtien valitsemiseen ja tyylittelyyn. 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 2/3.

Kuinka kauan ”Miten CSS herättää sivut eloon”-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

  1. Mikä CSS on?
  2. Miten CSS herättää sivut eloon
  3. Valitsimet: tyyliteltävien kohteiden valitseminen
← Takaisin: CSS Academy