Päivitetty: 10.03.2003.

Säännöt

Kaikki CSS:n eri ominaisuudet määritellään sääntöinä. Sääntö kuvailee, kuinka haluttu (x)HTML-elementin (eli valitsimen) muotoillaan. Tämä sivu kertoo kuinka sääntö muodostuu ja näyttää kuinka voit itse helposti tehdä omia sääntöjä.


Säännöt

Käsitteitä

Aluksi on syytä kerrata tärkeimmät termit ja käsitteet, niin tulevien asioiden ymmärtäminen onnistuu helpommin.

Elementti - Elements
HTML-kieli koostuu joukosta sisältö kuvaavista 'rakennuspalikoista', eli elementeistä. Esim: <P>Tämä on kappale</P> on kappale-elementti (Paragraph). Eli jos käytän ilmaisua P-elementti, tarkoittaa se aina koko kappaletta
Tagi - Tag
Elementti koostuu aloitus <> ja </> -lopetus merkistä, joita siis kutsutaan tageiksi. Jos elementillä ei ole lopetustagia, kuten mm. elementeillä <HR>, <BR> tai <IMG>, kutsutaan sitä tyhjäksi elementiksi (empty elements). XML ja XHTML kielessä tyhjät elementit merkitään muodossa <HR />, <BR /> ja <IMG />.
Attribuutti - Attributes
Jokainen (x)HTML-elementti voi sisältää attribuutteja, ne sijoitetaan aina elementin aloitustagiin. Attribuutti tuo elementille jonkin lisämääritteet, esim. tasautavan: <P aling="right">Tämä kappale tasataan oikealle</P>. CSS korvaa monet HTML-kielen attribuutit.
Elementti
aloitus-tagi sisältö lopetus-tagi
<BODY> asiakirja </BODY>
<P> tekstiä </P>
<IMG> kuva ei ole

<< Alkuun


CSS-sääntö

Kaikki CSS -määritteet annetaan aina sääntöinä (Rules). Jokainen css-sääntö määrittää yhden tai useamman (x)HTML-elementin käyttämän tyylin.

Eli sääntö kertoo, miltä haluttu elementti näyttää ja/tai kuinka se asemoidaan näytölle. Sääntö koostuu kahdesta osasta, jotka ovat valitsin ja kuvauslohko.

CSS-sääntö:
  Kuvauslohko
    Kuvaus Kuvaus  
Valitsin   Ominaisuus Arvo Ominaisuus Arvo  
BODY { color: white; background: black; }
P { font: Arial; font-size: 12pt }
Kuvauslohko - Declaration-block
Kuvauslohko puolestaan pitää sisällään kaikki määrittelyt. Kuvauslohkon ympärille tulee aina {...} aaltosulut. Kuvauslohko sisältää vähintään yhden kuvauksen.
Kuvaus - Declaration
Kuvaus on muodossa ominaisuus: arvo, kuten color: red. Kuvauksia voi olla useita jolloin ne erottaa puolipisteellä ( ; ) toisistaan esim: p { color: red; font: 12px; margin-left: 50px }
Valitsin - Selector
Valitsin on se (x)HTML-elementti, jolle CSS-sääntö luodaan. Valitsimen nimi on muuten sama kuin vastaava (x)HTML-elementin aloitustagi, mutta ilman < > -merkkejä. Eli jos halutaan luoda CSS-sääntö <P> -elementille käytetään valitsimena yksinkertaisesti vain P-merkkiä. Kaikki CSS1:n tukemat eri valitsimet löytyvät sivulta valitsimet.
Ominaisuus - Properties
CSS1:n käyttämät ominaisuudet jaetaan viiteen ryhmän: Fontti, Tausta&Väri, Teksti, Laatikko ja Listat. Ominaisuus määrittää siis elementin ulkoasun. Ominaisuus saa aina parikseen arvon, jotka erotetaan tosistaan kaksoispisteellä ( : ).
Arvo - Value
Jokainen ominaisuus saa tietyn arvon, esim: Color: Red. Jossa ominaisuus color saa arvon red. Vaikka selaimet (varsinkin IE) hyväksyvät lähes mitä vain arvoja ominaisuuksille, älä käytä lohkotason määrityksiä rivinsisäisissä elementeissä. Esim. älä määritä B -elementille rivinvaihtoa.

<< Alkuun

Esimerkkejä

Seuraavaksi kolme esimerkkiä CSS-sääntöjen käyttämisestä:

valitsin kuvauslohko
body { color: Black; background: White; }
P { color: navy; font-size:14px }
.main { color: Navy }
body
Sääntö kohdistuu <body> -elementtiin. Koska HTML-kielessä kaikki muut elementin sijaitsevat body -elementin sisällä, ne saamat myös samat määritykset. Sääntö color: black kertoo, että dokumentissa tulee käyttää mustaa väriä. Vastaavasti background: white määrittää taustan väriksi valkoisen.
p
Sääntö kohdistuu <p> -elementtiin, eli normaaliin tekstiin. Määritys color: navy määrää tekstin väriksi tumman siniseksi. Määritys font-size:14px kertoo, että koko on 14 pikseliä.
Huomaa, että <p>-elementin värimääritys ohittaa <body> -elementin mustan värin. Eli myöhemmin ja/tai tarkemmin annettu CSS-sääntö kumoaa aina edellisen säännön, ellei toisin ole määrätty. P-elementin tausta on valkoinen, koska muuta sääntöä ei ole määritelty.
.main
Viimeinen sääntö on ns. tyyliluokka (Class), jonka määrittely alkaa aina pistellä ( . ). Tyyliluokka voidaan kiinnittää haluttuun HTML -elementtiin class -parametrilla esim. <P class="main"> </P>. Tällöin kyseinen P -elementti saa värin navy (tummansininen), mutta koko on edelleen 14px. Voit kiinnittää luokan mihin tahansa HTML -elementtiin!

<< Alkuun


Pikakirjoite

Jotkin ominaisuudet ottavat vastaan useamman arvon. Esimerkiksi: Border: Red 8px Groove. Tämäntyylistä määrittelyä kutsutaan pikakirjoitteeksi (shorthand property). Esimerkiksi h4-elementille voidaan antaa seuraavat määritteet:

h4 { Border-style: Groove; }
h4 { Border-color: Red; }
h4 { Border-width: 4px; }

Säännöt voidaan yhdistää yhdeksi lyhyeksi säännöksi:

h4 { Border: Groove Red 4px }

Huomaa, että pikakirjoitteessa eri kuvauksien väliin EI laiteta pilkkua. Huomaa myös, että jokainen pikakirjoite voi määritellä vain tietyt ominaisuudet. Jokaisen pikakirjoitteen yhteydessä kerrotaan aina, mitä arvoja se voi saada.

<< Alkuun


Kommentointi

CSS ei ole ohjelmointikieli, joten kommentointi ei ole aivan välttämätöntä. Tyylisääntöjen kommentointi on kuitenkin hyödyllistä, varsinkin jos samaa tiedostoa käsittelee useita henkilöitä. CSS käyttää C-kielen tyylisiä kommentteja, joiden syntaksi on seuraavanlainen:
/* kommentti */. Eli esim. näin

/* H1 punainen tausta harmaa */
H1 { background: silver; color: red }

Kommentti voi sisältää myös useita rivejä, jolloin kaikki teksti joka jää kommentin aloitus- ja lopetus-merkkien väliin tulkitaan kommentiksi. Kommentti voivat olla myös säännön välissä, mutta sitä ei yleensä suositella.

/*CSS alkaa
otsikko h4 */
h4 { background-color: #000;
padding: 2px; /* testaa! */
margin-left: 4% }

Kommentteja voidaan tietysti käyttää myös tilapäisesti poissulkevana määrittelynä. Eli kun testaat jonkin CSS -säännön toimivuutta, voit poistaa jonkin häiritsevän säännön hetkeksi pois käytöstä.

<< Alkuun


Vinkkejä

Jos säännöstä tule pitkä kannattaakin siihen lisätä rivinvaihtoja, lisäksi pikakirjoite lyhentää koodia. Vertaa kahta sääntöä:

h2 { font-family: Arial; background-color: #000000; padding: 2px; margin-top: 1em; margin-right; 5em; margin-bottom: 1em; margin-left: 5em }

Tai vastaavasti:

 h2 { font: Arial;
      background: #000;
      padding: 2px; 
      margin: 1em 5em
     } 

Yllä olevat säännöt ovat täysin samat, mutta alemman säännön lukeminen on helpompaa, ja säännöt on kirjoitettu lyhyemmässä muodossa.

Kuten myös varmaan huomasit viimeisen säännön perässä ei ole puolipistettä. Puolipiste erottaa kaksi sääntöä toisistaan, joten viimeisen säännön perässä sitä ei tarvitse olla, tosin ei siitä haittaakaan ole.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!