CSS (Cascading Style Sheets) - Luento 3
- Luentotaltiointi
- Perusteet
- Käyttäjän määräämät tyylit
- Tyylien liittäminen dokumenttiin
- Tyylien määrittäminen
- Mittayksiköt
- Sivuilla käytettävät värit
- Kommentit
- Tyylien liittäminen toisesta tyylitiedostosta
- Tyylien valitsimet (engl. selectors)
- Laatikkomalli (engl. box model)
- CSS1:n ominaisuudet
- Lisätietoa
Seuraavassa tarkastellaan CSS-tyylilomakkeiden käyttöä ja niiden perusominaisuuksia Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) -suositusten mukaisesti. Lähinnä käydään läpi kuitenkin vain CSS 1 -tason ominaisuuksia ja joitain CSS 2.1 -tason ominaisuuksia. CSS 2 ja CSS 2.1 -muutoksista voi lukea W3C:n dokumentista.
Luentotaltiointi
Ongelmia videon katselussa?Perusteet
- Dokumenttien rakenne määritellään XHTML:n avulla.
- Sisältö on hyvin tulkittavissa.
- Sisältö on saatavissa riippumatta näyttölaitteesta.
- Sisältö on helposti muunnettavissa.
- Dokumenttien ulkoasu määritellään CSS-tyylilomakkeen avulla.
- Dokumentin rakenne on yksinkertainen.
- Sivuilla on yhtenäinen ulkoasu.
- Ulkoasun määrittämiseen ei mene aikaa.
- Keskitetty ulkoasun päivitys.
- Dokumentteja voidaan katsella monenlaisia ohjelmilla ja laitteilla (mediat).
- Esimerkiksi:
- erilaiset graafiset selaimet
- mobiiliselaimet
- ääniselain
- tekstiselain
- tv:n selain
- tulostin
- projektori
- Sivut on testattava huolellisesti erilaisilla selaimilla!
- Esimerkiksi:
- Sekä sivujen XHTML-koodi että CSS-koodi kannattaa tarkastaa jollakin validaattorilla.
- Esimerkiksi Firefoxin Web Developer -lisäosasta löytyy validaattorit molempiin tarkoituksiin.
Käyttäjän määräämät tyylit
Kaikkiin uusimpiin selaimiin voi itse määritellä omat CSS-asetukset, joita käytetään oletuksena sivuja näytettäessä. Käyttäjä voi oman selaimensa asetuksilla ohittaa sivuntekijän määrittelyt:
CSS-asetuksien ylimäärittely !important-määreellä:
h1 {
color: blue !important;
backround-color: yellow !important;
}
h2, h3 {
color: red !important;
backround-color: green !important;
}
- Ohjeita (valikkokomennot hiukan vaihtelevat selaimen versiosta riippuen): How to create a user style sheet, http://www.squarefree.com/userstyles/user-style-sheets.html
- Ohjeita Firefoxiin: http://www.mozilla.org/unix/customizing.html#usercss
- Firefoxiin saatavilla myös kätevä lisäosa Stylish.
- Internet Explorer 7-8:ssa valikkokomento on Tools | Internet Options | General | Accessibility.
- Opera 9-10:ssä valikkokomento on Tools | Preferences | Advanced | Content | Style Options.
Tyylien liittäminen dokumenttiin
Tyylit liitetään XHTML-dokumenttiin link
-elementillä (head-elementin sisään) seuraavaan tapaan:
<link href="tyylit.css" rel="StyleSheet" type="text/css" title="Tyylin nimi" media="all" />
- Tyyli on aina käytössä (persistent), jos title-attribuuttia ei ole määritelty. Esimerkiksi ilman
titleä oleva all-median tyyli tulee siis aina käyttöön kaikille medioille.
<link href="tyylit.css" rel="StyleSheet" type="text/css" media="all" />
- Tyyli on oletuksena käytössä, mutta voidaan vaihtaa (preferred), jos
title-attribuutilla on jokin arvo.
Kaikki tyylit, joilla on sama title-attribuutin arvo käsitetään yhdeksi tyyliryhmäksi. Jos ryhmiä on useita, niin oletuksena käytetään niistä ensimmäistä.<link href="tyylit.css" rel="StyleSheet" type="text/css" title="Perustyyli" media="all" />
<link href="tyyli1.css" rel="StyleSheet" type="text/css" title="Päätyyli" media="all" />
<link href="tyyli2.css" rel="StyleSheet" type="text/css" title="Päätyyli" media="all" />
<link href="tyyli3.css" rel="StyleSheet" type="text/css" title="Muu tyyli" media="all" />
- Muuttamalla rel-attribuutin arvoksi Alternate StyleSheet
voidaan määritellä vaihtoehtoisia tyylejä, joista käyttäjä voi valita haluamansa.
<link href="tyylit.css" rel="Alternate StyleSheet" type="text/css" title="Vaihtoehto" media="all" />
Vaihtoehtoisille tyylitiedostoille on aina määriteltävä myös title, sillä muuten vaihtoehtoista tyyliä ei näy selaimien valikoissa.
- media-attribuutilla voidaan määritellä, millaisille laitteille tyylinmääritykset ovat
tarkoitettuja, esim. vanhoille mobiiliselaimille voisi määritellä mediaksi handheld.
<link href="tyylit.css" rel="StyleSheet" type="text/css" media="handheld" />
- Automaattisesti tulostustilassa print.css-lisämääritykset valitseva linkitys:
<link rel="StyleSheet" href="print.css" type="text/css" media="print" />
all-media tarkoittaa, että asetuksia käytetään kaikille medioille. all-median asetuksia voidaan ylikirjoittaa tarvittaessa muissa medioissa. Muiden medioiden tyylitiedostot pitää muistaa linkittää XHTML-tiedostoon all-median linkityksen jälkeen, koska tyylit otetaan käyttöön ylhäältä alas periaatteella. Viimeisenä käyttöön tulee siis viimeiseksi liitetty tiedosto.
Tietokoneen näytön media on screen.
Jos median jättää määrittelemättä, kyseistä tyyliä käsitellään kuten all-median tyylejä.
Medioista lisää tietoa luennolla 6 ja W3C:n materiaaleista.
style-elementti
Tyylejä voi lisätä dokumenttikohtaisesti käyttämällä style-elementtiä:
<head> <title>foo</title> <style type="text/css" media="screen"> h1 { color: blue; background-color: yellow; } </style> </head>
style-elementin käyttöä ei voi kuitenkaan suositella, koska se rajaa vaikutuksen vain yhteen dokumenttiin. Sama voidaan tehdä yhtä helposti ulkoisella CSS-tiedostolla.
style-attribuutti
Tyylejä voi lisätä elementtikohtaisesti käyttämällä style-attribuuttia:
<h1 style="color: blue; background-color: yellow;">Otsikko</h1>
style-attribuutin käyttöä ei voi kuitenkaan suositella, koska se rajaa vaikutuksen vain yhteen elementtiin. Sama voidaan tehdä yhtä helposti ulkoisella CSS-tiedostolla ja class-attribuutin tai id:n avulla.
Tyylien käyttöjärjestys
Jos saman elementin (esim. h1) tyylimääritys on tehty useassa paikassa, on niiden käyttöjärjestys seuraava. Ylin (pienin numero) määritys siis näytetään, jos se löytyy ja siitä mennään aina porras kerrallaan alaspäin niin kauan, että tyylimääritykset löytyvät.
- selaimeen asetettu käyttäjän oma CSS-tiedosto
- style-attribuutti
- style-elementti
- erillinen CSS-tyylitiedosto
- selaimen oletustyyliasetukset
Esimerkki tyylien käyttöönottojärjestyksestä ja useista tyylitiedostoista
Lisätietoja
- Style Sheets in HTML documents
- External style sheets (persistent, preferred, alternate)
- Cascading Style Sheets (CSS) and XHTML
- Alternative Style: Working With Alternate Style Sheets
- Alternative style sheets
Tyylien määrittäminen
Perusperiaate on muuttaa olemassa olevien XHTML-elementtien ominaisuuksia. Oletuksena tyylin nimi on siis sama kuin sen XHTML-elementin nimi, jonka ulkoasuominaisuuksia halutaan muokata. Jokaisella muutettavalla ominaisuudella on tietty nimi.
tyylinimi {
ominaisuus: arvo;
}
CSS 1:n ominaisuuksista löytyy dokumentti osoitteesta:
http://appro.mit.jyu.fi/doc/css/
Esim. määritellään body
-elementin tekstin väriksi musta ja taustaväriksi valkoinen:
body {
color: black;
background-color: white;
}
Esim. määritellään kaikille otsikkotasoille sama fontti, väri ja alaviiva:
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, sans-serif;
color: blue;
border-bottom: 1px solid black;
}
- Samat ominaisuudet voidaan laittaa monille eri elementeille erottelemalla elementit pilkuilla.
- Vaihtoehtoiset ominaisuudet luetellaan pilkuilla.
- Jos ominaisuuteen voidaan määrittää useita arvoja, niin ne on eroteltava välilyönnillä.
- CSS-määritykset luetaan käyttöön kirjoitusjärjestyksessä, jolloin voi olla merkitystä missä järjestyksessä tyylisääntöjä kirjoittaa. Jos samalle elementille on määritetty tyylimääritykset CSS-tiedostossa kahteen kertaan, käytetään siis myöhemmin tiedostossa tulevia tyylimäärityksiä.
Myös CSS 2:n ominaisuuksista on oma dokumenttinsa, mutta sitä käsitellään vasta myöhemmillä luennoilla.
Perintä
Dokumenttipuun elementit perivät esim. tekstin värin äitielementiltään:
<h1><strong>CSS</strong> on iso juttu.</h1>
strong-elementti saa saman tekstin värin kuin mikä h1-elementillä on, ellei väriä ole strong-elementille erikseen määrätty. Aivan kaikki ominaisuudet eivät kuitenkaan periydy.
Mittayksiköt
Pituudet ja korkeudet kannattaa aina ilmaista suhteellisesti prosentteina tai em
-yksikköinä.
em
suhteutetaan aina oletusfontin kokoon.
px
(pikseli) -yksikköä voi käyttää pienten (alle 5 px) reunusten ja marginaalien
määrittelyssä sekä kuville tarkoitettujen lohkojen leveyksissä ja korkeuksissa, mutta sitä ei
suositella käytettäväksi kirjasimen koon määrittämiseen.
p {
font-size: 120%;
}
h1 {
margin-top: 1em;
}
h2 {
border: 1px solid black;
}
Muita CSS:n tuntemia yksiköitä ovat ex, in, cm, mm, pt ja pc. Näitä tarvitaan kuitenkin äärimmäisen harvoin ja ex-yksikköä lukuunottamatta ne ovat hyödyllisiä vain, jos käytetyn median fyysinen koko on tiedossa.
Sivuilla käytettävät värit
Värien määrittämisessä on käytössä useita tapoja. Yksi tapa on käyttää prosentteja:
p {
background-color: rgb(100%, 100%, 100%); /* valkoinen */
}
Perusvärit voidaan myös kirjoittaa suoraan nimillä:
p {
background-color: blue; /* sininen */
}
Yksi käytetty tapa on antaa värit RGB-arvoina:
p {
background-color: #FF0000; /* punainen */
}
Linkkejä värien määrittämisestä:
- ColorZilla-laajennus
- Color Scheme Designer 3
- HTMLHelp, "RGB Color Values"
- Gernot Metze, "Color Tables"
Kommentit
Kommentointi CSS-tyylitiedostossa onnistuu c-kielestä tutulla tavalla:
strong { /* Korostamiseen käytettävä tyyli */
background-color: white;
color: red;
}
Tyylien liittäminen toisesta tyylitiedostosta
@import-säännöllä voi liittää omaan tyylitiedostoonsa muiden tyylitiedostojen sisältämiä tyylejä. @import-rivien pitää olla CSS-tiedostossa ensimmäisinä.
@import "toinentyyli.css";
@import url(http://appro.mit.jyu.fi/appro2008.css);
Tyylien valitsimet (engl. selectors)
Luokat (class) valitsimina
class
-attribuutin avulla voidaan XHTML-elementti määrätä käyttämään
tiettyä tyyliä. Esim.
<p>Normaalitekstiä kappaleellinen</p>
<p class="varoitus">varoitus</p>
Vastaavat tyylimääritykset
p {
background-color: white;
color: green;
text-align: center;
}
p.varoitus {
background-color: white;
color: red;
}
Edellisen valitsimen yleistys, jota voidaan käyttää kaikkien elementtien yhteydessä.
.varoitus {
background-color: white;
color: red;
}
Elementin yhteyteen määritelty valitsin on "vahvempi" kuin yleistetty valitsin. Siispä alla olevilla tyylimäärityksillä tekstikappaleen väriksi tulisi punainen, vaikka yleistetty valitsin tulee tyylitiedostossa vasta elementin yhteyteen määritetyn valitsimen jälkeen.
p {
background-color: white;
color: green;
text-align: center;
}
p.varoitus {
background-color: white;
color: red;
}
.varoitus {
background-color: white;
color: blue;
}
Tyylien valitsimien yhteydessä perintä tarkoittaa sitä, että voit luoda luokkia (class) jokaisesta elementistä. Kaikki luokat perivät joitakin ominaisuuksia peruselementiltä (paitsi, jos uusia arvoja määritetään vanhojen tilalle tai ominaisuus ei ole perittävissä).
Esimerkki tyylin aliluokan käytöstä
Tunnisteet (id) valitsimina
id
-attribuutin avulla voidaan XHTML-elementti määrätä käyttämään
tiettyä tyyliä. Esim.
<p>Normaalitekstiä kappaleellinen</p>
<p id="varoitus">varoitus</p>
Vastaavat tyylimääritykset
p {
background-color: white;
color: green;
text-align: center;
}
p#varoitus {
background-color: white;
color: red;
}
Tunnistetta käytettäessä täytyy huomata se, että samassa XHTML-tiedostossa ei voi olla samaa tunnistetta (id) usealla XHTML-elementillä. Näin ollen lähes aina luokan (class) käyttö on suositeltavampaa.
Asiayhteyden mukaan määräytyvät tyylit
Tyylien avulla voidaan määritellä asiayhteyden mukaan käyttäytyviä tyylejä. Eräs tällainen esimerkki on p-elementin sisällä oleva strong-elementti.
p-elementin sisällä oleva strong-elementti muotoillaan seuraavan säännön mukaisesti:
p strong {
background-color: white;
color: red;
}
Esimerkki asiayhteyden mukaan määräytyvästä tyylistä
Näennäisluokat (pseudoluokat)
Näennäisluokat ovat tyylien erikoistapauksia, joilla saadaan esimerkiksi linkille tapauskohtainen käyttäytyminen sen mukaan, onko linkki vierailtu vai ei.
a:link { /* vierailematon linkki */
color: blue;
background-color: transparent;
}
a:visited { /* vierailtu linkki */
color: purple;
background-color: transparent;
}
a:active { /* aktiivinen linkki */
color: red;
background-color: transparent;
}
a:hover { /* kohdistettu linkki */
color: blue;
background-color: grey;
}
Esimerkki näennäisluokkien käytöstä
Laatikkomalli (engl. box model)
CSS:n laatikkomalli määrittää jokaisen elementin laatikoksi, jolla on marginaali, raja, täyte ja sisältö.
Sivulla olevien elementtien rajat saat näkyviin esimerkiksi asentamalla Firefoxiin Web Developer -pluginin. Laatikkomallin saa näkyviin Web Developerissa valinnalla Outline | Outline Block Level Elements.
Esimerkki FireBugin käytöstä tyylien määrittämisessä (Inspect-toiminto, Style-välilehti, Layout-välilehti)
Esimerkki CSS:n editoimisesta dynaamisesti Web Developerin avulla
CSS1:n ominaisuudet
- Kirjasimen
ominaisuudet (esimerkki)
- font-family
Kirjasintyyppiä määrättäessä pitää muistaa antaa useita vaihtoehtoja, koska ei voida tietää mitä kirjasimia käyttäjien koneilta löytyy. Viimeisenä vaihtoehtona pitää antaa yleisen kirjasinperheen nimi:
- sans-serif (päätteetön)
- serif (päätteellinen)
- monospace (tasavälinen)
- font-style
- font-variant
- font-weight
- font-size
Kirjasimen kokoa määrättäessä pitää varoa, ettei tee kirjasimesta liian pientä. Järkevintä on yleensä käyttää käyttäjän selaimen oletuskokoa eli 1em. Kirjasimen kokoa ei pidä määrätä px-yksiköissä, koska pikselien koko vaihtelee näyttöjen koon ja tarkkuuden mukaan.
- font
- font-family
- Värin ja
taustavärin ominaisuudet (esimerkki)
- color
- background-color
Määriteltäessä taustaväri pitää muistaa määrätä myös tekstin väri (color).
- background-image
- background-repeat
- background-attachment
- background-position
- background
- Tekstin ominaisuudet (esimerkki)
- Elementin raja, täyte ja marginaali (esimerkki)
Käyttäjien kommentit