Načrtovanje in razvoj spletnih aplikacij

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!