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
873
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
Henkirikos kiuruvedellä
Poliisi tutkii maaliskuussa tapahtunutta 50 luvulla syntyneen kuolemaa henkirikoksena. Missä päin tälläinen sattunut1384167Ketkä haukkuu suomalaisten ÄO:tä?
Siinä on kaksi vaihtoehtoa, joko siis rutiköyhä vajaaälyinen vasuri tai venäläinen. Kyllähän täällä käy suomenvenäläisi1923907Diesel-ammattilainen kehuu Sanna Marinia
"Sanna Marinin (sd) hallitus loi neljä vuotta sitten väliaikaisen polttoainetukijärjestelmän, kun energianhinnat nousi292626Pitkänperjantain kunniaksi tekoälyn analyysi Riikka Purran kirjoituksesta
🧠 Mitä se kertoo "riikka"-nimimerkin lähijunassa tapahtuneesta? 1. Asenteellinen ja epäasiallinen sävy: Kirjoitus purs102412100 prosentin perintövero korjaisi myös Hitas-ongelman
Moni ei uskalla kieltäytyä perinnöstä maineen menettämisen uhalla, joten sitten tulee näitä tilanteita, joissa joutuu es322183Riikan antisakset leikkaavat bensan hintaa ylöspäin
Sannan aikoina bensaa sai 1,3 euron litrahinnalla ja Riikka leikkasi sen euron ylemmäksi reiluun 2 euroon. Joko on saks41766Läpäiseekö Martina Aitolehti Erikoisjoukot - kyllä vai ei?
Martina Aitolehti on pärjännyt mainiosti Erikoisjoukoissa. Yrittäjä on mielipiteiltään napakka ja hän sivaltaakin koulut971399Olen aika varma
että meidän tiemme risteäminen oli ainutkertainen tapahtuma elämässäni. En tule koskaan kohtaamaan ketään muuta, joka sa481382Sukupuolineutraalit liikennemerkit yksi persujen älynväläys
Samassa rytäkässä kaikki syrjäseutujen bussipysäkkien liikennemerkitkin vaihdettiin, vaikkei bussia ole liikennöinyt enä241291Ei ne päivät ole samanlaisia...
Toisena hymyillään ja katsellaan silmiin, toisena taas tuntuu ettei edes tunneta toisiamme, vältellään ja katseet ei vah361079