Vključitev CSS v HTML

CSS lahko v spletni dokument vključimo na tri osnovne načine. To so zunanja slogovna predloga, notranja slogovna predloga in slog znotraj oznake. Vsi trije načini so uporabni, vendar nimajo enake vloge pri organizaciji in vzdrževanju kode.

Pomni: Glavni namen CSS je ločiti vsebino od oblike. Zato je pri večstranskih spletiščih najpogosteje najprimernejša uporaba zunanje slogovne predloge.

Osnovna pravila

Slogovno predlogo lahko v spletni dokument vključimo na tri načine:

kot zunanjo slogovno predlogo,
kot notranjo slogovno predlogo,
kot slog znotraj oznake.

Zunanja slogovna predloga je zapisana v posebni datoteki s končnico .css in jo s pomočjo elementa <link> povežemo z dokumentom. Notranja slogovna predloga je zapisana v elementu <style> v glavi dokumenta. Slog znotraj oznake pa določimo neposredno pri posameznem elementu z atributom style.

Vse tri načine lahko tudi kombiniramo, vendar je v praksi najpreglednejša in najuporabnejša rešitev običajno uporaba zunanjih slogovnih predlog v ločenih datotekah.

Primerjave

Zunanja, notranja in vrstična uporaba slogov

Čeprav vsi trije načini omogočajo oblikovanje dokumenta, se razlikujejo po preglednosti in namenu uporabe.

Način	Glavna značilnost
zunanja slogovna predloga	isti slog lahko uporabimo na več straneh
notranja slogovna predloga	slog velja samo za en dokument
slog znotraj oznake	slog velja samo za posamezni element

Pozor: Slog znotraj oznake je navadno najmanj pregleden način, ker se oblikovanje meša neposredno z vsebino elementa.

Zgledi

Zunanja slogovna predloga

Zunanjo slogovno predlogo povežemo s HTML dokumentom tako, da v glavi dokumenta uporabimo element <link>. Atribut rel="stylesheet" pove, da gre za slogovno predlogo, atribut href pa določa pot do datoteke. Element <link rel="stylesheet"> uporabljamo v glavi dokumenta.

rel="stylesheet" – določa, da gre za povezavo do slogovne predloge,
href="slog.css" – določa pot do dokumenta, ki vsebuje slogovno predlogo.

<link rel="stylesheet" href="slog.css">

Če želimo spremeniti videz več strani hkrati, zadostuje sprememba slogovne datoteke, na primer slog.css. To je velika prednost zunanjih slogovnih predlog.

Notranja slogovna predloga

Notranja slogovna predloga pripada samo tistemu dokumentu, v katerem je zapisana. Določimo jo v glavi dokumenta z elementom <style>, ki vsebuje CSS za ta dokument ali njegov del.

<head>
   <style>
      p { padding-left: 20px; border-bottom: solid green 2px; }
      body { background-image: url("slike/ozadje.gif"); }
   </style>
</head>

Notranja slogovna predloga pripada le tistemu dokumentu, v katerem je zapisana. Določimo jo v glavi dokumenta z uporabo elementa style.

Slog znotraj oznake

Slog lahko določimo tudi neposredno pri posameznem elementu z atributom style. Ta atribut vsebuje CSS-deklaracije, ki se uporabijo samo za izbrani element. Tak način je primeren predvsem za posamezne posebne primere ali hitro preizkušanje, ni pa najbolj pregleden za splošno organizacijo slogov v dokumentu.

<p style="..."> ... </p>

Če želimo spremeniti barvo eni besedi v odstavku, lahko zapišemo:

<p>Tole pa je <span style="color: red;">pomembna</span> novica!</p>

Tole pa je pomembna novica!

Priporočila

Za večstranska spletišča praviloma uporabljaj zunanjo slogovno predlogo.
Notranjo slogovno predlogo uporabi takrat, ko slog velja samo za en dokument.
Slog znotraj oznake uporabljaj le izjemoma za posamezne posebne primere.
Sloge organiziraj tako, da ostaneta vsebina in oblikovanje čim bolj ločena.

Pogoste napake

Prevelika uporaba atributa style pri številnih elementih.
Mešanje vsebine in oblikovanja na način, ki oteži vzdrževanje kode.
Napačna predstava, da je notranja slogovna predloga primerna za celotno večstransko spletišče.
Neuporaba zunanje slogovne datoteke tam, kjer bi ta močno poenostavila delo.

Čeprav lahko vse tri načine kombiniramo, je za pregledno in vzdrževano kodo navadno najbolje večino pravil zapisati v zunanjo slogovno predlogo.

Nazaj

Naprej