POVEZOVANJE CSS IN HTML

Ko brskalnik prebere slogovno predlogo, takoj slog priredi spletni strani. Obstajajo trije načini, kako vstaviti slogovno predlogo v dokument.

Zunanja predloga

Pravila lahko povežemo z HTML dokumentom tudi preko značke <link />, ki je povemo vrsto dokumenta rel="stylesheet" type="text/css" in povezavo na neko datoteko href="MojSlog.css" in tako ločimo datoteko s slogovnimi predlogami od dokumenta HTML in lahko to datoteko uporabljamo za več dokumentov, ki so povezani preko nje. Tako zelo enostavno spremenimo izgled vseh dokumentov, ki so povezani na to datoteko (npr. v podjetjih, ki zahtevajo enoten izgled spletnih strani v svojih enotah). V tem primeru se lahko iz dokumenta HTML sklicujemo na dokument CSS. Brskalnik bo prebral lastnosti iz datoteke s slogom in jih priredil pripadajočim značkam v dokumentu.

Zunanjo slogovno predlogo lahko napišemo v kateremkoli urejevalniku besedil, obstajajo pa tudi programi za pisanje in preverjanje slognih predlog (tekstovni in grafični), ki nam le-te pomagajo napisati v krajšem času. Slogovna predloga naj ne bi vsebovala ukazov HTML saj lahko pride do napak in naj bi bila shranjena v datoteki s končnico css. Tu je primer vključevanja zunanje slogovne predloge:

<html>
<head>
<link rel="stylesheet" type="text/css" href="MojSlogCSS.css" />
</head>
<body>
...
</body>
</html>

Notranja slogovna predloga

Ta slogovna predloga pripada le tistemu dokumentu v katerem je napisana. Definiramo jo tako, da v glavi dokumenta napišemo značko <style> in potem normalno določamo lastnosti:

<head>
<style type="text/css">
  <![CDATA[
  hr {color: red}
  p {margin-left: 20px}
  body {background-image: url("slike/ozadje.gif")}
  ]]>
</style>
</head>

Opomba: Brskalnik običajno ignorira neznane ukaze. To pomeni, da če brskalnik določanje sloga ne podpira, ga ne bo upošteval. V starodavnih brskalnikih se pojavi, da se slog pokaže v dokumentu kot del vsebine. Da bi rešili ta problem, so napisali na začetku sloga <!- in na koncu ->, da se obravmava kot komentar v HTML. Ta način pa povzroča težave v XML prevajalniki, ki vse kar je v komentarjih prezrejo, torej tudi sloge. Edini strogo zružljiv način je uporaba zunanjih slognih predlog.

Stili znotraj značke (za določen element)

Pravila lahko določimo tudi vsakemu posameznemu elementu znotraj dokumenta HTML. Ponavadi se izogibamo pisanja sloga na tak način, saj ni ekonomičen in pravzaprav negira potrebo po slognih predlogah. Izjemoma ga uporabimo le takrat, kadar moramo določiti neko specifično lastnost nekemu elementu.

Če želimo spremeniti pisavo nekega določene odstavka, to naredimo tako:

<head>
...
<meta http-equiv="content-style-type" content="text/css" />
...
</head>
...
<h2 style="font-size: 120%">Naslov</h2>
<p style="color: red">Besedilo.</p>

Slogi brskalnika

Trenutno samo Opera omogoča nastavlati sloge za brskalnik.

Gor e-gradiva CSS primeri Zakaj CSS Sintaksa

SERŠ Maribor : Strokovna gimnazija : 2002 : Niko Fajfar

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri