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

886

    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. Silmienvääntelijä-persut pääsivät Japanissa sarjakuvaan

      Torille! https://www.hs.fi/kulttuuri/art-2000011943173.html
      Maailman menoa
      143
      4811
    2. Avopuoliso, mies-/naisystävä vai mikä?

      Kävin eilen irl keskustelun, joka jätti minut pohtimaan seuraavaa ... millä nimityksellä kutsua henkilöä, jonka kanssa o
      Ikävä
      252
      4438
    3. Miksi Kuhmolaiset on niin nyrpeä ilmeisiä?

      Miksi suurin osa (ei onneksi kaikki) on niin typääntyneen näkösiä elämäänsä? Tuijotetaan toisia pahansuopaisesti ja kat
      Kuhmo
      31
      4271
    4. Nato kaatamassa Petterin haaveileman Tunnin junan?

      Nato edellyttää pohjoisessa Jäämereltä Rovaniemelle saakka kapearaitesta suoraa rautatieväylää, joka maksaa paperirahaa,
      Maailman menoa
      9
      4225
    5. Huvittava ilmiö: Vasemmistolaiset uskoo sokeasti SDP:n parantavan heidän

      elämäänsä, jos demarit johtaa seuraavaa hallitusta (Kyse on siis palstan vasemmistolaisista) Totuus on toinen, nimittäi
      Maailman menoa
      191
      3491
    6. Riikka ohoi! Saksa alensi bensaveroa, missä euron bensa?

      Perussuomalaisten yksi vaalilupauksista oli euron bensiini suomalaisille autoilijoille. Ei ole näkynyt. Jopa vasemmis
      Maailman menoa
      84
      3178
    7. Tulipalo rivitalossa, tuhoutuu täysin

      Kainuun pelastuslaitos sai hieman puolenyön jälkeen maanantaina ilmoituksen rivitalon huoneistossa syttyneestä tulipalos
      Puolanka
      81
      3119
    8. Älkää vaan sairastuko syöpään Suomessa

      Tilaston mukaan Suomi, Slovakia ja Latvia lääkitsee aivan pohjamudissa syöpää. Sairastunutta hoidetaan edelleen vanhana
      Maailman menoa
      237
      2798
    9. Kyllä, maata ei halua puolustaa nimenomaan punavihreän puolen edustajat

      "Esimerkiksi maanpuolustushenki on keskimääräistä alempana naisten, arvoliberaalien, heikossa taloustilanteessa olevien
      Maailman menoa
      143
      2762
    10. Donald Trump pääsi samalle listalle Sanna Marinin kanssa

      Eli vasemmistolaisen Time-median top 100 jännäihmisten listalle. https://time.com/collections/time100-next-2021/5937699
      Maailman menoa
      9
      2757
    Aihe