CSS

Vist ühtki teist W3W standardit ei ole täiendatud ja parandatud nii palju ja nii sageli kui dokumentide vormistamiskeelt CSS (Cascading Style Sheets): alates CSS 1.0 soovitusest 17.12.1966 kuni 16.12.2004 ilmnud CSS 3.0 "Kõne" on ilmunud 20 täiendust ja parandust. See on ka arusaadav, sest digitaalsete dokumentide esitamine ei toimu enam klassikaliselt arvutiekraanil või arvutiprinteris, digitaalseid dokumente näidatakse pihuarvutite ja mobiiltelefonide ekraanil, loetakse (pimedatele) kõnega ette ja/või trükitakse Braille punktkirjas. Need erinevad esitamismeediad esitavad dokumendi formateerimisele erinevad nõuded. Dokument ise, ja selles salvestatud informatsioon ei muutu, kuid seda peab olema võimalik formateerida kõigi nende meediate jaoks. Dokumendi formateerimine tabelitega (nagu seda tehti HTML-dokumentidega), tühikute ja reavahetustega rikub kogu dokumendi infostruktuuri, mida peab näiteks pime aru saama, kui monotonne hääl loeb talle: "br...table width equals 400 px ...". Formateerimine peab olema täiesti eraldi dokumendi infostruktuurist - tühikud ja reavahetused, tühjad read jne ei tohi olla dokumendi infostruktuuri osad. Ja formateerimine ei tohi minna kergesti "rikki", näiteks ekraanil näidatava dokumendi visuaalne struktuur peab säiluma, kui dokumendiakent (teatud piirides) suuremaks-väiksemaks, kitsamaks-laiemaks veetakse või kui häälega ette loetava dokumendi korral reaguleeritakse helitugevust või tämbrit.

Neid täiesti loomulikke ja loogilisi nõudeid täidabki dokumentide vormistamine CSS stiililehtedega. Stiililehed kirjeldavad kogu dokumendi ja selle alamosade selle meedia keeles, milles dokumenti inimesele esitatakse (arvutimonitor, printer, mobiiltelefoni ekraan jne); sama dokumendiga saab siduda eri meediate jaoks koostatud erinevaid stiililehti. Praegu (2005) saab CSS stiililehtede abil määrata vormistuse järgmiste meediate jaoks:

aural - kõnesüntesaatorile;

braille - punktkirja (braille-kirja) näitava ekraani jaoks

embossed - braille-ekraanile

Stiili määramiseks on mitu võimalust.

- otse HTML-märgendis: <p style="font-weight: bold">...</p> - kogu paragrahv rasvaselt;

- stiilid kirjeldatakse HTML-dokumendi päises, näiteks nii:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <html>
	<head>    
	<title>Minu esimene stiiliga lehekülg</title>
    <style type="text/css">    
	body {
	      padding-left: 11em;      
		  font-family: Georgia, "Times New Roman", Times, serif;      
		  color: purple;      
		  background-color: #d8da3d }
		  ...

- stiililehe võib salvestada eraldi failina (failinime laiendiga .css); eraldi failina salvestatud stiililehe kasutamiseks on tarvis vaid määrata vormistatavas dokumendis link stiililehele:
<link rel="stylesheet" href="translaatorid.css" type="text/css" media="all" />; eraldi failina salvestatud stiililehte saab kasutada paljude andmefailidega, näiteks kõigi WWW-saidi dokumentidega; sellega hoitakse kokku palju vaeva ja saavutatakse kogu saidi ühesugune "nägu" ja see ongi kõige loomulikum stiilide kasutamisviis.

Isegi sama stiililehe kasutamisel võib erinevate dokumentide väljanägemist muuta (näiteks erinevates www-saidi osades), sest lõpliku formateerimise võib määrata samm-sammult - järgmine (lokaalsem) formateering täiendab ja parandab eelmisi, üldisemaid formateeringuid - sellest tulebki sõna "Cascading" - samm-sammuline stiili määramine. Dokumendi vormistamisel kasutab sirvija algul välist, (lingitud) stiililehte, siis dokumendi päises määratud stiile ja viimasena - otse märgendis määratud stiili.

Märgendist väljaspool (dokumendi päises või eraldi failis) määratud stiili kirjeldus koosneb kolmest osast: selektor, omadus ja omaduse väärtus, näiteks eespoolesitatud näites

body {
padding-left: 11em; 
font-family: Georgia, "Times New Roman", Times, serif; 
color: purple; 
background-color: #d8da3d }

määratakse märgendi body (selektor) omadused padding-left, font-family, color, background-color; kui omadus on mitmesõnaline, tuleb see võtta jutumärkide vahele ("Times New Roman"). Omaduste rühmal võib olla mitu selektorit: h1,h2 {color: red;} ja sama märgendi jaoks võib olla kirjeldatud mitu erinevat stiili, näiteks stiili definitsioon p.sinine{color: #0000ff} muudab paragrahvi teksti siniseks, kui sellel on attribuut class="sinine", s.t. see on esitatud kujul <p class="sinine">...</p>. Kui sama stiili tahetakse kasutada mitme erineva märgendiga, võib märgendi selektoris ära jätta, näiteks kirjeldus .kaldkiri{font-style: italic;} kasutab stiili kaldkiri kõigis märgendites, mille klass on kaldkiri, s.t. nii pealkirjas <h1 class="kaldkiri">...</h1> kui ka paragrahvis <p class="kaldkiri">...</p>.

Stiilid võimaldavad määrata väga mitmesuguseid omadusi: teksti värvi - color, tausta värvi - background-color, taustale võib paigutada ka pikselkujutisi - teksti fonti (font-family), fondi stiili (font-style, font-transform, font stretch, font-variant, text-decoration, text-shadow), tühja ala elemendi ümber (margin-left, margin-right, margin-top, margin-bottom või kõik korraga: margin), mitmesuguse kujundusega ääriseid (border-width, border-style, border-color), saab kujundada mitmesuguse stiiliga loetetlusi (lists) - list-style-type, list-style-position, list-style-image, saab kontrollida elementide suurust - height, width, max-height, max-width, line-height jne

Stiilidega kujunduse määramisel kasutatakse kaht tüüpi elemente. Nn "jooksva rea element" span on lihtsalt tekstilõik (seda tüüpi on näiteks HTML-märgendid <b> ...</b>, <em>...</em>) - kui mõnda sõna või fraasi on tarvis teha rasvaseks, alla kriipsutada jne siis määrakse sellele osale märgend span, näiteks HTML-dokumendis tekstieffekt

sõna kasti sees

on saadud HTML-tekstis märgendiga

<p class="must kast">sõna <span class="kastis">kasti</span> sees </p>

kui stiil kastis on määratud nii:

.kastis {
	background-color: #666666; /* hall taust */
	border: 1px;
	color: #FFFFFF; /* valge tekst */
	border-color: #000000; /* must raam */
	border-style: solid; /*raam pideva joonega */
}

Lehekülje üldilme kujundavad kasti-tüüpi (box) elemendid, mis tekitavad enne ja pärast reavahetuse; HTML-märgenditest on sellised näiteks pealkirjad <h1>...</h1>, <h2>...</h2>,... ja paragrahvid <p>...</p>. Stiililehehel tekitatakse kasti-tüüpi element määritlusega display: box.

Elementide paigutuse määrab omadus position; selle väärtus võib olla:

static - ei muuda paigutust, oletusena kasutatakse alati seda;

relative - paigutus arvutatakse algul tavalisel viisil, aga siis nihutatakse vastavalt sellele, kuidas on määratud omadused top, right, left, bottom - need määravad elemendi kauguse teda sisaldava elemendi vastavatest äärtest;

absolute - elemendi asend (top, right, left, bottom omadused) on teda sisaldava elemendi suhtes fikseeritud (veeritamisel element liigub koos teda sisaldava elemendiga);

fixed - elemendi asend on fikseeritud dokumendi akna suhtes, veeritamisel element ei liigu.

Omadusega float (väärtused: left, right) liigutatakse element teda sisaldava elemendi suhtes kas selle vasakusse paremasse äärde; float kasutamisel peaks olema elemendi laius width väiksem kui teda sisaldaval elemendil, muidu pole float effekti võimalik näha; float abil näiteks nihutatakse tekstis olevad pildid lehekülje äärele.

Stiililehe abil on näiteks väga lihtne realiseerida mitmesuguseid mitmetasemelisi menüüsid. Järgneva stiililehega moodustatakse blokki <div class="menu">...</div> paigutatud järjestamata loetelu <ul>...</ul> elementidest <li>...</li> menüü; kogu blokk on nihutatud omadusega float=left lehekülje vasakusse äärde; omadus margin-right:4px; jätab menüü ja lehekülje teksti vahele 4 pikseli laiuse valge äärise; oletusena loetelu elementide ette paigutatav munake (bullet: ) on eemaldatud määranguga list-style: none; . Järgnevas on stiilileht menu.css:

.menu {
		width: 8em; /* menüü laius */
		float:left;
		margin-right:4px;
		background-color: #CCCCCC; /* hall taust */
		} 
.menu ul { /* eemaldame bullet-id */
		list-style: none;
		margin: 2px; 
		padding: 4px;
		}
.menu li {
		display: block;
		border-width: 1px;
		border-style: solid;
		border-color: black;
		background-color: #ffffff;
		text-indent: 1em;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		}
.menu a {
		color: #000;
		background: #efefef;
		text-decoration: none;
		}
.menu a:hover {
		color: #a00;
		background: #aaa;
		}

Viimane määritlus .menu a:hover tekitab hiire liikumisel lingile tekstieffekti - lingi tekst muutub tumedaks. Järgnevas on HTML-lehekülje tekst ja kuidas seda nähakse sirvijas:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-15" />
<title>Menüü test</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Esimene</a></li>
<li><a href="#">Teine</a></li>
</ul>
</div>
Sõnad, sõnad, sõnad, sõnad, sõnad, 
sõnad, sõnad, sõnad, 
sõnad, ... ja veel sõnu ...
, ... ja veel sõnu ...
</body>
</html>

HTML-dokumendi tekst ...ja nii näitab seda sirvija

Lehekülje paremal, üla- või alaääres olevate menüüde moodustamine on analoogiline. Stiililehe abil menüüde moodustamine on tunduvalt lihtsam kui Javascript-is või PHP-s programmeerimine ja sellised menüüd toimivad praegu juba kõigis tähtsamate sirvijate viimastes versioonides (kõige rohkem vigu stiilide kasutamisel teeb IE).

Ülesandeid:

1. Keele terminalide tähestik on T = {<div>,</div>,<span>,</span>,<br/>,<img/>} (terminalid on üksteisest eraldatud komaga, s.t. <div> on üks terminal!). Keel koosneb kõikvõimalikest nendest märgenditest (terminalidest) korrektselt koostatud jadadest: iga avava märgendi (terminali) <x> jaoks peab alati olema hiljem sulgev märgend </x> (<br/>,<img/> sulevad end ise) ja märgendid ei või "minna risti", s.t. avava märgendi <x> ja sellele vastava sulgeva märgendi </x> vahel olevate märgendite sulgevad märgendid peavad alati olema enne sulgevat märgendit </x>. Koosta skanner ja leksikaanalüsaator, mis kontrollib neid tingimusi ja moodustab märgendite puu (AST)., milles iga avava märgendi jaoks on viit sellele vastavale sulgevale märgendile ja vastupidi, sulgeva märgndi juures on viit sellele vastavale avavale märgendile.

Küsimused, probleemid: