Syntaksi

CSS Syntaksi


Syntaksi

CSS:n syntaksi koostuu kolmesta osasta: valintaosa (selector), ominaisuus (property) ja arvo(value):

selector {property: value}

Valintaosa on yleensä HTML-elementti/tagi jota määrittelyn halutaan koskevan. Ominaisuus on attribuutti jota halutaan muuttaa ja jokaiselle ominaisuudelle voidaan antaa arvo. Ominaisuus ja arvo erotetaan kaksoispisteellä ja ympäröidään aaltosulkeilla.

body {color: black}

Huomaa: Jos arvo sisältää useita sanoja, on se laitettava lainausmerkkeihin:

p {font-family: "sans serif"}

Huomaa: Jos haluat määrittää usaampia kuin yhden ominaisuuden, täytyy eri ominaisuudet erotella puolipistein. Alla olevasta esimerkistä käy ilmi kuinka kappale saadaan keskitettyä ja tekstin väri asetettua punaiseksi:

p {text-align:center;color:red}

Jotta tyylimäärityksestä saadaan helpommin luettava voidaan jokainen ominaisuus määrittää omalla rivillään:

p  
{
text-align: center;
color: black;
font-family: arial
}


Ryhmittely

Valintaosaa voidaan ryhmittää useita eri elementtejä. Elentit erotetaan tällöin toisistaan pilkulla. Seuraavassa esimerkissä kaikille otsikkotasoille on määritetty yhdellä kertaa samat ominaisuudet (vihreä fontti):

h1,h2,h3,h4,h5,h6   
{
color: green
}


class-valitsija

Class-valitsijaa käyttäen voidaan määrittää eri tyylejä saman nimisille HTML-elementeille.

Jos esimerkiksi halutaan sisällyttää dokumenttiin kahdenlaisia kappaleita, oikealle tasattuja ja keskitettyjä, voidaan asia hoitaa tyylejä käyttäen seuraavasti:

p.right {text-align: right}  
p.center {text-align: center}

Tämän jälkeen on käytettävä class-attribuuttia HTML-dokumentissa:

<p class="right">  
This paragraph will be right-aligned.
</p>
<p class="center">  
This paragraph will be center-aligned.
</p>

Huomaa: Useamman kuin yhden luokan määrittämiseen samalle elementille on käytettävä seuraavaa syntaksia:

<p class="center bold">  
This is a paragraph.
</p>

Ylläolevaan kappaleeseen sovelletaan sekä "center" ETTÄ "bold" luokkien mukaisia tyylimäärityksiä.

Voit myös jättää elementin nimen pois valintaosasta. Tällöin tyyliä sovelletaan kaikille HTML-elementeille joilla on määritetty luokka. Alla olevassa esimerkissä kaikille HTML-elementeille jotka kuuluvat "center"-luokkaan määritetään keskitys:

.center {text-align: center}

Alla olevassa koodissa sekä <h1>-elementti että <p>-elementti kuuluvat "center"-luokkaan. Molemmat elementit noudattavat siis ".center"-valintaosalla annettuja tyylimäärityksiä:  

<h1 class="center">  
This heading will be center-aligned
</h1>
<p class="center">  
This paragraph will also be center-aligned.
</p>

Älä aloita luokan nimeä numerolla, Mozilla/Firefox eivät ymmärrä tätä.


Tyylimääritysten lisääminen elementeille joilla on tietyt attribuutit

Tyylimääritykset voidaan asettaa koskemaan HTML-elementtejä joilla on tietyt attribuutit.

Alla oleva tyylisääntö kohdistetaan kaikkiin elementteihin joilla on "type"-attribuutti ja sillä arvona "text":

input[type="text"] {background-color: blue}


id-valitsin

Tyylimääritys voidaan tehdä myös kaikille HTML-elementeille joilla on id-valitsin. Id-valitsin määritetään #-merkillä.

Alla oleva tyylimääritys kohdistuu kaikkiin elementteihin voilla on "id"-attribuutti ja sillä arvona "green":

#green {color: green}

Alla oleva tyylimääritys kohdistuu <p>-elementtiin, jolla on id-arvona "para1":

p#para1  {  
text-align: center;
color: red
}

Älä aloita id-attribuutin arvoa numerolla, se ei toimi Mozillassa/Firefoxissa.


CSS kommentit

Kommentteja käytetään selittämään lähdekoodia. Kommenttien käyttö auttaa myös sivun alkuperäistä tekijää kun hän myöhemmin tarkastelee sivun sisältöä. Selaimet ohittavat kommentit. CSS-kommentti alkaa "/*" ja päättyy "*/" kuten sueraavassa esimerkisssä:

/* This is a comment */  
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
AttachmentSize
CSS_kysymyksia.doc27.5 KB