CSS/Sidumine HTML-iga
HTML faili sidumiseks CSS-ga on 3 võimalust: paigutada stiilid HTML-i päisesse, linkida eraldi stiilifail ning kirjutada stiilid iga vastava HTML elemendi sisse. Neid kõiki võimalusi me järgnevalt ka vaatame. Lisaks vaatame ka stiililehtede sidumist @import käsuga.
Stiilid HTML-i päises
muudaOlgu meil alustuseks üks lihtne HTML dokument:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Juku kodulehekülg</title> </head> <body> <h1>Teretulemast Juku kodukale</h1> <p>Tere, mina olen Juku. Mul on suur rõõm tervitada teid kõiki minu suurepärasel koduleheküljel, mida ma olen otsustanud rikastada CSS-iga.</p> </body> </html>
Selline lehekülg on küll kenasti struktureeritud (nagu üks korralik lehekülg olema peabki), aga välimus on sellel must-valge ja igav. Et lisada natuke värvi sellesse lehte, muudame CSS-i abiga pealkirja punaseks:
h1 { color: red }
Sisestame selle koodi oma HTML dokumenti spetsiaalsete style-elementide vahele järgmiselt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Juku kodulehekülg</title>
<style type="text/css">
h1 { color: red }
</style>
</head>
<body>
<h1>Teretulemast Juku kodukale</h1>
<p>Tere, mina olen Juku. Mul on suur rõõm tervitada
teid kõiki minu suurepärasel koduleheküljel, mida ma
olen otsustanud rikastada CSS-iga.</p>
</body>
</html>
Selles dokumendis ütleb style-element ja tema sisu, et:
- tegemist on CSS-keelse stiilikirjeldusega ning
- kõigi
h1elementide tekstivärvus selles dokumendis on punane.
Et laiendada värvigammat veelgi enam lisame stiile veel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Juku kodulehekülg</title>
<style type="text/css">
h1 { color: red }
p { background-color: green; font-style: italic }
</style>
</head>
<body>
<h1>Teretulemast Juku kodukale</h1>
<p>Tere, mina olen Juku. Mul on suur rõõm tervitada
teid kõiki minu suurepärasel koduleheküljel, mida ma
olen otsustanud rikastada CSS-iga.</p>
</body>
</html>
Selles näites märgib lisatud rida, et elemedi p:
- taust on roheline ja
- tekst on kursiivis (kaldkirjas).
Lingitud stiililehed
muudaVeelgi parem kui stiilide paigutamine style-elemetide vahele on nende hoidmine hoopis eraldi failis. Selleks loome eraldi tekstifaili, millele paneme nimeks näiteks juku.css, ning kirjutame sellesse oma stiilid:
h1 { color: red }
p { background-color: green; font-style: italic }
NB! faili kirjutatakse vaid stiilide kirjeldused, ümbritsevaid style-elemente nagu HTML-is sinna ei kirjutata.
HTML-ist eemaldatud style-osa asemele paneme aga järgmise rea:
<link rel="stylesheet" href="juku.css" type="text/css" />
See märgib, et selle HTML dokumendiga on ühendatud stiilileht, mis asub failis "juku.css", stiililehe tüüp on CSS formaadis tekst.
HTML näeb meil seejärel välja selline:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Juku kodulehekülg</title> <link rel="stylesheet" href="juku.css" type="text/css" /> </head> <body> <h1>Teretulemast Juku kodukale</h1> <p>Tere, mina olen Juku. Mul on suur rõõm tervitada teid kõiki minu suurepärasel koduleheküljel, mida ma olen otsustanud rikastada CSS-iga.</p> </body> </html>
Tungivalt soovitatav on eelistada sellist HTML-iga linkimise tehnikat eelpool kirjeldatud CSS-i paigutamisele HTML-i sisse. Linkimise eelisteks on:
- võimalus kasutada ühte CSS-i faili mitmes HTML dokumendis,
- muutes kujundust ühes CSS-i failis muutuvad korraga kõik sellega seotud HTML dokumendid,
- väheneb veebilehekülje maht, sest stiilid tuleb alla laadida vaid esimese lehekülje külastamisel, ülejäänute puhul kasutatakse juba olemasolevat faili.
Reasisesed stiilid
muudaReasisesed ehk inglise keeles inline stiilid, kirjutatakse vastava HTML elemendi sisse, kasutades selleks atribuuti style. Näiteks, et muuta tekst pealkirjas roheliseks ning kursiiviks võiksime kirjutada nõnda:
<h1 style="color: green; font-style: italic">Juku kodukas</h1>
Reasiseste stiilide kasutamist praktikas tuleks pigem vältida.
Miks? Aga sellepärast, et sellisena kaotavad nad oma mõtte, milleks on hoida lahus dokumendi struktuur (HTML) ning kujundus (CSS). Kui me soovime määrata, et kõik pealkirjad oleksid kursiivis, siis peaksime reasiseste stiilide puhul kirjutame stiilimäärangu näiteks iga h1 elemendi sisse, mis võib olla aga suur hulk tööd, kui meil on rohkem pealkirju kui üks. Eraldiseisvasse stiililehte võiksime aga kirjutada vaid üheainsa rea, mis muudab kõigis selle stiililehega seotud dokumentides pealkirjad just sellisteks nagu meil tarvis. Tegelikult ei tule ka ühe pealkirja puhul selline asi kõne alla, sest sellisel juhul on meile hindamatuks abiks elementidele klasside ja ID-de määramine, misläbi saame määrata näiteks mõne konkreetse pealkirja kuju.
Stiililehtede @importimine
muudaKui meie stiililehed kasvavad väga suureks, muutub kõigi stiilide hoidmine ühes failis tülikaks ning siis on arukas tegu jagada see suur fail mitme väiksema faili vahel. Näiteks paigutada ühte faili menüü ning teise sisuosa kujundus ja siis importida menüü kujundust sisaldav fail sisukujunduse faili alguses:
@import url("stiilid/menyy.css");
@import url("stiilid/menyylisa.css");
h1,h2,h3 { color: blue }
p { font-style: italic }
...
Nii lihtne see ongi. Tuleb vaid meeles pidada, et @import käsud peavad asuma CSS-i alguses, enne kõike muud. Lisaks tuleb meeles pidada, et iga @import käsk pikendab stiililehe allalaadimise aega, sest brauser peab pöörduma iga faili hankimiseks ikka uuesti ja uuesti serveri poole. Võimaluse korral tuleks stiililehtede importimisest loobuda või siis kasutada seda vaid lehekülje loomise faasis ning töösse minevas versioonis lihtsalt kõik stiililehed üheksainsaks failiks kokku ühendada.
Kuna stiililehtede importimine on vanades brauserites halvasti toetatud, siis kasutatakse CSS-i @import käsku ka kui üht nn. CSS-i häkki.