Tämän luennon aiheena on CSS-tyylilomakkeet. Luennon aluksi käydään lyhyesti läpi erikoismerkit HTML-dokumenteissa ja URLeissa.
Perussääntönä kannattaa pitää, että kaikki erikoismerkit pitää koodata HTML-dokumenteissa. Nykyään selaimet ymmärtävät aika hyvin skandimerkkejä, joten niiden koodaaminen ei ole välttämätöntä.
| Merkki | Koodi | Merkki | Koodi | Merkki | Koodi |
|---|---|---|---|---|---|
| < | < | > | > | & | & |
| ä | ä | ö | ö | å | å |
| Ä | Ä | Ö | Ö | Å | Å |
Perussääntönä kannattaa pitää, ettei käytä erikoismerkkejä URLeissa. Jos niitä on kuitenkin pakko käyttää, niin merkit on koodattava merkkiä vastaavalla heksadesimaaliluvulla.
| Merkki | Koodi | Merkki | Koodi | Merkki | Koodi |
|---|---|---|---|---|---|
| Välilyönti | %20 | ä | %E4 | ö | %F6 |
| å | %E5 | Ö | %D6 | Ä | %C4 |
| Å | %C5 | ~ | %7e |
Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia Cascading Style Sheets, level 1 (CSS1)-suosituksen mukaisesti
Perusperiaate on muuttaa olemassaolevien HTML-elementtien ominaisuuksia.
tyylinimi {
ominaisuus: arvo;
}
body {
color: black;
background-color: white;
}
Seuraavassa esitellään kolme erilaista tapaa liittää tyylit HTML-dokumenttiin. Suositeltavin tapa on tyylien liittäminen erillisen tyylitiedoston avulla.
Paras tapa tyylien liittämiseen dokumentteihin.
HTML-dokumentin otsikkotietoihin seuraava määritys:
<link href="tyylit.css" rel="stylesheet" type="text/css" />
Erilliseen tyylitiedostoon seuraava määritys:
h1 {
color:red;
text-align: center;
}
Seuraava määritys tulee dokumentin otsikkotietoihin. Tapaa ei tueta XHTML Basic-suosituksessa. Tarkoitettu dokumentti kohtaisiin muutoksiin, joten käyttöä kannattaa harkita hyvin tarkkaan!
<style type="text/css">
h1 {color:red; text-align: center;}
</style>
Tyylitiedostossa myöhemmin esitelty määritys syrjäyttää aiemmat määritykset!
Seuraava määritys tulee HTML-elementin style-attribuutin arvoksi. Tapaa ei tueta XHTML Basic-suosituksessa. Tarkoitettu elementtikohtaisiin muutoksiin. Ei siis kannata käyttää!
<p style="text-align:center; color: navy";> Elementin sisäinen tyylin määrittely! </p>
Tyylitiedostoja voidaan liittää yhteen @import-määrittelyn avulla. Määrittely sijoitetaan tyylitiedoston alkuun, jolloin tyylitiedoston tyylimääritelyt syrjäyttävät tuodut määrittelyt.
@import url(http://palvelin.fi/hakemisto/tyyli.css);
Esimerkki tyylitiedostojen liittämisestä yhteen
Aliluokat täytyy aina liittää rakenteellisesti oikeaan elementtiin.
Seuraavassa esimerkki class-attribuutin käytöstä
<p>Normaalitekstiä kappaleellinen</p> <p class="varoitus">varoitus </p>
Esimerkki aliluokan lisäämisestä tyylitiedostoon.
p {
background-color: white;
color: green;
text-align: center;
}
p.varoitus {
background-color: white;
color: red;
}
Edellisen aliluokan yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.
.varoitus {
background-color: white;
color: red;
}
Esimerkki tyylin aliluokan käytöstä .
Seuraavassa esimerkki id-attribuutin käytöstä:
<p id="otsikko12">Tärkeä 1. tason otsikko</p>
Seuraavassa esimerkki määrityksestä, joka laitetaan tyylitiedostoon.
h1#otsikko12 {
background-color: white;
color: red;
}
Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.
Esimerkki asiayhteyden mukaan määräytyvästä tyylistä.
Kommentointi onnistuu c-kielestä tutulla tavalla:
strong { /* Korostamiseen käytettävä tyyli */
background-color: white;
color: red;
}
Näennäisluokat ovat tyylien erikoistapauksia, jolla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan onko linkki vierailtu vai ei.
Esimerkki näennäisluokkien käytöstä.
Pituudet ja korkeudet kannattaa aina ilmaista suhteellisissa pituusyksiköissä (em, ex, px) tai prosentteina.
Värien määrittämisessä voidaan käyttää seuraavia tapoja:
#ff0000#f00rgb(255, 0, 0)rgb(100%, 100%, 100%)Linkkejä värien määrittämisestä:
Sivun tekijän ei kannata käyttää @important-määrittelyä! (Muutoksia vasta CSS:n uudemmissa versioissa!)
CSS3 tuo mahdollisesti mukanaan helpotuksen määrittelyihin!
body {
background: white ! important;
color: black ! important;
}
Seuraavien esimerkkien värivalinnat on tarkoitettu korostamaan ja havainnollistamaan käsiteltävää asiaa, joten niitä ei kannata käyttää mallina dokumentin värisuunnittelusta. Pikemminkin päinvastoin :)