Oblikovanje spletne strani s CSS
Kadarkoli brskalnik prebere vstavek CSS, bo formatiral HTML dokument glede na podatke, zapisane v njem format. Poznamo tri oblike oblikovanja, ki so zapisane v spodnji tabeli. Celoten videz spletne strani lahko spremenimo z zunanjo datoteko CSS tako, da delamo/posodabljamo samo ena datoteka. Vsaka spletna stran mora vsebovati sklic na zunanjo slogovno datoteko, ki se nahaja znotraj elementa <link>. Če delamo samo na enem spletnem mestu, lahko uporabimo notranji CSS, ki je podan znotraj atributa style. Za slog v vrstici se uporablja notranji slog in če želimo uporabiti slog v vrstici, ustreznemu elementu dodamo atribut style.
Kar zadeva zunanji (ang. External) CSS, lahko datoteko zapišemo v beležnico. Ni treba dodati style, samo napišemo celoten CSS, ga shranimo pod ".css" in nato naložimo na strežnik. Samo prilepimo povezavo, ki jo dobimo s strežnika, v <link>. Če želimo dodati samo ime zunanje datoteke, kot kaže primer, moramo kopirati datoteko v isto mapo, kjer je indeks.
Poglejmo si še primer. V primeru sem dodal zunanje datoteke, kot tudi CSS na strani, da lahko slog spreminjamo. Slog v primeru je enak slogu zunanje datoteke, razlika je samo v tem, da, ko spremenimo zunanjo datoteko, se slog spremeni na vseh straneh, v katere smo dodali <link> do naše zunanje datoteke. S tem je precej preprosto spreminjati eno datoteko, kot spreminjati slog v vsakem dokumentu posebej.
| Zunanja (ang. External) CSS datoteka | Ustvarimo zunanjo CSS datoteko in jo uvozimo v HTML dokument z <link> elementom. | Glej primer |
|---|
Notranji CSS postavimo znotraj elementa <style>, ki se nahaja v <head>. V bistvu smo ga že spoznali v primeru zunanje datoteke, ampak tokrat si ga bomo ogledali natančneje. V nekaterih okoliščinah so lahko interne/notranje tabele slogov koristne. Na primer, če morda delamo s sistemom za upravljanje vsebine, kjer nam je onemogočeno spreminjanje zunanjih CSS datotek. Toda za spletna mesta z več kot eno stranjo postane notranja tabela slogov manj učinkovit način dela. Če želimo uporabiti enoten slog za več strani z uporabo notranjih slogov, moramo imeti notranjo tabelo na vsaki spletni strani, ki bo slog uporabljala. Delo postane počasnejše, prihaja do veliko napak, ker pozabimo spremeniti na vseh mestih, v glavnem veliko težav, ampak si poglejmo primer.
| Notranji (ang. Internal) CSS | V notranji slogovni tabeli preprosto zapišemo CSS znotraj elementa <style>, ki se nahaja v glavi HTML dokumenta. | Glej primer |
|---|
Po vgrajenih slogih bomo posegali manj pogosto, vendar še vedno pomembno, da jih spoznamo. Obstaja namreč veliko priložnosti, ko pridejo prav. Z vgrajenimi slogi bomo HTML oznaki dodali atribut <style>, ki mu bo sledil naš slog za oblikovanje elementa.
| Vgrajeni (ang. Inline) CSS | Slog elementa se vnese v samo HTML oznako. | Glej primer |
|---|
Vgrajene sloge uporabljamo zelo malo, vendar še vedno, ko vpišemo slog v element se zunanji ali notranji slog izniči (vgrajeni slog velja kot privzeti).
