Mitä eroa on :llä ja :lla?
Ja miten käytetään class-systeemiä, kun minä tiedän vain tuosta id-jutusta? Ja hommaillaan sivut mahdollisimman paljon css:ää käyttäen tuon class-jutun avulla. Kun olen joidenkin sivujen lähdekoodia katsellut, niin niissä on hyvin paljon -juttuja. Miten laittaa sitten tyylitiedostoon?
div class=""
asdasddas
2
784
Vastaukset
- sebe-zeus
id = yksilöivä tunniste, nimi johon voidaan viitata
class = luokka, tyylitiedostoon määritelty ominaisuusryhmä vaikkapa tyyliin
.keltainen
{
font-family:verdana,arial,helvetica;
font-size: 10pt;
font-weight: bold;
color: #FFFF00;
} Siinä missä useampi elementti voi kuulua samaan luokkaan yhtä aikaa, voi myös yksittäinen elementti kuulua useaan luokkaan samanaikaisesti. Esimerkki:
CSS:
p.lorem { color: yellow; }
p.ipsum { background-color: black; }
HTML:
Tähän tulee keltaista tekstiä mustalla taustavärillä.
Lisäksi ID-valitsimella on suurempi spesifisyys (= "painoarvo") kuin luokkavalitsimella, joten ristiriitatilanteissa ID-valitsimen avulla ilmoitetut määritykset voittavat. Esimerkki 1:
CSS:
#lorem { color: red; }
.ipsum { color: blue; background-color: black; }
HTML:
Tähän tulee punaista tekstiä mustalla taustavärillä.
----------
Esimerkki 2:
CSS:
#lorem p { color: yellow; background-color: black; }
div .ipsum { color: red; font-style: italic; }
HTML:
Tähän tulee keltaista kursivoitua tekstiä mustalla taustavärillä.
On siis tärkeää huomata, että molemmat tyylisäännöt otetaan huomioon p-elementin muotoilussa. Kuitenkin ristiin menevien määritysten kohdalla (tässä tapauksessa color-ominaisuus) suuremman spesifisyyden saava valitsin voittaa.
Valitsimen spesifisyys:
http://www.w3.org/TR/CSS21/cascade.html#specificity
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
- 1817567
Klaukkalan onnettomuus 4.4
Klaukkalassa oli tänään se kolmen nuoren naisen onnettomuus, onko kellään mitään tietoa mitä kävi tai ketä onnettomuudes883499- 592424
Kolari Klaukkala
Kaksi teinityttö kuoli. Vastaantulijoille ei käynyt mitenkään. Mikä auto ja malli telineillä oli entä se toinen auto? Se701548Ukraina ja Zelenskyn ylläpitämä sota tuhoaa Euroopan, ei Venäjä
Mutta tätä ei YLE eikä Helsingin Sanomat kerto.3731486Ooo! Kaija Koo saa kesämökille öky-rempan:jättimäinen terde, poreallas... Katso ennen-jälkeen kuvat!
Wow, nyt on Kaija Koon mökkipihalla kyllä iso muutos! Miltä näyttää, haluaisitko omalle mökillesi vaikkapa samanlaisen l201386- 571373
Toivoisin, että lähentyisit kanssani
Tänään koin, että välillämme oli enemmän. Kummatkin katsoivat pidempään kuin tavallisesti toista silmiin. En tiedä mistä171091Olisinpa jo siellä, otatkohan minut vastaan
Olisitpa lähelläni ja antaisit minun maalata sinulle kuvaa siitä kaikesta ikävästä, tuskasta, epävarmuudesta ja mieleni791040Kevyt on olo
Tiedättekö, että olo kevenee kummasti, kun päästää turhista asioista tai ihmisistä irti! Tämä on hyvä näin <3841038