CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS-kielen perusteet: syntaksi ja arvot

Valitsin esittelylohko

HTML / XHTML -dokumentissa käytettävä CSS-tyylimäärittely sisältää yleensä kymmeniä edellisellä sivulla esiteltyä syntaksia noudattavia sääntöjoukkoja, joiden vaikutus on kohdistettu valitsin esittelylohkon avulla haluttuihin elementteihin. Jokainen valitsin esittelylohko noudattaa syntaksia:

valitsin { 
  ominaisuus: arvo; 
}

jossa:

Valitsin (selector): Valitsin määrittää mihin dokumentin elementtiin / elementtijoukkoon esittelylohkon sisällä olevat tyylimäärittelyt kohdistetaan. Kaikkein yleisin valitsin on nk. elementtivalitsin, joka kohdistuu tyylimäärittelyt nimettyyn elementtiin (ja sen lapsiin). Käytettävissä noin 30 erilaista valitsinyhdistelmää. Tutustu: CSS:n valitsimet -artikkeliin
Määrittelylohko / sääntö: Ominaisuus + arvo (kts. alla olevat kuvaukset)
Ominaisuus (property): CSS-kielen määrittelemä ominaisuus, jota halutaan säädellä. Kaikkiaan noin 120 erilaista. Tutustu:CSS:n näytöllä käytettävät ominaisuudet, CSS:n Aural ominaisuudet -listauksiin. Osa nk. määrittelylohkoa
Arvo (value): CSS-kielen määritttelemä ominaisuuden arvo. Jokaiselle ominaisuudelle on CSS-standardissa määritelty joukko mahdollisia arvoja ja mittayksiköitä. Osa nk. määrittelylohkoa.

Yksittäisen valitsinlohkon sisällä voi olla nolla tai useampia määrittelylohkoja. Määrittelylohkot erotetaan toisistaan puolipisteella.

Mikäli määrittelylohkon perässä ei ole puolipistettä, voi se aiheuttaa virhetilanteen jonka takia yksi tai useampi määrittelylohko ja tyylisääntö jää tulkitsematta. standardin mukaan puolipistetta käyttää aina erottamaan ja/tai lopettamaan määrittelylohko. Reaalimaailmassa kaikki web-selaimet eivät edellytä tätä kaikissa tilanteissa.

Esimerkki. Yksinkertainen tyylimäärittely. 1.tason otsikkoelementin h1 tekstinväriksi määritellään musta. "h1" on valitsin ja "color:black;" määrittelyosa. "color" on CSS:n sisäinen ominaisuus ja "black" on color-ominaisuuteen liitettävissä oleva arvotunniste.

h1 { 
 color: black;
}

Esimerkki. Useamman ominaisuuden määrittely. Määrittelylohkot on erotettu toisistaan puolipisteellä.

h1 { 
  color: black; 
  text-align: justify; 
  border: 1px solid red;
  margin-bottom: 2em;   
}

Jos useammalle valitsimelle halutaan antaa sama arvo/ulkoasu, voidaan määrittelyosa joko kirjoittaa kaikille valitsimille erikseen tai yhdistää valitsimet pilkulla erottaen .

Esimerkki. Usean valitsimen määrittely, jossa elementeillä h1,h2 ja h3 on yhteisiä arvoja (font-size) ja toisistaan poikkeavia arvoja (color).

 h1 { color: black; } 
 h2 { color: blue; }
 h3 { color: red; } 
 h1, h2, h3 { font-size:x-small; }

Säännön merkitseminen tärkeäksi

Jos määrittelylohko halutaan merkitä tärkeäksi (ts. se saa suuremman painoarvon kuin normaalisti Cascade-prosessissa), ominaisuuden arvon jälkeen tulee sijoittaa avainsana "!important".

Esimerkiksi. Säännön merkitseminen tärkeäksi. Alla text-decoration ja line-height ovat nk. tärkeitä sääntöjä, sen sijaan color ja font-family ominaisuudet ovat normaaliprioriteetin mukaisia sääntöjä.

strong { 
  color: red; 
  text-decoration: underline !important;
  line-height:1.2em !important;
  font-family:Verdana,Arial,Helvetica,sans-serif;
}

Tutustu artikkelin muihin osiin:
»»» CSS »»»CSS-kielen perussyntaksi
»»» CSS »»»Valitsin esittelylohko
»»» CSS »»»Ominaisuudet ja arvot
»»» CSS »»»Kommentit
»»» CSS »»»@säännöt

CSS-opas

CSS-kielen perusteet: syntaksi ja arvot

Valitsin esittelylohko

Säännön merkitseminen tärkeäksi

Tallenna tämä sivu kirjanmerkkeihin!