Uvod v CSS


CSS (Cascading Style Sheets ali sl. kaskadne stilske predloge) je slogovni jezik, ki skrbi za izgled spletnih strani. Z njim opredelimo posamezne lastnosti HTML elementov. CSS nam omogoča, da ločimo strukturo spletne strani od njenega izgleda. Tako lažje urejamo izgled ne da izgubimo preglednost HTML dokumentov.

Običajno izgled spletne strani določa avtor spletne strani, pri čemer lahko uporabi CSS na tri načine:

-

inline ali vrstični stil

Omogoča, da znotraj posameznega HTML elementa v atributu style opredelimo lastnosti prikaza tega elementa. Ta stil ima najvišjo prioriteto in prepiše nekompatibilna pravila, opredeljena z vgrajenim ali zunanjim stilom. Ker velja samo za tisti HTML element znotraj katerega je opredeljen, s prekomerno uporabo hitro pridemo do ponavljanja kode in slabše preglednosti.
-

internal ali vgrajen stil


vendar tudi če, da znotraj posameznega HTML dokumenta v HTML elementu style opredelimo lastnosti prikaza katerega koli elementa v dokumentu. Ta stil ima srednjo prioriteto in prepiše nekompatibilna pravila, opredeljena z zunanjim stilom. Je sicer bolj pregleden, še vedno pa lahko vodi do ponavljanja kode, če želimo isti stil uporabiti v večih različnih HTML dokumentih.
-

external ali zunanji stil

Omogoča, da v posebnem CSS dokumentu opredelimo lastnosti prikaza katerega koli HTML elementa v katerem koli HTML dokumentu, ki dostopa do našega CSS dokumenta. Ta stil ima najnižjo prioriteto, vendar je (sploh pri večjih spletnih mestih) najboljša izbira. Je najbolj pregleden in lahko ga uporabimo v mnogih spletnih straneh z enostavnim vključevanjem v HTML dokument. S tem se lahko tudi bistveno zmanjša velikost spletnih strani.


Vendar, tudi če avtor ne opredeli nobenega stila za svojo spletno stran, bodo elementi še vedno oblikovani zaradi privzetih stilov prikazovanja brskalnikov. Možno je, da tudi uporabnik spletne strani določi svoj stil in s tem prepiše privzeti stil brskalnika.


Izjema pri prioritetni lestvici je uporaba oznake !important, ki postavi trenutno vrednost na najvišje prioritetno mesto in prepiše vse ostale stile.



Sintaksa CSS predloge

Za posamezen HTML element lahko opredelimo več različnih lastnosti. Vsako lastnost opredeljujemo po shemi:

ime-lastnosti: vrednost;

Če gre za vrstični CSS ne opredeljujemo HTML elementa, ker vedno velja samo za in točno za tisti HTML element, znotraj katerega se predloga nahaja. Celoten element torej zgleda tako:

<p style="color: blue;">To je modro besedilo.</p> Če gre za vgrajen ali zunanji CSS, moramo brskalniku povedati, katere HTML elemente naj oblikuje z našim stilom. To naredimo z uporabo selektorja, ki mu znotraj zavitih oklepajev opredelimo posamezne lastnosti:

P { color: blue; }

V tem primeru je selektor HTML <p> značka in modra barva bo obveljala za ves tekst, ki je znotraj katerega koli <p> elementa. V primeru zunanjega CSS moramo CSS datoteko vključiti v HTML dokument z uporabo:

<link rel="stylesheet" type="text/css" href="path/to/file.css">