CSS Vadnica
CSS je pripomoček, s katerim urejamo HTML dokument in poskrbimo za predstavitev spletnih strani. Uporablja se za določanje sloga HTML strani. Določimo lahko barve, velikosti, rob, oblazinjenje, obrobe, položaje in na tone drugih stvari. Pravila so sestavljena iz zbirnikov in deklaracijskega bloka.
Zbirnik kaže na element HTML, ki ga želimo formatirati, blok formata pa vsebuje deklaracije, ločene s podpičje. Vsaka deklaracija vključuje lastnosti in vrednosti CSS, ločene s podpičji, bloki se končajo z zavitimi oklepaji. Zbirniki se uporabljajo za 'iskanje' elementov HTML, ki jih želimo transformirati, razdelimo pa jih v pet kategorij. CSS se uporablja za določanje videza našega spletnega mesta, vključno s spremembami dizajna, postavitve in zaslona na različnih napravah. To so mobilne naprave, tablice, prenosniki. CSS je rešil velik problem pri oblikovanju in izdelovanju spletnih strani.
- CSS je kratica za Cascading Style Sheets (slo. Kaskadni slogovni listi).
- CSS opisuje, kako naj bodo elementi HTML prikazani v brskalniku.
- Zunanji CSS se lahko uporablja za nadzor postavitve več spletnih strani hkrati.
- Zunanje tabele so shranjene v datotekah CSS na naših strežnikih.
Orodje za delo s CSS
Orodje za delo s CSS je mogoče uporabiti, kar beležko v vsakem operacijskem sistemu. Videli smo že, kako delati v beležnici s slogom v oblikovanju spletnih strani. Profesionalna orodja, kjer lahko delamo s slogom je ogromno, vendar jih bom naštel samo nekaj. Kot prvi IDE je to PHPStorm, drugi se pojavi pod imenom VS Code, tretjemu je ime Notepad++ in še bi jih lahko našteval. Dodal sem tudi krajši opis (vsaj s PHPStorm in VSCode orodji), kako s tema dvema orodjema začeti.
Poglejmo si najprej, kako v beležnici dodamo slog HTML dokumentu z uporabo notranjega sloga.
| Beležnica | Pisanje sloga v beležnici. | Glej primer |
|---|
Če želimo ustvariti slog v PHPStorm, nam ni potrebno nameščati dodatnih orodij. Seveda PHPStorm vključuje intelliSense, kar pomeni, da nam vnaprej ponudi možnosti, kaj želimo izbrati.
| PHPStorm | Če želimo ustvariti slog v PHPStorm, nam ni potrebno nameščati ničesar. PHPStorm seveda vključuje intelliSense, kar pomeni, da nam vnaprej ponuja možnosti, kaj želimo izbrati. | Glej primer |
|---|
Ker je PHPStorm plačljiv, mnogi uporabljajo VSCode, ki je brezplačen. Je zelo dobro orodje, samo mogoče opozorilo, da ne nameščati preveč razširitev (ang. Extension), ker s tem upočasnimo delovanje IDE-ja VisualStudio Code. Kar zadeva razširitve, priporočam samo module CSS, ki podpirajo samo-dokončanje.
| VisualStudio Code | Odpravljanje napak s prekinitvenimi točkami, skladi klicev in interaktivna konzola. | Glej primer |
|---|
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).
