VIS praktikum: CSS

CSS praktikum

Probleem?

Nagu reaalne elu näitab, on vaja vaadelda eraldi veebilehe sisu ja tema kujundust. Tihti on nii, et programmeerija pole just kõige parem kunstiinimene ja kujundaja pole kõige parem programmeerija. Suuremates veebiinfosüsteemi projektides on nii kui nii vaja mitut inimest. Tihti on mõistlik, et kujundaja teeb ainult kujundust, ilma et programmeeriks (ta ei pruugigi seda osata) ja programmeerija saab tähelepanu koondada sisule. Põhiliselt selle probleemi lahenduseks ongi HTML'le juurde lisatud CSS (Cascading Style Sheets).

Mis CSS endast kujutab?

CSS on deklaratiivne keel, mida saab rakendada HTML'le (analoogselt ka XML'le). CSS kirjeldustes võime oma äranägemise (arvestades CSS poolt pakutavaid võimalusi) järgi kujundada HTML tag'e. Ehk siis millised peaks välja nägema näiteks tag'id "<p>", "<h1>", "<h2>", "<table>", "<tr>", "<td>", "<img>" jne.

Vaikimisi on igal brauseril olemas oma kujundus igale elemendile. Kui veebileht ise ei defineeri kujundust mingile elemendile, siis kasutatakse vaikimisi kujundust. Mõnda asja võivad mõned brauserid natuke erinevalt kujutada. Kui nii, siis oleks mõislik vajaduse korral ühtlustada kujundus, defineerides stiili (väljanägemise) ise.

Tihti ei piisa sellest - meil on omad spetsiifilisemad nõudmised. Näiteks, et tabel oleks ilma joonteta, pildil ei oleks joont ümber, nupp oleks ilusama kujundusega (assotsieeruks millegagi semantiliselt), abitekstis oleks märksõnad esile toodud, lingid sobivamalt kujundatud, lehtede pealkirjade kujundus, vaja, et leht oleks printerisõbralik, kuid samas mitte ainult printerile orienteeritud, vajalik JavaScripti kasutades teostada kujunduslikke muudatusi, sättida lehele taustapilt/heli jne.

Nagu näha, nõudmisi on palju. Eelnevalt näeme, et näiteks abiteksti märksõnade kujunduse juures võib tekkida vajadus see mingitel põhjustel ümber teha. Siis on hea, kui seda saab teha kujundaja (kellel puudub vajadus osata aru saada programmeerimisest ja sinna juurde kuuluvast). Teinegi aspekt on oluline. Nimelt kujundust muudame ainult ühes kohas.

CSS rakendamisest

CSS'i rakendamiseks veebilehel on kolm moodust:

Kirjutada CSS eraldi faili ja siis linkida ta HTML lehelt kaasa. Sedasi saame CSS'i turvaliselt hoida täiesti eraldi veebiinfosüsteemi koodist. Samuti iga lehekülje avamisega ei pea laadima CSS'is kirjeldatut. Sellega jääb serveri võrgu ribalaius kulutamata. Samas kui lehte külastatakse ainult üks kord, siis esimesel vaatamisel võtab lehe renderdamine rohkem aega, sest CSS fail tuleb alla tõmmata. Enamus juhtudel on vaja sama CSS'i kasutada jooksvalt mitmel pool. Siis on lihtne ainult viidata failile.
Näide: <link href="minustiilifailikene.css" type="text/css" rel=stylesheet>
Lisada CSS lehe päisesse. Lehe päisesse saab lisada CSS'i märgendi "<style>" ("<head>" märgindi sisse). Sedasi võime kindlad olla, et kujundusinformatsioon on alati kaasas ja ka lehe esmakordsel kuvamisel on lehe renderdamine kiirem kui eraldi failiga. Probleemiks on asjaolu, et CSS'i peab iga kord lehele juurde lisama, mis teeb ta mahukamaks. Kui näiteks serveri poolt laetakse CSS kuskilt failist kaasa ja mingil põhjusel on CSS vigane, siis võivad tekkida probleemid lehe kuvamisel (kujundaja kopeeris kogemata midagi valesti ja sisse sattus HTML'i või Javascripti vmt.).
Stiili saab ka otse elemendi juures määrata. Sellisel juhul ei saa enam rääkida ühes kohas muutmisest. Lisaks on ta kindlasti ka mahu poolest suurem, kui ta failiga kaasa lisatakse. Samuti on ta mahuliselt ka suurem juhul, kui lisame CSS'i otse lehe päisesse (mõningatel juhtudel pannakse päisesse kaasa palju erinevaid stiilide definitsioone, mida tegelikult ei kasutata üldse või vähemalt antud lehel mitte).

CSS enda ülesehitus näeb välja järgmine:

h3 {
text-align: center;
text-decoration: underline;
}

Siin h3 on HTML märgend (header 3 ehk kolmanda taseme päis). "h3" on see, millele me määrame mingi stiili. "h3" kasutatakse üldiselt kolmanda taseme pealkirja jaoks. Looksulgudes on stiil, mida määrame. Stiiliks määrasime siis, et pealkiri oleks keskel. "text-decoration: underline;" puhul määrame, et tekstil on joon all. Siin näiteks praegu jätame defineerimata, milline on märgendi "h3" sees oleva teksti suurus. Selle paneb siis brauser ise vaikimisi väärtusest.

Antud stiili võib rakendada näiteks järgnevale HTML lõigule:

<h2>Suurem pealkiri</h2>
Siin käsitleme mitut teemat
<h3>Väiksem alapealkiri</h3>

Antud HTML näeks välja järgmine:

Näide:

Suurem pealkiri

Siin käsitleme mitut teemat

Väiksem alapealkiri

Spetsiifilisemalt saame ka mingitele konkreetsetele elementidele määrata mingi stiili. Selleks võime kasutada HTML'i märgendi atribuute "id" ja "class".
Kasutamise näide:

<table class="kkk">
	<tr>
		<th id=vajaLaiaks>&nbsp;</th>
		<th >Punkte</th>
		<th >Sedeleid</th>
	</tr>
	<tr>
		<td>Seebu</td>
		<td class="number">42</td>
		<td class="number">55 899 </td>
	</tr>
	<tr>
		<td>Klaabu</td>
		<td class="number">5</td>
		<td class="number">1 323 </td>
	</tr>
	<tr>
		<td>Kibe</td>
		<td class="number">6</td>
		<td class="number">90 678 </td>
	</tr>
</table>

Antud asi näeks välja järgmine:

Näide:

	Punkte	Sedeleid
Seebu	42	55 899
Klaabu	5	1 323
Kibe	6	90 678

Kasulikke linke:

W3 Schools'i näiteid
W3 Schools CSS2 Reference
W3C CSS koduleht
W3C CSS2 spetsifikatsioon