div class=""

asdasddas

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?

2

827

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • 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

    1. Vedonlyöntiä .

      Olen valmis lyömään ison vedon , että homma kaatuu . Jos kerta Sivonen ei lähde mukaan , niin ei tuoho usko kukaan muuka
      Ähtäri
      32
      3385
    2. Mikä on pahinta, mitä kaivatullesi

      pelkäät tapahtuvan? Jos kuolemaa, vakavia sairauksia yms. ei lasketa?
      Ikävä
      103
      2565
    3. Turvaan tulleet lähettävät omia lapsiaan vaaraan - hullua

      MOT-ohjelman jakso ”Loma vaihtui kahleisiin” kertoi, kuinka Suomessa ja muualla Euroopassa asuvat somaliperheet lähettäv
      Maailman menoa
      73
      2527
    4. Mikä on sun mielestä suurin kusetus maailmassa?

      Mikä on sun mielestä suurin kusetus maailmassa?
      Ikävä
      108
      2169
    5. rakastan jotakin

      en uskalla sanoa sitä täällä ääneen
      Ikävä
      11
      2138
    6. Minkä tunteen tunnet

      juuri nyt? ap kiitollisuuden.
      Tunteet
      41
      1408
    7. Päivi Räsänen sai kutsun kongressiin todistajaksi.

      Pystyykö Päivi pysymään totuudessa ja kertomaan kongressille, että raamattu ei ole lakikirja jota pitäisi noudattaa poli
      Maailman menoa
      384
      1061
    8. Minkä kouluarvosanan (4-10) annat Thank God, sä tulit! sarjalle?

      Katsoitko Thank God, sä tulit!? Uusi viihdeohjelma ei ollut kaikkien makuun, mutta jotkut tykkäsivät. Minkä kouluarvos
      Tv-sarjat
      40
      877
    9. TVssä TomCruisen superjännä Vaarallinen tehtävä Mission Impossible Rogue Nation

      Alkaa uskomattomalla lentokone kuvauksella. Toimintaelokuvan jatko-osa agentti (Tom Cruise) on hankaluuksissa, kun järje
      Maailman menoa
      28
      818
    10. Kaikkea hyvää kaikki

      Kaikkea hyvää kaikki ja positiivisia ja hyviä asioita. Kylmää on kovia pakkasia. Pikku hiljaa kevättä kohti taas. Voimaa
      Ikävä
      6
      810
    Aihe