Tyylien aliluokat

XHTML-elementeille voidaan määritellä aliluokkia, joiden avulla yhdelle XHTML-elementille voidaan määritellä useita erilaisia esitystapoja. Aliluokkien avulla saadaan jokaiselle elementille ulkoasu käyttötarkoituksen mukaan dokumentin rakennetta rikkomatta. Esimerkiksi normaaliteksti eli p-elementin sisään määriteltävät kappaleet voidaan tehdä erilaisiksi ulkoasultaan kappaleiden sisällön mukaan. Kyseessä on eräänlainen kokonaan uuden tyylin tekeminen.

Tyylien aliluokkia voidaan määritellä antamalla tyylille alkuperäisen tyylin nimestä ja aliluokasta muodostuva yhdistelmänimi. Uuden tyylin nimi on muotoa tyyli.luokka, jossa tyyli on alkuperäisen tyylin nimi ja luokka on aliluokan nimi. Tyylin ja aliluokan nimi on erotettu toisistaan pisteella (.). Seuraavassa esimerkissä tyylille h1 on luotu aliluokka h1.tarkea. h1-tyylin tekstin väri on määritelty mustaksi. Tyylistä on haluttu tehdä erillinen aliluokka, jonka tekstin väriksi tulee punainen. Esimerkin kaltaista h1.tarkea aliluokkaa voidaan käyttää otsikoissa, jotka vaativat erityistä korostamista.

h1 {
background-color: white;
color: black;
text-align: center;
}

h1.tarkea {
background-color: yellow;
color: red;
}

Seuraavassa kuvassa on esimerkin tyyleillä muotoiltu XHTML-dokumentti. Kuten kuvasta voidaan nähdä periytyy h1-tyyliin määritelty keskitys myös h1.tarkea-tyyliin. Tämä johtuu siitä, että tyylitiedostossa on merkitystä mihin järjestykseen tyylimäärityksiä kirjoitetaan. Tässä tapauksessa h1-tyylin määritykset on tehty ensimmäisenä jolloin ne periytyvät kaikkiin jatkossa seuraaviin h1:een kohdistuviin määritykseen eli tässä tapauksessa h1.tarkea-tyyliin. Jos h1.tarkea olisi sijoitettu tyylitiedostossa ensimmäiseksi se ei olisi perinyt mitään h1-tyylin määrityksiä.

Graphic6
Kuva 6: Esimerkki tyylien aliluokkien käytöstä.

Jos aliluokkaa ei haluta yhdistää mihinkään tiettyyn tyyliin, voidaan se esitellä seuraavan esimerkin mukaisesti ilman varsinaista tyylin nimeä. Aliluokkaa voi tällöin käyttää minkä tahansa elementin yhteydessä.

.tarkea {
background-color: yellow;
color: red;
}

Varsinaisessa XHTML-dokumentissa tyylien aliluokan käyttöönotto onnistuu class-attribuutin avulla seuraavan esimerkin mukaisesti. Dokumentissa tärkeänä pidetty otsikko halutaan nähdä punaisena ja vähemmän tärkeä otsikko halutaan nähdä mustana. Jos selain ei tue tyylien käyttöä, niin sekä h1-tyylillä sekä h1.tarkea-tyylillä määritellyt otsikot näytetään selaimen oletusmuodossa. Kummatkin otsikkotekstit on nähtävissä otsikkotasoisena, joten dokumentin rakenne säilyy kunnossa. Aliluokkien käytössä on erityisen tärkeää, että aliluokat pohjataan aina rakenteellisesti oikeaan elementtiin. Tällä tavoin varmistetaan dokumentin näkyminen oikeassa muodossa myös selaimissa, jotka eivät tue tyylilomakkeita. Ei siis saa määritellä p-elementille tyylejä jotka saavat sen näyttämään otsikolta, koska p-elementti tarkoittaa kappaletta eikä otsikkoa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link rel="StyleSheet" href="aliluokat.css" type="text/css" />
<title>CSS-esimerkeissä tarvittava tiedosto</title>
</head>
<body>
<h1>Ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.</p>
<h1 class="tarkea">Tärkeä ensimmäisen tason otsikko</h1>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.
Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-elementin sisään.
Kappaleessa olevat korostukset on toteutettu
<strong>strong</strong>-elementillä.</p>
</body>
</html>

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/doc/tyovaline/css/index7.html
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2003-09-23 16:21:09
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto