|
|
|
Vsak jezik mora imeti določeno strukturo!
Ključnih besed ne smete zapisati med narekovaje.
| Ključne besede | Primer |
/* to je ključna beseda */
blue; /* pomeni modro barvo */
/* to je niz znakov */
"blue";
|
/* barva črk naj bo modra */
color : blue;
/* vsebini dodaj besedico 'blue' */
content : "blue";
|
CSS je neobčutljiv na velikost znakov (ključnih besed ne ločuje glede na velikost znakov!
| Velikost znakov ni pomembna! |
color: red;
ColoR: RED;
|
Seveda pa to velja samo za elemente, ki jih nadzoruje CSS! Za XML vemo, da je občutljiv na velikost znakov, zato mora pri XML elementih to upoštevati tudi CSS!
| XML dokumet | CSS dokumet | Rezultat |
<test>
<ime>Matjaž</ime>
<IME>Beti</IME>
</test>
|
ime { color: red; }
IME { color: blue; }
|
Matjaž bi pisalo z RDEČO barvo,
Beti pa z modro!
|
Blok označujeta zavita oklepaja { }. Med njima je lahko
poljubno mnogo znakov in presledkov. Vsi oklepaji [], ()
pa morajo vedno nastopati v parih! Nizi znakov so omejeni z enojnimi
(' ') ali dvojnimi (" ")
narekovaji
Pravilo je sestavljeno iz selektorja in deklaracijskega bloka!
Deklaracijski blok se začne z zavitim oklepajem {
in konča z zavitim zaklepajem }, natanko tako, kot
je opisano v prejšnjem podpoglavju.
Selektor pa je ves tekst, ki se nahaja pred deklaracijskim blokom!
| Pravilo, selektor in deklaracijski blok |
ime { color: red; }
|-------------------| ==> pravilo
|---| ==> selektor
|---------------| ==> deklaracijski blok
|
Deklaracija je prazna ali pa je sestavljena iz lastnosti, ki ji sledi
dvopičje (:). Lastnosti pa so lahko v deklaracijskem
bloku tudi združene tako, da so ločene s podpičji (;):
| Pravila za isti selektor | so enakovredna pravilu z več lastnostmi |
ime { color: red }
ime { left : 10pt }
ime { font-style: italic }
|
ime {
color : red;
left : 10pt;
font-style: italic;
}
|
Lastnosti v enem deklaracijskem bloku morate ločiti s podpičji! Kako pa so lastnosti napisane (vse v eni vrstici, ali vsaka v svoji vrstici...), pa je popolnoma nepomembno. Res pa je, da je CSS dokument, v katerem so lastnosti zapisane posamezno po vrsticah, precej lažje brati!
CSS pozna dve vrsti komentarjev, ki se morata vedno začeti z določenim
nizom znakov in tudi končati z določenim nizom znakov. Uporabite lahko torej
klasične komentarje, ki se začno z znakoma /* in končajo
z znakoma */ ali pa komentarje v opisnih jezikih, ki se
začno z znaki <!-- in končajo z znaki -->.
Obe obliki sta med sabo enakovredni, tako da uporabljate ljubšo vam obliko.
Vedno pa velja, da je komentar VSE MED obema mejama!
| Komentarji |
ime { color: red } /* KLASIČNI KOMENTAR: .... */
ime { left : 10pt } <!-- SGML KOMENTAR : ....... -->
|
CSS pozna cela števila, realna števila in nize znakov! Števila lahko
imajo tudi predznak + oz. -. S temi osnovnimi podatkovnimi
tipi lahko tvorimo sestavljene podatkovne:
Dolžina je določena s številko in enoto. Dolžine so lahko absolutne ali pa relativne (glede na neko drugo dolžino). Relativne dolžine je lažje prilagajati med različnimi mediji (zaslonom in listom recimo). Relativne dolžinske enote so:
Absolutne dolžinske enote pa so neračunalničarjem bolj znane:
URL ali (Uniform Resource Locators) določajo nek naslov na internetu.
Določimo jih s funkcijo url(), kot je vidno na spodnjem
primeru:
| Slika za ozadje dokumenta nekje na internetu |
BODY { background: url("http://www.matjazev.net/neka_slika.gif") }
|
Barve lahko določite v obliki preddefiniranih ključnih besed ali kot numerični vrednost v RGB načinu. RGB (Red Green Blue) je poseben način zapisa barve, kjer barvo določa trojček vrednosti za rdečo, zeleno in modro barvo.
RGB lahko zapišete v obliki #rrggbb, kjer
rr predstavlja šestnajstiško vrednost za rdečo barvo, gg za zeleno in bb za modro.
Če pa vam šestnajstiška števila niso po godu, lahko uporabite tudi funkcijo
RGB(rdeča, zelena, modra), kjer barve zapišete v desetiških
vrednostih. Barvo torej določite z mešanjem osnovnih barv. Vsake barve je v mešanici
lahko do 255 enot (to je FF šestnajstiško)
| Primeri določanja barv |
ime { color: red } /* barva določena s ključno besedo */
ime { color: #AA0000 } /* barva določena z RGB */
ime { color: rgb(170, 0, 0) } /* barva določena z RGB */
|
CSS pozna še nekaj drugih podatkovnih tipov, ki pa jih tukaj ne bom omenjal, saj to ni popolen pregled CSS tehnologije, temveč samo njen vpogled; hitra šola pač!
|
|
|