e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Slogovne predloge

Slogovna predloga (ang. Cascading Style Sheets - CSS) je mehanizem, ki pove spletnemu brskalniku kako naj prikaže HTML dokument. CSS struktuira vsebino HTML dokumenta in ji da želeno obliko.

Zakaj?

V prazgodovini spleta se je z večino značk, besedilo in druge elemente dokumenta HTML oblikovalo logično. Določilo se je, kaj določen del predstavlja (slika, tabela, vrstica v tabeli, polje v tabeli, seznam, točka seznama, odstavek, črta, indeks, eksponent, naslov, aktivna povezava ...), nič pa se ni ukvarjalo z obliko teh elementov. Pustili smo, naj jih brskalnik oblikoval po svoje.

Če ste pred nekaj leti izdelovali spletne strani, ste uporabljali značke <font> in druge, da ste lahko oblikovali spletne strani. Te so vam omogočile, da so dokumenti izgledali tako, kot ste si želeli. Če pa ste se kasneje odločili zamenjati izgled vseh strani v spletišču (četudi samo barvo ozadja), ste morali popraviti vsako stran posebej.

Slogovne predloge predstavljajo rešitev tega problema. Kadar določite slogovno predlogo in jo povežete z vsemi stranmi v spletišču, imate lahek nadzor nad celotnim spletiščem. Če želite spremeniti izgled, je potrebno spremeniti samo datoteko s slogovno predlogo.

Z uporabo slogov lahko določamo, kako naj brskalnik oblikuje posamezne elemente našega dokumenta. Določiti je mogoče celo vrsto oblikovnih lastnosti, med katere spadajo ozadje, robovi, razmiki, odmiki, pisava, poravnava, barva ...

Kako bo izgledala stran s slogovnimi predlogami?

Danes vsi brskalniki podpirajo CSS. CSS Level 1 je uveljavljen v vseh. Vseh pravil CSS Level 2 pa še ni uspel vključiti noben brskalnik. Vsi brskalniki (z izjemo Opere) pa so dodali svoja pravila. Kot je običajno pa se v vseh brskalnikih pojavljajo napake in brskalniki posameznih pravil ne tolmačijo pravilno.

Dodajanje slogovnih predlog v XHTML

Podatki o stilih so lahko določeni v dokumentih XHTML (embedded style sheet, vgrajena slogovna predloga) ali z zunanjo predlogo.

Če so slogovne predloge vgrajene v sam dokument XHTML, mora biti element imeti deklariracijo #CDATA (unparsed content data). Oznake < in & se v dokumentu HTML obravnavajo kot začetek priveskov, entitete kot npr. &lt; in &amp; so obravnavane kot navodila tolmaču XML. Zato morajo biti slogovne predloge znotraj CDATA (unparsed content data):

<style type="text/css">
 <![CDATA[
 ... ubežna sekvenca slogovne predloge ...
 ]]>
 </style>

Toda ta postopek ni združljiv s starejšimi različicami jezika HTML. Zato je strogo priporočljiva uporaba zunanjih slogovnih predlog. Tudi postopek skrivanja slogov v komentarje ne prinaša zadovoljivih rezultatov, za XML parserji odstranijo vsebine komentarjev.

Znački div in span

Kot pomoč pri oblikovanju dokumentov HTML lahko uporabljamo tudi znački <span> in <div>. Prva je namenjena oblikovanju zaporedja znakov, druga pa oblikovanju blokov (odstavkov). Če jima ne predpišemo oblike, nimata nobenega oblikovnega učinka.

SERŠ Maribor : Strokovna gimnazija : 2002 : Tomaž Pušaver