CSS sintaksa

Pri pisanju CSS je zelo pomembno, da dobro razumemo njegovo osnovno sintakso. Slogovna predloga je zgrajena iz pravil, vsako pravilo pa določa, kateri elementi bodo oblikovani in katere lastnosti jim bomo nastavili.

Osnovna pravila

Slogovna predloga je zgrajena iz niza pravil. Osnovna oblika pravila je:

Selektor določa, za katere elemente v dokumentu velja pravilo. V bloku deklaracij nato zapišemo eno ali več deklaracij. Vsaka deklaracija določa eno lastnost in njeno vrednost.

CSS sintaksa: selektor, deklaracija, lastnost in vrednost

Selektor je lahko oznaka HTML, lahko pa tudi razred, identifikator ali druga oblika izbire elementov v dokumentu.

Primerjave

Selektor in deklaracija

Ena in več deklaracij

Pravilo lahko vsebuje samo eno deklaracijo ali pa več deklaracij. Kadar želimo istemu selektorju določiti več lastnosti, posamezne deklaracije ločimo s podpičji.

body { color: gray; }

h2 { text-align: center; color: red; font-size: 1.2em; }

Zgledi

Kot primer si oglejmo spremembo barve pisave na sivo za celoten dokument:

body { color: gray; }

Nekatere vrednosti se pišejo brez narekovajev, na primer gray. Pri določenih vrednostih, predvsem pri imenih pisav z več besedami, pa uporabimo narekovaje:

p { font-family: "Trebuchet MS", Verdana, sans-serif; }

Če želimo selektorju prirediti več lastnosti, potem posamezne deklaracije ločimo s podpičjem:

h2 { text-align: center; color: red; font-size: 1.2em; }

Če želimo navesti več alternativnih vrednosti, na primer pri lastnosti font-family, jih ločimo z vejico. Brskalnik bo poskusil uporabiti prvo vrednost, ki jo pozna oziroma podpira.

pre { font-family: Consolas, "Lucida Console", Monaco, "Courier New", monospace; }

Zaradi boljše preglednosti je priporočljivo, da vsako deklaracijo pišemo v svojo vrstico:

h2 {
    text-align: center;
    color: red;
    font-size: 1.2em;
}

CSS sintaksa: blok v zavitih oklepajih in deklaracije, ki jih praviloma zaključimo s podpičjem

Priporočila

• Vsako pravilo zapisuj pregledno, z jasno ločenim selektorjem in blokom deklaracij.
• Pri več deklaracijah jih piši vsako v svojo vrstico.
• Zadnjo deklaracijo tudi zaključi s podpičjem, čeprav to ni vedno nujno.
• Pri lastnosti font-family navedi tudi rezervne vrednosti.

Pogoste napake

• Zamenjevanje selektorja z deklaracijo.
• Izpuščanje dvopičja med lastnostjo in vrednostjo.
• Izpuščanje podpičja med več deklaracijami.
• Neuporaba narekovajev pri imenih pisav z več besedami.