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

959

    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. Mitä mietit juuri nyt?

      🤔
      Ikävä
      132
      1226
    2. Aurinkoni...

      On ikävä sua ❤️
      Ikävä
      55
      762
    3. Huonoja uutisia-nyt lähtee höyrylaivat

      https://www.ita-savo.fi/ Konkurssiin meni tämäkin yritys. Raja kiinni ja venäläiset turistit puuttuvat. Täällä menee pe
      Savonlinna
      36
      656
    4. Ei näytä hyvältä

      Kyllä nyt Ähtäriä viedään vesikelkalla. Neuvotteliat untuvikkoja kaikki. Mikko tietty tapansa mukaan loikki puheenjohtaj
      Ähtäri
      39
      566
    5. Minkä haluaisit

      Nähdä kaivatultasi
      Ikävä
      73
      536
    6. Älä itke rakas.

      Tunnen sun kyyneleet silmissäni. Kaikki tulee menemään hyvin. Loppu häämöttää jo...
      Ikävä
      49
      520
    7. Jos vielä toivot...mies...

      Saisinpa jonkun merkin sinulta, jos vielä odotat 📝➡️📱 Rohkeus on mennyt jos seurustelet vaikka nykyisin. En halua häi
      Ikävä
      48
      512
    8. On ikävä sua

      Muru.
      Ikävä
      32
      510
    9. Dina on valittu virkaan Rovaniemelle

      Kemijärven kaupunginjohtaja on pyrkinyt pois Kemijärveltä ja näyttää että näin tulee käymään.
      Kemijärvi
      27
      488
    10. Miksi ajattelit minun

      Rakastuneen sinuun?
      Ikävä
      42
      485
    Aihe