Cascading Style Sheets (CSS) je programski jezik, ki omogoča določanje oblike elektronskih dokumentov. Medtem ko s HTML jezikom napolnite spletno stran z besedilom in ga semantično strukturirate, s CSS določite obliko te vsebine. Glavni namen CSS je ločiti vsebino od oblike, kar pomeni, da lahko stroj prebere elektronski dokument tudi brez CSS-a. Čeprav se HTML in CSS uporabljata skupaj, CSS navodila za oblikovanje in HTML elementi obstajajo ločeno.
Zakaj uporabljati CSS?
Dobra spletna stran ne živi le zaradi vsebine, temveč tudi zaradi oblikovanja. CSS ponuja številne možnosti oblikovanja, ki niso na voljo v čistem HTML jeziku. S pomočjo CSS lahko centralno nadzorujete določene specifikacije: podobni elementi (na primer vse hiperpovezave ali slike) v istem dokumentu so prepoznani in oblikovani z enim samim ukazom.
Glavne prednosti uporabe CSS vključujejo:
- Ločitev vsebine od oblike: Semantična struktura dokumenta ostane nedotaknjena.
- Enostavno vzdrževanje: Sprememba v eni zunanji datoteki se odrazi na vseh povezanih straneh.
- Prilagodljivost: Spletna stran se lahko prilagodi različnim izhodnim medijem in napravam.
- Napredne možnosti: Podpora za animacije, transformacije, prehode in kompleksne postavitve.
Načini vključevanja CSS v spletno stran
CSS lahko v spletni dokument vključimo na tri osnovne načine:
1. Zunanja slogovna predloga
To je najpogostejši način. CSS navodila so zapisana v posebni datoteki s končnico .css, ki jo v glavi dokumenta povežemo z elementom <link>. Atribut rel="stylesheet" pove, da gre za slogovno predlogo, atribut href pa določa pot do datoteke. Če želimo spremeniti videz več strani hkrati, zadostuje sprememba slogovne datoteke.
2. Notranja slogovna predloga
Notranja slogovna predloga je zapisana v elementu <style> v glavi dokumenta. Ta slog pripada samo tistemu dokumentu, v katerem je zapisan.
3. Slog znotraj oznake (Inline CSS)
Slog lahko določimo neposredno pri posameznem elementu z atributom style. Ta vsebuje CSS-deklaracije, ki se uporabijo samo za izbrani element, na primer: <p style="...">.
Osnovna struktura in sintaksa
CSS temelji na slogovnih pravilih. Vsako navodilo je sestavljeno iz izbirnika (selector) in zavitih oklepajev, v katerih naštejete lastnosti in njihove vrednosti, ki so med seboj ločene s podpičji. Vsako navodilo vsebuje ime lastnosti, dvopičje in določeno vrednost.
Primer: h1 {color: red; font-size: 30px;}
CSS selektorji določajo, kateri HTML elementi bodo oblikovani:
- Elementni selektor: Ciljanje na elemente po imenu (npr. p).
- Razredi (Class): Uporabljajo se večkrat (oznaka .ime).
- ID selektor: Uporabi se samo enkrat na strani (oznaka #ime).
Box Model: Temelj oblikovanja
Vsak HTML element lahko obravnavamo kot pravokotno škatlo. Box Model vključuje štiri ključne komponente:
| Lastnost | Opis |
|---|---|
| Content | Vsebina elementa |
| Padding | Prostor neposredno okoli vsebine znotraj elementa |
| Border | Črta okoli notranjega razmika |
| Margin | Zunanji prostor okoli elementa |
Naučite se CSS Box-Model v 4 minutah!
Napredne postavitve: Flexbox in Grid
Za sodobne postavitve strani sta danes najbolj priporočljiva pristopa:
- Flexbox: Sodoben način postavitve elementov v eni smeri (vrstica ali stolpec).
- Grid: Sodoben način postavitve v dveh dimenzijah (hkrati po vrsticah in stolpcih).
Čeprav se za pozicioniranje elementov še vedno uporabljajo lastnosti, kot so float ali position, so te danes bolj namenjene specifičnim nalogam in ne več celotni strukturi strani.