Miten tyylejä määritellään?
Miten tyylejä määritellään?
Miten tyylejä määritellään? 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.
Johdanto
Hei,
Selitimme tämän osittain edellisessä oppitunnissa. Kerrataan se nyt.
CSS:ssä tyylit voidaan määrittää kolmella tavalla:
- Inline-tyylinä
- <style>-tunnisteiden välissä
- Ulkoista CSS-tiedostoa käyttämällä
Inline-tyyli
1. Inline-tyyli
Kuten nimestä voi päätellä, tällä tarkoitetaan tyylejä, jotka määritämme välittämällä style-attribuutin inline-tyylinä kullekin elementille.
Tätä tapaa ei suositella, koska se heikentää kunkin tyylin uudelleenkäytettävyyttä ja sen luettavuus on erittäin heikko.
Alla olevassa esimerkissä letter-spacing-tyyli lisää tekstin kirjainten väliin 15 pikseliä tilaa.
<p style="letter-spacing:15px">
Inline Style
</p>style-tunnisteen avulla
2. <style>-tunnisteiden välissä
Tyyli voidaan määrittää style-tunnisteiden välissä. Tätäkään tapaa ei yleensä suositella muutamia poikkeuksia lukuun ottamatta (kuten sivun yläosan näkyvissä olevan sisältöalueen tapauksessa).
Käytämme style-tunnisteita esimerkkien pitämiseksi järjestyksessä. En kuitenkaan suosittele niiden käyttöä sovelluksissanne (mainitsemiani poikkeustapauksia lukuun ottamatta).
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>Ulkoinen CSS-tiedosto
3. Ulkoinen CSS-tiedosto
Opitaan nyt käyttämään ulkoisia CSS-tiedostoja.
Tätä tyylinmäärittelytapaa käytämme useimmiten. Ensin luodaan tiedosto, joka sisältää vain CSS-valitsimia.
Sen jälkeen asianmukainen CSS-tiedosto voidaan määrittää head-tunnisteiden välissä olevalle link-elementille.
Alla olevassa esimerkissä style.css-tiedosto liitetään link-elementtiin href-attribuutin avulla.
<link rel = "stylesheet" href = "styles.css">
Tämä on paras ratkaisu, kun sama CSS-tiedosto halutaan ottaa käyttöön useissa tiedostoissa ja lisätä uudelleenkäytettävyyttä.
Alla olevassa esimerkissä on luotu tyylinmäärittely, joka valitsee ulkoisen luokan.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
Alla olevassa esimerkissä on luotu tyylinmäärittely, joka valitsee ulkoisen luokan.
Tallennetaan tämä määritys tiedostoon nimeltä test 1.css ja liitetään se link-elementtiin.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Onnittelut
Onnittelut 🎉
Tässä osiossa opimme CSS:n tyylimäärittelyjen tyypit.
Seuraavassa osiossa opimme id-valitsimen.
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 ”Miten tyylejä määritellään?” ilmainen?
Kyllä – oppitunnin ”Miten tyylejä määritellään?” 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 ”Miten tyylejä määritellään?”?
Miten tyylejä määritellään? 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 ”Miten tyylejä määritellään?”-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.