Luokka vs. ID
Cascading Style Sheets (CSS) on kieli, joka kuvaa sivunkuvauskielellä kirjoitetun asiakirjan ulkoasua ja muotoilua. CSS:ää käytetään laaj alti HTML-kielellä kirjoitettujen verkkosivujen tyyliin. CSS mahdollistaa omien tyylivalitsimien määrittämisen HTML-elementtien tyylien soveltamisen lisäksi. Tämä tehdään tunnuksen ja luokan valitsimien avulla. Kun määrität tyyliä yhdelle yksilölliselle elementille, käytetään ID-valitsinta. Kun määrität tyyliä elementtiryhmälle, käytetään luokan valitsinta.
Mikä on luokka?
CSS:ssä luokan valitsimen avulla voit soveltaa omaa tyyliäsi elementtiryhmään. Luokkavalitsimella käytetään tiettyä tyyliä saman luokan elementtijoukkoon. CSS:ssä luokan valitsin tunnistetaan pisteestä (.). Seuraavassa on esimerkki CSS:ssä määritetystä luokanvalitsimesta.
.oma_luokka {
väri: sininen;
fontin paino: lihavoitu;
}
HTML voi viitata CSS:ssä määritettyyn luokkaan käyttämällä attribuuttiluokkaa alla olevan kuvan mukaisesti.
Tämä on muotoiluni
Tämä on taas muotoiluni
Kuten yllä näkyy, samaa luokkaa voidaan käyttää useille elementeille ja yksi elementti voi käyttää useita luokkia. Kun samassa elementissä käytetään useita luokkia, luokat lisätään välilyönnillä erotettuun luokkaattribuuttiin alla olevan kuvan mukaisesti.
Tämä on muotoiluni käyttämällä kahta luokkaa
Mikä on henkilöllisyystodistus?
CSS:ssä ID-valitsimella voidaan soveltaa omaa tyyliäsi yksittäiseen elementtiin. CSS:ssä tunnuksen valitsin tunnistetaan hashilla (). Seuraavassa on esimerkki CSS:ssä määritetystä ID-valitsimesta.
oma_tunnukseni {
väri: punainen;
text-align:right;
}
HTML voi viitata CSS:ssä määritettyyn tunnuksen valitsimeen käyttämällä attribuuttitunnusta alla olevan kuvan mukaisesti.
Tämä on muotoiluni tunnusvalitsimesta
ID:t ovat yksilöllisiä. Siksi jokaisella elementillä voi olla vain yksi tunnus ja jokaisella sivulla voi olla vain yksi elementti, jolla on tietty tunnus. Tunnuksilla on tärkeä ominaisuus, jota voidaan käyttää selaimen kanssa. Jos sivun URL-osoite sisältää hajautusarvon (esim. https://myweb.commy_id), selain yrittää paikantaa automaattisesti elementin, jonka tunnus on "my_id", ja vierittää verkkosivua näyttääkseen kyseisen elementin. Tämä on yksi syy, miksi sivulla pitäisi olla yksi elementti, jolla on tietty tunnus, jotta selain voi paikantaa kyseisen elementin.
Mitä eroa on luokan ja tunnuksen välillä?
Vaikka sekä luokan valitsinta että tunnuksen valitsinta voidaan käyttää oman tyylisi soveltamiseen verkkosivun elementteihin, niillä on joitain tärkeitä eroja. Luokkavalitsimella voit käyttää omaa tyyliäsi elementtiryhmään, kun taas ID-valitsimella tyyliä käytetään yksittäiseen, ainutlaatuiseen elementtiin. Tunnuksia käytettäessä jokaisella elementillä voi olla vain yksi tunnus ja jokaisella sivulla voi olla vain yksi elementti kyseisellä tunnuksella, mutta luokkaa voidaan käyttää useille elementeille ja yksi elementti voi käyttää useita luokkia. Lisäksi ID:n avulla voidaan vierittää sivua automaattisesti, jolloin elementti näytetään kyseisellä tunnuksella, mutta tämä ei ole mahdollista luokanvalitsimella.
