CSS
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
- 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ä
[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
Selektorit
[muokkaa | muokkaa wikitekstiä]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
[muokkaa | muokkaa wikitekstiä]* {
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ä:
- 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
[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).