Pri pisanju slogovnih pravil je pomembno, da razumemo, kako v CSS določamo lastnosti izbranim elementom.

Pomni: CSS-pravilo je sestavljeno iz selektorja in bloka deklaracij. Vsaka deklaracija vsebuje lastnost in vrednost.

Osnovni primer

V preprostem primeru lahko za vse odstavke <p> določimo družino pisave, slog pisave in barvo besedila. Spodnje pravilo določa slog za vse elemente p v dokumentu:

p {
   font-family: Helvetica, sans-serif;
   font-style: italic;
   color: green;
}

Pravilo se nanaša na vse odstavke. Brskalnik bo najprej poskusil uporabiti pisavo Helvetica, če ta ni na voljo, pa bo uporabil drugo razpoložljivo pisavo iz skupine sans-serif. Lastnost font-style določa ležeč slog, lastnost color pa zeleno barvo besedila.

Naslov

To je prvi odstavek.

To je drugi odstavek.

Osnovna pravila

Vsako pravilo CSS je sestavljeno iz selektorja in bloka deklaracij. Selektor določa, na katere elemente se pravilo nanaša, blok deklaracij pa vsebuje eno ali več lastnosti z njihovimi vrednostmi.

selektor { 

                     lastnost_1: vrednost_1; 

                     lastnost_2: vrednost_2; 

                  }

Vsako deklaracijo zapišemo v obliki:

lastnost: vrednost;

Najprej zapišemo lastnost, nato dvopičje in za njim vrednost. Posamezne deklaracije navadno ločimo s podpičji. Če je v pravilu več deklaracij, jih zapišemo pregledno, vsako v svoji vrstici.

Lastnost font-family določa prednostni seznam imen pisav oziroma družin pisav. Če prva pisava ni na voljo, brskalnik poskusi z naslednjo.

Primerjave

Selektor in deklaracija

Pri branju CSS je koristno razlikovati med delom, ki izbere elemente, in delom, ki določi njihov videz.

Pojem	Vloga
selektor	določa, za katere elemente se pravilo uporabi
deklaracija	določa posamezno lastnost in njeno vrednost

Definiranje področja z `div` in `span`

Pri oblikovanju pogosto uporabljamo tudi elementa div in span. Element div je splošen bločni vsebnik, element span pa splošen vrstični vsebnik. Sama po sebi nimata posebnega pomena ali posebnega videza, dokler jima ne dodelimo slogov ali drugih lastnosti. Pogosto ju uporabljamo skupaj z atributoma class ali id.

Element	Osnovna vloga
`div`	splošen bločni vsebnik za večje dele vsebine
`span`	splošen vrstični vsebnik za manjše dele besedila ali vsebine

Pozor: Elementa div in span uporabljamo predvsem takrat, ko ustreznejši semantični element ni na voljo. Sama po sebi še ne ustvarita posebnega oblikovanja.

Priporočila

CSS-pravila zapisuj pregledno, z jasnim selektorjem in urejenimi deklaracijami.
Pri lastnosti font-family zapiši tudi rezervno splošno družino, na primer sans-serif.
Za večje dele vsebine uporabi div, za manjše dele besedila pa span.
Pri pisanju pravil dosledno uporabljaj dvopičja, podpičja in zavite oklepaje.

Pogoste napake

Zamenjevanje selektorja z deklaracijo.
Izpuščanje podpičij ali napačen zapis lastnosti in vrednosti.
Uporaba elementa span tam, kjer je primernejši bločni element.
Predpostavka, da bosta div in span sama po sebi že vidno oblikovala vsebino.

Če je slogovno pravilo zapisano napačno, ga brskalnik lahko delno ali v celoti prezre. Zato je pri CSS zelo pomembna natančna sintaksa.

Nazaj

Naprej