Licenca
To delo je na voljo pod pogoji slovenske licence Creative Commons 2.5:
priznanje avtorstva - nekomercialno - deljenje pod enakimi pogoji.
Celotna licenca je na voljo na spletu na naslovu http://creativecommons.org/licenses/by-nc-sa/2.5/si/. V skladu s to licenco je dovoljeno vsakemu uporabniku delo razmnoževati, distribuirati, javno priobčevati, dajati v najem in tudi predelovati, vendar samo v nekomercialne namene in ob pogoju, da navede avtorja oziroma avtorje in izdajatelja tega dela. Če uporabnik delo predela, kar pomeni, da ga spremeni, preoblikuje, prevede ali uporabi to delo v svojem delu, lahko predelavo dela ponudi na voljo le pod pogoji, ki so enaki pogojem iz te licence oziroma pod enako licenco.
Osnove CSS
V začetku te učne enote smo se v glavnem osredotočili izključno na HTML. Zdaj je čas, da spletne strani polepšamo z uporabo stopničastih slogovnih predlog CSS (ang. Cascading Style Sheets). CSS si lahko predstavljamo kot definiranje »oblikovanja« spletne strani. CSS namreč določa stvari, kot so velikost pisave, robovi in barve z uporabo jezika, ki je popolnoma ločen od jezika HTML.
CSS je ločen jezik, saj služi povsem drugemu namenu kot HTML. HTML predstavlja vsebino spletne strani, CSS pa določa, kako je ta vsebina predstavljena uporabniku. To je temeljna razlika, ki je središče sodobnega spletnega razvoja.
CSS ponuja besednjak, s pomočjo katerega lahko spletnemu brskalniku povemo stvari, kot so: »Želim, da so naslovi res veliki in da se stranska vrstica prikaže na levi strani glavnega članka.« HTML nima ustreznega besedišča za sprejemanje tovrstnih odločitev glede postavitve vsebine – vse, kar lahko pove HTML, je: »to je naslov in to stranska vrstica«.
V nadaljevanju bomo spoznali osnovno sintakso CSS in kako jo povezati z elementi jezika HTML. Cilj ni toliko postati strokovnjak za CSS ali si zapomniti vse razpoložljive sloge, temveč razumeti, kako delujeta in sta medsebojno povezana CSS in HTML. CSS pravila (ang. rules) so običajno zapisana v ločeni datoteki.
Pravilo CSS se vedno začne z izbirnikom (ang. selector), ki določa, na katere elemente HTML se pravilo nanaša. V tem primeru poskušamo oblikovati element <body>. Izbirniku v zavitih oklepajih sledijo dejanska pravila, ki so sestavljena iz parov lastnost (ang. property) in vrednost (ang. value). Vsaka lastnost ima določeno oziroma nastavljeno vrednost, ki vpliva na element <body>, kot v spodnjem primeru:
Lastnost color je vgrajena v jezik CSS in določa barvo besedila vseh izbranih elementov HTML. Za vrednost lastnosti color lahko vnesemo šestnajstiško vrednost, ki predstavlja barvo. Vrednost #FF0000 predstavlja šestnajstiški zapis svetlo rdeče barve.
Lastnosti CSS so na nek način podobne atributom HTML, saj so tako lastnosti, kot atributi določeni s pari ključ/vrednost. Razlika je v tem, da pri latnostih določamo predstavitvene informacije, z atributi pa spreminjamo semantični pomen osnovne vsebine.
Kot smo že omenili, so CSS pravila običajno zapisana v ločeni datoteki, ki jo moramo povezati z datoteko HTML, tako da zna spletni brskalnik nato prikazati vsebino datoteke HTML, ki bo ustrezno oblikovana s pravili iz datoteke CSS. Datoteko CSS vključimo v datoteko HTML z elementom <link />, kot v spodnjem primeru:
Element <link /> je podoben elementu <a>, vendar ga uporabljamo smo znotraj elementa <head>. Atribut rel določa razmerje med virom in dokumentom HTML. Daleč najpogostejše razmerje je stylesheet za slogovne predloge, vendar obstaja še nekaj drugih možnosti. Atribut href deluje enako kot pri elementu <a>, le da mora kazati na datoteko .css namesto na drugo spletno stran. Vrednost za href je lahko absolutna ali relativna povezava do datoteke.
Med brskalnikom in slogovno predlogo sicer ni neposredne povezave. Brskalnik lahko slogovno predlogo najde le s pomočjo ustrezne značke jezika HTML. Spletna stran je tista, ki poveže skupaj vsebino, označeno z značkami HTML, ter zunanje datoteke s slikami, slogovnimi predlogami in kodo JavaScript. Zato je jezik HTML središče spletnega razvoja.
Stopničasti del poimenovanja CSS izhaja iz dejstva, da se pravila stopničasto prelivajo iz večih virov. Do sedaj smo spoznali samo en vir, kjer je mogoče definirati pravila CSS. To so zunanje datoteke s končnico .css. Vendar pa so zunanje datoteke s slogi le eden izmed virov definiranja pravil CSS. Hierarhija virov pravil CSS za vsako spletno stran je videti takole:
- Privzeti slogi brskalnika
- Uporabniško določeni slogi v zunanji datoteki
- Uporabniško določeni slogi posamezne spletne strani
- Uporabniško določeni slogi posameznega elementa
Zgornja hierarhija virov je urejena po prednosti od najmanjše do največje. To pomeni, da slogi, ki so definirani v vsakem naslednjem koraku, preglasijo prejšnje sloge. To pomeni, da slogi posameznega elementa preglasijo sloge posamezne spletne strani, ki preglasijo sloge iz zunanje datoteke, ti pa preglasijo privzete sloge brskalnika. V nadaljevanju si bomo ogledali, kako določimo sloge posameznega elementa in sloge posamezne spletne strani, čeprav je daleč najbolj učinkovito, če določimo sloge v zunanji datoteki.