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:
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.
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.
Definiramo jih lahko tudi sproti (med besedilom). Večini značk namreč
lahko predpišemo lastnost style, ki določa obliko elementa.
...
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.
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.
Č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:
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 }
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.
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: