Vključitev CSS v HTML

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

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

Seveda lahko te tri možnosti opisov slogov tudi kombiniramo. Nekaj slogov opišemo ločeno na datotekah CSS, nekaj opisov vključimo kar v glavo dokumenta, preostanek pa definiramo sproti. Glavni namen slogov je ločiti vsebino in obliko.

A v praksi se izkaže, da je tak kombiniran način uporabe CSS slogov nepraktičen. Zato stremimo k temu, da uporabljamo le zunanje prekrivne sloge.

Zunanja slogovna predloga

Slogovno predlogo povežemo z HTML dokumentom tako, da v glavi head HTML dokumenta uporabimo element link in lastnosti:

rel="stylesheet" - določa odvisnost na slogovno predlogo
type="text/css" - vrsta dokumenta je besedilna datoteka, ki vsebuje CSS-pravila
href="slog.css" - referenca na dokument, ki vsebuje slogovno predlogo

<link rel="stylesheet" type="text/css" href="slog.css" />

Če je potrebno spremeniti obliko, potem spremenimo le vsebino slogovne datoteke (v zgornjem primeru slog.css). Tako enostavno dobimo nov izgled vseh dokumentov, ki so povezani na to datoteko. V tem primeru se lahko iz dokumenta HTML sklicujemo na dokument CSS. Brskalnik dobi lastnosti iz datoteke s slogom in jih priredi pripadajočim oznakam v dokumentu.

Zunanjo slogovno predlogo lahko napišemo v kateremkoli urejevalniku besedil, obstajajo pa tudi programi za pisanje in preverjanje slogovnih predlog (tekstovni in grafični), ki nam le-te pomagajo napisati v krajšem času. Slogovno datoteko shranimo v datoteko s končnico *.css.

Notranja slogovna predloga

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

<head>
   <style type="text/css">
      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 vsakemu elementu znotraj oznake. V praksi ta način ne uporabljamo, saj ni ekonomičen in praktičen. Izjemoma ga uporabimo le takrat, kadar moramo določiti neko specifično lastnost nekemu elementu:

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

Če hočemo spremeniti barvo eni besedi v odstavku, potem zapišemo:

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

Tole pa je pomembna novica!

Nazaj

Naprej