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

850

    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. Orpo: Seuraavalla hallituksella ei ole yhtään enempää rahaa

      Valtiovarainministeriön virka-arvion mukaan julkisen talouden sopeutuksen tarve on noin kymmenen miljardia euroa ensi va
      Maailman menoa
      359
      4826
    2. Suomen kieli hiipuu vähitellen Vantaalla

      nykytahdilla jo joka kolmas vantaalainen on vieraskielinen 2030-luvun alussa. Maahanmuutto, suomalaisten alhainen synty
      Maailman menoa
      133
      4223
    3. Riikan kukkaronnyöri on umpisolmussa

      Kulutus ei lähde liikkeelle, koska kansalaiset eivät usko, että: – työpaikka säilyy – tulot eivät romahda – talous ei h
      Maailman menoa
      1
      2626
    4. Kun puolustusvoimat on huolissaan nuorison huonosta kunnosta

      ajatellen varusmiespalvelusta(kun moni joutuu keskeyttään), niin johan tuli joku yliopiston vasemmistonainen selittään,
      Maailman menoa
      214
      2566
    5. Jos vedetään mutkat suoraksi?

      Niin kumpaan ryhmään kuulut? A) Niihin, jotka menevät edellä ja tekevät? Vai B) Niihin, jotka kulkevat perässä ja ar
      Sinkut
      104
      2354
    6. Tanskan malli perustuu korkeaan ansioturvaan

      Ja vahvoihin työllisyys- ja kotoutumispalveluihin. Suomessa Riikka on leikannut juuri näitä: palkkatukea, työttömyysturv
      Maailman menoa
      4
      2179
    7. Vain vasemmistolaiset ovat aitoja suomalaisia

      Esimerkiksi persut ovat ulkomaalaisen pääomasijoittajan edunvalvojia, eivät auta köyhiä suomalaisia.
      Maailman menoa
      44
      1794
    8. Tiesitkö? Kohutun L/over sarjan Juha eli Jani Volanen on tämän julkkisnaisen ex-mies!

      Jani Volanen näyttelee L/over - ikuisesti minun psykologisessa trillerissä Juhaa. Mutta tiesitkö, että hän on tämän julk
      Tv-sarjat
      7
      1539
    9. Ajattelen sinua

      Ajattelen sinua joka päivä, joka hetki… Kaikkea, mitä minun olisi pitänyt sanoa sinulle, enkä osannut sanoa, kaikkea nii
      Ikävä
      54
      1381
    10. Miten must tuntuu

      et sä ajattelet mua just nyt
      Ikävä
      31
      1376
    Aihe