CSS-luokat ovat tärkeä osa CSS-tyyliohjeiden käyttöä verkkosivuilla. Niitä käytetään luomaan tiettyjä tyylikokonaisuuksia, jotka voidaan sitten soveltaa eri elementteihin sivulla.
Luokan määrittely aloitetaan pisteellä (.), jota seuraa luokan nimi. Luokan nimi voi olla mikä tahansa merkkijono, joka alkaa kirjaimella tai alaviivalla.
Esimerkiksi, jos haluamme määrittää luokan nimeltä "otsikko", seuraava koodinpätkä osoittaa, kuinka se voidaan toteuttaa CSS:ssä:
.otsikko {
font-size: 24px;
color: #333;
text-align: center;
}Tämä CSS-koodi asettaa otsikon tekstin koon 24 pikseliksi, tekstin värin tummanharmaaksi ja tekstin keskelle sivua.
Sitten voimme soveltaa tätä luokkaa HTML-sivun elementtiin käyttämällä "class" -ominaisuutta. Tämä tehdään määrittämällä elementin "class" -ominaisuus ja antamalla sille arvoksi luokan nimi, kuten alla olevassa esimerkissä:
<h1 class="otsikko">Tervetuloa sivulleni!</h1>Tämä HTML-koodi asettaa otsikon elementin tekstityyliksi luokan "otsikko" mukaisesti, ja se näyttää nyt suunnitellun mukaiselta.
CSS-luokkien käyttö on erittäin hyödyllistä, koska niitä voidaan soveltaa useisiin eri elementteihin sivulla. Jos haluat, voit luoda useita luokkia, joilla on erilaiset tyylit, ja soveltaa niitä sitten eri elementteihin sivulla tarpeen mukaan.
Esimerkki
Tässä on esimerkki HTML-sivusta, joka käyttää CSS-luokkaa otsikon tyylin määrittämiseen:
<!DOCTYPE html>
<html>
<head>
<title>CSS-luokan käyttö otsikolle</title>
<style>
.otsikko {
font-size: 24px;
color: #333;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h1 class="otsikko">Tervetuloa sivulleni!</h1>
<p>Tämä on esimerkki HTML-sivusta, joka käyttää CSS-luokkaa otsikon tyylin määrittämiseen.</p>
</body>
</html>
Tässä esimerkissä olemme määrittäneet CSS-luokan nimeltä "otsikko", joka määrittää otsikon fontin koon, värin ja tekstin keskelle sivua. Sitten sovellamme tätä luokkaa otsikko-elementtiin HTML-sivulla käyttämällä "class" -ominaisuutta.
Sivun yläosaan on myös lisätty marginaali luokkaan "otsikko", jotta otsikko ei ole liian lähellä sivun yläreunaa.
Kun avaat tämän HTML-sivun selaimessa, näet otsikon, joka on muotoiltu CSS-luokan "otsikko" mukaisesti.
Harjoittele
Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.
Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.