Stili


Z večino značk, ki smo jih že spoznali, smo besedilo in druge elemente dokumenta HTML oblikovali logično. Določili smo, 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 nismo ukvarjali z obliko teh elementov. Pustili smo, naj jih pregledovalnik oblikuje po svoje.

Z uporabo stilov lahko določamo, kako naj pregledovalnik 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 ...

Stile lahko opišemo na več načinov:

  1. Opise stilov pripravimo na posebni datoteki (običajno ji damo končnico css (Cascading Style Sheet)), ter jo z značko <link> vključimo v glavo dokumenta HTML. Na tak način lahko vključimo tudi več datotek z opisi stilov. <link rel="StyleSheet" type="text/css" href="style.css">
  2. Celoten opis stilov vključimo v glavo dokumenta HTML. Vse, kar bi pri prejšnji točki napisali na posebno datoteko, tu napišemo kar znotraj značke <style> v glavi dokumenta. <style type="text/css"> ... </style>
  3. Definiramo jih lahko tudi sproti (med besedilom). Večini značk namreč lahko predpišemo lastnost style, ki določa obliko elementa. <p style="..."> ... </p>
Seveda lahko te tri možnosti opisov stilov tudi kombiniramo. Nekaj jih opišemo z drugimi datotekami, nekaj opisov vključimo kar v glavo dokumenta, preostanek pa definiramo sproti.

Glavni namen stilov je ločiti oblikovanje od vsebine. Zato stile uporabljamo večinoma na prvi in drugi način (povezovanje in vključevanje), medtem ko tretji (sprotni) način uporabimo samo v posebnih primerih.

Opis stilov

Stil lahko predpišemo skoraj vsaki znački (h1, h2, h3, b, i, p, ol, ul, li, table, tr, td, th, a ...), tako da (na posebni datoteki ali znotraj značke <style> v glavi) napišemo: značka { lastnost: vrednost; ... } primer1.htm h1 { font-size: 30pt; color: red; text-align: center } h2 { font-size: 24pt; color: blue } h3 { font-family: Arial; font-size: 18pt; color: green } Če stile predpisujemo sproti, moramo kot vrednost lastnosti style napisati samo seznam oblikovnih lastnosti skupaj z njihovimi vrednostmi.

primer2.htm

<p style="background-color: yellow; font-size: 20pt; padding: 10pt"> Tole je primer sproti oblikovanega odstavka. </p> Kot pomoč pri oblikovanju 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.

Oblikovne lastnosti

Oblika besedila

Poravnava besedila

Ozadje

Okvir

Robovi

Odmiki

Položaj

Tip elementa

Selektorji

Če obliko dokumenta opišemo ločeno od vsebine (bodisi na posebni datoteki, bodisi z značko <style> v glavi dokumenta), smo že videli, kako opisati stile, ki pripadajo določeni znački (za imenom značke v zavitih oklepajih naštejemo njene oblikovne lastnosti). Oblikovne lastnosti pa lahko predpišemo ne samo posameznim značkam, pač pa tudi določenemu razredu značk, določeni pojavitvi značke, določeni skupini ... Komu predpisujemo oblikovne lastnosti, določimo s selektorjem, to je del pred zavitim oklepajem, kjer smo do sedaj pisali samo imena značk.

Značke

Če za selektor napišemo ime značke, bodo oblikovne lastnosti veljale za vse pojavitve te značke. Če na primer predpišemo p { font-size: 20pt } bodo vsi odstavki (vse, kar je označeno z značko <p>) izpisani s pisavo velikost 20pt.

Razredi

Oblikovne lastnosti lahko predpišemo tudi elementom, ki jih prej posebej označimo, da pripadajo skupnemu razredu (pri katerikoli znački lahko definiramo lastnost class, katere vrednost je ime razreda). Selektor za določen razred sestavimo tako, da pred ime razreda napišemo piko. Razred lahko omejimo samo na izbrano značko. V tem primeru napišemo najprej ime značke, nato piko, ki ji sledi še ime razreda (brez vmesnih presledkov). h1 { font-size: 24pt; color: red; text-align: center } .podcrtan { text-decoration: underline } h1.podcrtan { text-align: right } Tako definirane stile uporabimo na primer takole:

primer3.htm

<h1>Običajen naslov</h1> <h1 class=podcrtan>Podčrtan naslov</h1> <h1 class=podcrtan>Še en podčrtan naslov</h1> <h1>Spet običajen naslov</h1> <p class=podcrtan>Podčrtan odstavek</p>

Enote

Podobno kot smo sestavili selector za izbran razred, lahko sestavimo tudi selektor za točno določeno pojavitev nekega elementa (enoto). Vsaki znački lahko namreč predpišemo lastnost id, katere vrednost je enolična oznaka (ime) te pojavitve značke. Enolična pomeni, da ne smemo dvema značkama enakega tipa dati isto ime. Selektor za enoto sestavimo podobno kot selektor za razred, le da namesto pike uporabimo znak #. h1 { font-size: 24pt; color: red; text-align: center } #prvi { text-decoration: underline } h1#prvi { text-align: right }

primer4.htm

<h1 id=prvi>Prvi naslov</h1> <h1 id=drugi>Drugi naslov</h1> <h1>Tretji naslov</h1> <h1>Še en naslov</h1> <p id=prvi>Prvi odstavek</p>

Gnezdenje

Oblikovne lastnosti lahko predpišemo samo tistim pojavitvam določene značke, ki se pojavljajo znotraj neke druge značke, na primer <b> znotraj <h1> (ker so naslovi že krepki, bi si želeli krepke besede v naslovu izpisati nagnjeno). h1 b { font-style: italic } a img { border: none } V naslednjem primeru bo tako poudarjena beseda v naslovu nagnjena.

primer5.htm

<h1>To je <b>poudarjena</b> beseda v naslovu</h1> <p>To pa je <b>poudarjena</b> beseda v odstavku</p> Aktivna slika: <a href="/"><img src="/zaversnik.gif"></a>

Pseudo podrazredi

Pri znački <a> ločimo več stanj, ki jih opišemo s posebnimi podrazredi: link (neobiskana povezava), visited (obiskana povezava), active (kliknili smo na povezavo, gumb še držimo), hover (z miško smo nad povezavo, gumba nismo pritisnili). Netscape 4.x zadnje možnosti ne pozna.

Pri večini značk poznamo še dva posebna podrazreda, in sicer prvi znak in prva vrstica elementa (tudi tega Netscape 4.x ne pozna). Oblikovne lastnosti omenjenih razredov nastavimo takole:

primer6.htm

a:link { color: red; font-style: normal; text-decoration: none } a:visited { color: green; font-style: normal; text-decoration: none } a:active { color: blue; font-style: italic; text-decoration: none } a:hover { color: yellow; font-style: normal; text-decoration: underline } p:first-letter { font-size: 300%; float: left } p:first-line { font-family: Arial; font-weight: bold }

Skupine

Večim značkam, razredom ali enotam lahko predpišemo isti stil v enem koraku: h1, h2.poseben, h3#prvi { font-size: 24pt; color: red }