Kaj je zunanji slog?

Zunanji slog opisuje, kako izgleda spletna stran. S slogom lahko določite stvari, kot so velikost, barva in pisava besedila, barva gumbov ali položaj menijev in stranskih vrstic.

Koda, uporabljena v zunanjem slogu

Za izdelavo osnovne spletne strani se uporabljata dve vrsti kode:

• Označevalni jezik HyperText (HTML): Določa vsebino spletne strani. Vsebuje dejansko besedilo z oznako, ki določa, ali so odseki besedila odstavki, naslovi ali seznami. Vsebuje tudi povezave do slik, ki se pojavijo na strani, in hiperpovezave do zunanjih strani.
• Cascading Style Sheets (CSS): Kodni jezik, ki se uporablja za določanje načina prikaza vsebine. Določa, kako je prikazana posamezna vrsta besedilnega elementa in lahko različno prikaže isto vrsto elementa, če pripada različnim razredom ali ima drugačen ID. To omogoča, da se stvari, kot so meniji in seznami, v glavnem besedilu spletne strani obnašajo zelo različno.

Na splošno je ločevanje sloga od vsebine dobra ideja, saj vam omogoča, da se osredotočite na eno stvar hkrati. To postane še pomembnejše v skupini, ki strokovnjakom za vsebino in predstavitve omogoča, da delujejo neodvisno od ostalih. Morda je še pomembneje, da omogoča tudi enotno uporabo slogovnih navodil za enotno uporabo na celotnem spletnem mestu.

Nato lahko vizualno predstavitev spletnega mesta spremenite iz enega sloga, ne da bi uredili vsako spletno stran posebej. Za večja zapletena spletna mesta se lahko za nadzor besedila, menijev in razdelkov na straneh uporabljajo številni slogovni listi. Ta zbirka slogovnih listov se lahko imenuje "tema".

Uporaba zunanjega CSS-ja za povezavo HTML-ja s CSS-jem

Slog CSS je mogoče vključiti neposredno v HTML spletne strani, s pomočjo CSS za posamezen slog vsakega odstavka in naslova drugače. Ta vrsta inline styling na splošno ni dobra ideja, saj izgubite vse prednosti ločevanja sloga od vsebine. Predvsem izgubite možnost, da celotno spletno mesto dosledno posodabljate iz ene datoteke.

Pravi način uporabe sloga na spletnem mestu je ustvariti eno samo datoteko zunanjega sloga za vsako vrsto sloga, ki ga želite uporabiti, nato pa te datoteke sklicevati iz vsake datoteke HTML. Na primer, morda imate naslednje zunanje slogovne liste:

• text.css
• meniji.css
• layout.css

Kodo CSS lahko spreminjate znotraj zunanjih slogov, ne da bi jih spreminjali imen datotek, kar pomeni, da sklicevanja na te datoteke v HTML-ju vseh vaših spletnih strani ne bodo spremenila.

Primeri HTML in CSS

Zelo preprosta stran HTML lahko vsebuje naslednjo kodo:

 Vse o meni!

Ta stran govori o meni in zakaj sem super.

Na to stran je mogoče povezati preprost zunanji slog, tako da pod kodo dodate naslednjo kodo.

type = "besedilo / css"
href = "myStyle.css" />

Ustvarite drugo besedilno datoteko z imenom myStyle.css, ki se nahaja v isti mapi kot index.html in vsebuje naslednjo kodo:

h1 {
barva: # FF7643;
font-face: Arial '
}
p {
barva: rdeča;
velikost pisave: 1.5em;
}