Tyylien liittäminen XHTML-dokumenttiin
Tyylien liittäminen XHTML-dokumenttiin onnistuu kolmella eri tavalla. Tässä dokumentissa käsitellään kuitenkin vain kaikista kätevintä ja järkevintä tapaa eli ulkoisia tyylitiedostoja.
Ylivoimaisesti käyttökelpoisimmassa tyylilomakkeen käyttötavassa dokumenttiin määritellään ulkoinen tyylitiedosto. Ulkoiseen tyylitiedostoon kootaan kaikki dokumenttia koskevat tyylin määritykset. Yksi ulkoinen tyylitiedosto voi toimia useammankin XHTML-dokumentin tyylien pohjana. Tyylitiedostoa muutettaessa muuttuu kaikkien niiden XHTML-dokumenttien ulkoasu, jotka käytävät tiedostossa olevia tyylejä. Yhtä tiedostoa muuttamalla voidaan siis muuttaa kokonaisten sivustojen ulkonäköä.
Tyylitiedosto ja dokumentti täytyy yhdistää
toisiinsa jollakin tavoin. Tyylitiedosto linkitetään
link-elementillä jokaiseen XHTML-dokumenttiin,
jossa tyylitiedostoa halutaan käyttää.
link-elementin attribuuttien arvoilla selaimelle
kerrotaan tyylitiedosto, jota XHTML-dokumenttissa halutaan
käyttää.
link-elementti sijoitetaan XHTML-dokumentissa
head-elementin sisään.
<link href="tyylit.css" rel="stylesheet" type="text/css" />
-
href-attribuutin arvolla ilmaistaan tyylitiedoston nimi ja sen sijainti -
rel-attribuutilla ilmaistaan dokumentin suhde, joka tässä tapauksessa tarkoittaa, että kyseessä on tyylitiedosto (stylesheet) -
type-attribuutilla ilmoitetaan tiedoston ns. MIME-tyyppi, joka CSS-tiedostoilla ontext/css
Attribuuteista ja niiden arvoista kerrotaan enemmän XHTML-elementtien yhteydessä.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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 href="tyylit.css" rel="stylesheet" type="text/css" />
<title>Dokumentin otsikko</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ä.</p>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
<p>Tavallinen tekstikappale, joka kirjoitetaan
<strong>p</strong>-
elementin sisään. Kappaleessa olevat korostukset on
toteutettu
<strong>strong</strong>-elementillä.</p>
</body>
</html>
Seuraavassa on esimerkki ulkoisen tyylitiedoston
tyylit.css sisällöstä. Tyylitiedosto
sisältää
body-tyylin ja
p-tyylin määrittelyt. Tyylien avulla
body-elementissä määritellään
tekstin väriksi musta ja taustaväriksi valkea sekä
tekstin tasaus keskitetyksi.
p-elementin tekstin väri
määritellään keltaiseksi ja taustaväri
harmaaksi sekä tekstin tasaus keskitetyksi.
body {
color: black;
background-color: white;
text-align: center;
}
p {
color: yellow;
background-color: gray;
text-align: center;
}
Seuraavassa kuvassa käytetään edellisen esimerkin mukaisia tyylimäärityksiä XHTML-dokumentissa.
Käyttäjien kommentit