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