Selles sarjas on juba mitu korda viidatud stiililehtedele. Need stiililehed võimaldavad rangelt eraldada paigutuse ja kujunduse. Tänu CSS-ile vastutavad HTML-i elemendid ainult veebidokumendi loogilise või semantilise kirjelduse eest.
Tavaliselt on alguses kasulik teada, milline stiilileht välja näeb. Vaadake esimest näidet.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>Veebibrauseris näeb dokumendid välja järgmiselt:
HTML-faili body-alas on määratletud kaks elementi:
• pealkiri
• tekstilõik
CSS-iga antakse nendele kahele elemendile vorming. Selleks määratakse head-osas stiililehe osa abil style. Nende elementide vormindus toimub selle osa piires.
Siin on veelkord määratlus pealkirja h1 kohta:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Näidatud süntaksi abil määratakse kaks asja:
• Määratakse kirjafont
• Määratakse fondi suurus
Selles etapis peaks vastama kasutatavale süntaksile üldiselt. Iga CSS juhis koosneb põhimõtteliselt kahest osast - valijast ja CSS-deklaratsioonist. Valija abil määratakse element, mida tuleb vormindada. Kuidas lõpptulemus lõpuks välja näeb, seda määrab CSS-deklaratsioon. Valija on alati vasakul, CSS-deklaratsioon paremal pärast kõveraid sulge.
Tegelik CSS-deklaratsioon koosneb omakorda kahest elemendist, nimelt omadusest ja väärtusest. Omanik ja väärtus eraldatakse kooloniga. Väärtuse järel on semikoolon.
Valija {
Omadus: Väärtus;
}Stiililehtede lisamine
On mitmeid erinevaid viise stiililehtede lisamiseks veebilehtedele. Esiteks saate stiilinõuandeid otse määrata HTML-sildile. Näide:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Selles näites kuvatakse pealkiri sinises värvitoonis.
Saate lisada ühele HTML-sildile mitu stiilinõuannet.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Seejärel lihtsalt märkige need üksteise järel, eraldades need semikooloniga.
Üldiselt on need nn sisemised stiilid mõistlikud ainult siis, kui veebilehe üksikute alade vormindamine on vajalik. Tavaliselt peaksite aga sellist otsest vormindamist vältima, kuna see muudab HTML-koodi ebakorrapäraseks.
Kesksed määratlused head-alas
HTML-faili päisest saate määratleda keskse stiililehe. Seal määratletakse kõik stiilid, mis peaksid sellele failile kehtima.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Sellise variandi eelis: erinevalt sisemisest variandist saab määratletud formaate kasutada dokumendis mitu korda. Eelmises näites määratleti CSS-klass text. (Põhjalikumad juhised valikute kohta, näiteks siin kasutatud klassis, järgnevad järgmises juhendis). Seda klassi saab nüüd dokumendis vabalt kasutada.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Sellisel määratlusel on sisemise variandi suhtes ilmselgelt ka see eelis, et muudatusi saab teha väga kiiresti läbi viia.
CSS-juhised välja viima
Kindlasti kõige praktilisem CSS-määratluse variant on stiilide väljaviimine välisesse faili. Sel viisil pääsevad suvaline arv HTML-faile ligi samale CSS-failile. Seeläbi muutub kõigi veebiprojekti kuuluvate failide ühtlane vorming väga lihtsaks. Hilisemaid muudatusi, mis peaksid mõjutama kõiki lehti, saab seeläbi hõlpsasti teha.
<link rel="stylesheet" type="text/css" href="css/styles.css">
HTML-dokumendi päises määratletakse link-element. Link-ile antakse kõigepealt atribuudi-väärtuse kombinatsioon rel="stylesheet". Seejärel järgneb type="text/css". Href-atribuudile määratakse vastav CSS-fail. Siin, nagu piltide lisamisel, pöörake tähelepanu õigele URL-i määramisele. Käesolevas näites eeldatakse, et CSS-fail styles.css asub kaustas css, mis omakorda asub sama tasemel kui tegelik HTML-fail.
Viidatud CSS-fail on tavaline tekstifail, mille laiend on css. Välises CSS-failis on määratletud vastavad CSS-juhised.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternatiivselt näidatud link-variandile saab stiililehte ka importida. Ka siin asuvad CSS-juhised välises failis. Selleks kasutatakse järgmist süntaksit:
<style type="text/css">
@import url("css/styles.css");
</style>
Pärast sulgusid tuleb määrata tee importitavale CSS-failile. Muide, @import on CSS-süntaks. Seega saab @import juhist kasutada ka CSS-failides. See võimaldab stiililehest teisi stiililehti välja kutsuda, mis võimaldab stiililehtede paremat korrastamist.
Küsimus on muidugi selles, kas kasutada link'i või @import'i. Põhimõtteliselt eelistan ma link'i, kuna see variant on lihtsalt kiirem ja seega lehe jõudlus on parem.
Meedialehed
Stiililehti saab määrata väga erinevatele meediumitele, nagu näiteks printer või ekraan. Selleks kasutatakse media-atribuuti. Saab määrata stiililehe ka mitmele koma eraldatud meediale.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Sel juhul kutsuti esile kaks stiililehte, üks ekraanile, teine printerile. CSS-fail druck.css laaditakse siis, kui brauseri printimisfunktsioon on aktiveeritud. Kokku on saadaval järgmised media-väärtused:
• all – Kehtib kõikidele meediaväljunditele.
• aural – CSS-faili kasutatakse kõnesünteesisüsteemides.
• braille – CSS-fail on mõeldud punktkirjaprinteritele, millel on taktiilne tagasiside ja mis saavad luua nn "pimedakirja".
• embossed – See suunab punktkirjaseadmed.
• handheld – Mobiilseadmetele mõeldud.
• print – CSS-fail kehtib paberile trükkimisel. Brauserid peaksid sellele failile automaatselt tuginema, kui printimisfunktsioon on aktiveeritud.
• projection – See variant on ette nähtud projekteeritud esitlusteks.
• screen – Näidatud ekraanile.
• tty – CSS-fail kehtib meediale, mis kasutab fikseeritud märgiruudust. Need võivad olla näiteks kaugkirjutid ja terminalid.
• tv – Sellega suunatakse telesaadetesarnaseid seadmeid. Eeldus on, et seadmed omavad madalat eraldusvõimet ja on piiratud keritavusega.
Lisaks näidatud HTML-süntaksile link-elemendi kaudu on olemas ka spetsiaalsed CSS-variandid. Kasutatakse @import'it või @media't.
<style type="text/css">
@media screen, projection {
/* Vormingud ekraanile */
}
@media print {
/* Vormingud printimiseks */
}
</style>
Style elemendi sees määratakse läbi @media ala vormingumäärangute jaoks, mis on mõeldud konkreetse meediumi jaoks. Sellele järgneb @media'i järel, tühikutega eraldatuna, üks juba kirjeldatud meediatüüpidest. Mitu meediatüüpi tuleb eraldada komadega.
