CSS

Tässä kirjassa käytettävä standardi on W3Cn nykyinen suositus CSS 2.1 (2007-07-19)

CSS (Cascading Style Sheets) on mm. XHTML-dokumenttien ulkoasun määrittämiseen tarkoitettu tyyliohjekieli. Siitä on käytössä versiot 1 ja 2. 3 on kehitteillä.

Wikipedia

Wikipedia-tietosanakirjassa on artikkeli aiheesta:

CSS

Ominaispiirteitä

CSS on lyhenne sanoista Cascading Style Sheets (vakiintumaton suomennos kaskadiset tyyliohjeet). CSS-tieto voidaan sijoittaa ulkoiseen CSS-tiedostoon, XHTM-tiedoston head-elementin sisään tai yksittäisen XHTML-elementin sisään. Tyyliohjeet pätee tietyssä hierarkiassa eli

ensin yksittäisessä XHTML-elementissä oleva,
sitten head-elementissä oleva ja
lopuksi ulkoisessa CSS-tiedostossa oleva.
Jos CSS ei ole määritelty pätee selaimen oletus.

Toisella tavalla ajatellen tyyliohjeella on myös seuraava ensisijaisuusjärjestys:

käyttäjän omat tyyliehdotukset,
tiedoston tekijän tyyliehdotukset ja
selaimen oletustyylit.

Eli käyttäjällä on mahdollisuus päättää minkä ulkoasun haluaa. Kaskadinen tarkoittaa tätä useiden erillisten tyyliohjeiden sulautumista yhdeksi ohjeistoksi ja toisaalta ominaisuuksien arvojen periytymistä.

Perussääntöjä

Kaikki kirjoitetaan pienillä kirjaimilla

Tiedoston perusrakenne

Tiedoston perusrakenne on


selektori {
	ominaisuus: arvo;
	pominaisuus: parvo;
}
/* kommentti */
pelektori {
	ominaisuus: arvo;
	pominaisuus: parvo;
}

missä

selektori: on määriteltävä kohde
ominaisuus: on määriteltävä attribuutti
arvo: on määriteltävän attribuutin arvo
ominaisuus:arvo: kokonaisuutena on deklaraatio
{ominaisuus:arvo}: kokonaisuutena on deklaraatio-lohko
/* kommentti */: on vapaasti koodiin sijoitettava kommentti

Selektorit

Selektoreita ovat mm.

*: universaaliselektori * (asteriski) määrittää kaikkia XHTML-elementtejä
elementti: tyyppiselektori määrittää annettuja XHTML-elementtejä
#id: id-selektori määrittää kyseisellä id-attribuutilla merkattuja elementtejä
.class: luokkaselektori määrittää kyseisellä class-attribuutilla merkattuja elementtejä
elementti.class: määrittää luokkaselektorille elementtiriippuvuuden eli deklaraatio pätee vain elementti-elementteihin, jotka ovat luokassa class
:pseudo: pseudoluokat ja elementit

Useampi kuin yksi selektori valitaan erottamalla ne pilkulla, esim. "elementti, .luokka".

Esimerkit

* {
text-align:right;
}

tasaa kaikkien elementien tekstin oikeaan laitaan

p {
text-align:right;
}

tasaa kaikkien p-elementien tekstin oikeaan laitaan

#huuto{
text-transform:uppercase;
}

muuntaa elemettien, joiden id-attribuutin huuto, tekstin versaaliksi

.otsikko, .otsake{
text-align:center;
}

keskittää elementtien, joiden class-attribuutin arvo on otsikko tai otsake, tekstin

p.luokka{
text-decoration:underline;
}

alleviivaa p-elementtien, joiden class-attribuutti on alleviivattu, tekstin

a:visited {
color:green;
}

määrittää kaikki klikatuiksi määritellyt linkit vihreiksi

CSS:ään viittaaminen XHTML-tiedostossa

CSS-tyylitieto voidaan ilmoittaa ja hakea XHTML-tiedostoon kolmella tavalla. Ne ovat suositeltavuusjärjestyksessä:

ulkoinen tyylitiedosto
sisäinen style-elementillä yksittäiseen XHTML-tiedostoon upotettu tyylitieto
sisäinen yksittäiseen elementtiin style-attribuutilla upotettu tyylitieto

XHTML-tiedoston ulkopuolinen CSS-tiedosto

Ulkoiseen tyylitiedostoon viitataan XHTMl-tiedoston head-elementin sisältämällä link-elementillä muodossa:

<link
 type="text/css"
 rel="stylesheet"
 charset="iso-8859-1"
 href="tyylit.css" 
/>

missä attribuuttien merkitykset ovat seuraavanlaiset:

type: kertoo kyseessä olevan css-tiedosto
rel: kertoo kyseessä olevan tyyliohje
charset: kertoo tyyliohjeessa käytettävän koodiston
href: kertoo tyyliohjeen nimen ja sijainnin

XHTML-tiedoston sisäinen tyylitieto

XHTML-tiedoston sisäistä tyylitietoa käytetään, kun yhdellä XHTML-tiedostolla on uniikkia muotoilua, jota ei geneerisimmillä muotoiluilla enää voida muuttaa. Se lisätään head-elementin sisään style-elementillä.

<style type="text/css">
p {margin-left: 20px}
</style>

XHTML-elementin sisäinen tyylitieto

XHTML-elementin sisäistä tyylitietoa saatetaan käyttää, kun yhdelle XHTML-elementillä on halutaan antaa uniikkia muotoilua, jota ei geneerisimmillä muotoiluilla enää voida muuttaa.

<p style="margin-left: 20px;margin-right: 20px">
Reunoilta marginalisoitu kappale.</h1>

Elementtien laatikkomalli

Jokainen elementti rakentuu laatikkomallin mukaisesti sisällöstä (content) ja sitä kiertävästä reunasta (border). Reunan ja sisällön välisessä on tyhjä tila (padding). Reunan ja elementin vieruselementtien välisssä on tyhjä tila eli marginaali (margin).

Katso myös

CSS3