Siirry sisältöön

CSS

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

Wikipedia
Wikipedia
Wikipedia-tietosanakirjassa on artikkeli aiheesta:

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ä.

Ominaispiirteitä

[muokkaa | muokkaa wikitekstiä]

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

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

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

  1. käyttäjän omat tyyliehdotukset,
  2. tiedoston tekijän tyyliehdotukset ja
  3. 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ä

[muokkaa | muokkaa wikitekstiä]
  • Kaikki kirjoitetaan pienillä kirjaimilla

Tiedoston perusrakenne

[muokkaa | muokkaa wikitekstiä]

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

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".

* {
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

[muokkaa | muokkaa wikitekstiä]

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

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

XHTML-tiedoston ulkopuolinen CSS-tiedosto

[muokkaa | muokkaa wikitekstiä]

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

[muokkaa | muokkaa wikitekstiä]

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

[muokkaa | muokkaa wikitekstiä]

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

[muokkaa | muokkaa wikitekstiä]

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).