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

877

    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. Kuinka Riikka Purra on parantanut Suomen kansalaisen elämää?

      Haastan kaikki perussuomalaisten kannattajat kertomaan konkreettisia esimerkkejä kuinka Riikka Purran harjoittama politi
      Maailman menoa
      250
      4828
    2. Venäjän armeijan evp-upseeri: Armeija surkeassa tilassa, jonka läpäisee kaiken kattava

      valehtelu. Venäläiset alkaneet pohtia julkisesti maan todellisia tappioita. Z-bloggari ja 3. luokan kapteeni (evp.) Mak
      Maailman menoa
      93
      2387
    3. Kehu kaivattuasi

      Mikä hänessä on parasta? Jos osaat kertoa muuta kuin ulkonäköön liittyvää, niin ansaitset mitalin.
      Ikävä
      117
      1530
    4. Mahtavaa, Trump pelasti lentäjän, Irania nöyryytettiin

      https://www.is.fi/ulkomaat/art-2000011917601.html Taas osoitus kuinka ylivertainen maa USA on Trumpin johdolla.
      Maailman menoa
      321
      940
    5. Minkälaisen viestin

      Laittaisit ikävöinnin kohteelle, jos rohkenisit?
      Ikävä
      72
      904
    6. Keskiviikkona 8.4.2026 se tapahtuu

      Nimittäin tulevana keskiviikkona 8.4.2026 Donald Trump ilmoittaa Naton pääsihteerille että Yhdysvallat eroaa Natosta. N
      NATO
      270
      849
    7. Miten voit olla niin tyhmä

      että et tajunnut että sua vedätettiin? Tietäisitpä miten hyvät naurut on saatu. Naiselle
      Tunteet
      115
      802
    8. Rakastin sua niin paljon ettei löydy sanoja sille tunteenpalolle mitä silloin koin

      Sellaista tunnetta ei koe kuin ehkä kerran elämässä. Tuntui, että sekoaa, että menee järjiltään. Tuntui että räjähtää si
      Ikävä
      33
      767
    9. Hitto mulla

      On sinua ikävä ihana.
      Ikävä
      38
      736
    10. Millaisena uskot

      Kaivattusi kokevan tunteensa?
      Ikävä
      67
      702
    Aihe