11

Kaskadni stili ( CSS)Kaskadni stili ( CSS)

22

Zakaj služijo kaskadni Zakaj služijo kaskadni stilistili Kaskadni stili (CSS - Cascading Style Sheets) služijo za boljše Kaskadni stili (CSS - Cascading Style Sheets) služijo za boljše

ločevanje vsebine (hiperteksta) od predstavitve na spletu.ločevanje vsebine (hiperteksta) od predstavitve na spletu. Stili definirajo, kako prikazati Stili definirajo, kako prikazati HTML HTML elemente v brskalnikuelemente v brskalniku Uporabljajo se lahko v brskalnikih, ki prepoznajo dokumente Uporabljajo se lahko v brskalnikih, ki prepoznajo dokumente

po standardu HTML 4.0po standardu HTML 4.0 Stile lahko definiramo:Stile lahko definiramo:

– v zunanjem dokumentu s končnico .css,v zunanjem dokumentu s končnico .css,– v glavi dokumenta,v glavi dokumenta,– znoraj HTML označb (te definicije imajo najvišjo prioriteto in znoraj HTML označb (te definicije imajo najvišjo prioriteto in

prekrijejo ostale stile)prekrijejo ostale stile) Če stilov ne definiramo, se uporabijo privzeti stili za izpis v Če stilov ne definiramo, se uporabijo privzeti stili za izpis v

brskalniku.brskalniku. Poglejte si primer uporabe stilov na Poglejte si primer uporabe stilov na

http://www.w3schools.com/css/demo_default.htmhttp://www.w3schools.com/css/demo_default.htm Poglejte st tudi Poglejte st tudi CSS Zen GardenCSS Zen Garden, kjer lahko vidite kaj vse se , kjer lahko vidite kaj vse se

da narediti s kaskadnimi stili.da narediti s kaskadnimi stili.

33

Dodatni viri za CSSDodatni viri za CSS

Poglejte si še dodatne vire, od koder boste Poglejte si še dodatne vire, od koder boste lahko izvedeli še več o CSS:lahko izvedeli še več o CSS:http://www.w3schools.com/css/default.asphttp://www.w3schools.com/css/default.asp http://zaversnik.fmf.uni-lj.si/Gradiva/CSS/http://zaversnik.fmf.uni-lj.si/Gradiva/CSS/ http://www.mezzoblue.com/zengarden/resources/http://www.mezzoblue.com/zengarden/resources/

Standard CSS 2.1 Candidate Release najdete naStandard CSS 2.1 Candidate Release najdete nahttp://www.w3.org/TR/2007/CR-CSS21-20070719/http://www.w3.org/TR/2007/CR-CSS21-20070719/

Seznam najpogosteje uporabljenih CSS Seznam najpogosteje uporabljenih CSS lastnosti, izpisanih na eni A4 strani najdete na:lastnosti, izpisanih na eni A4 strani najdete na:

http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-shehttp://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/et/

44

Prenosljivost Prenosljivost hipertekstovnih hipertekstovnih dokumentovdokumentov Vsi stili CSS ne delujejo v vseh Vsi stili CSS ne delujejo v vseh

brskalnikih, zato spletno stran, ki brskalnikih, zato spletno stran, ki jo naredite preizkusite v vseh jo naredite preizkusite v vseh širše uporabljenih spletnih širše uporabljenih spletnih brskalnikih (IE, Firefox, Opera, brskalnikih (IE, Firefox, Opera, Safari), preizkusite pa ju tudi s Safari), preizkusite pa ju tudi s pomočjo pomočjo W3C CSS W3C CSS validatorjavalidatorja..

55

Oblika straniOblika strani

Enako oblikovno podobo lahko Enako oblikovno podobo lahko ustvarimo z večimi različnimi ustvarimo z večimi različnimi kombinacijami stilov.kombinacijami stilov.

66

Slovnica CSSSlovnica CSS

Slovnica definicije kaskadnega stila je naslednja:Slovnica definicije kaskadnega stila je naslednja:selektor { {lastnost: : vrednost; ...} } SSelektor določa, katerim elementomelektor določa, katerim elementom HTML (značkam) HTML (značkam) predpisujemo predpisujemo oblikovne lastnosti, ki jih naštejemo v zavitih oklepajih. oblikovne lastnosti, ki jih naštejemo v zavitih oklepajih. PPosamezne pare osamezne pare lastnostilastnosti in vrednosti ločimo s podpičji, za vsakim imenom lastnosti pa in vrednosti ločimo s podpičji, za vsakim imenom lastnosti pa napišemo dvopičje. Pogosto je selektor kar ime elementa, kar pomeni, da napišemo dvopičje. Pogosto je selektor kar ime elementa, kar pomeni, da predpisana oblika velja za vse pojavitve tega elementa. predpisana oblika velja za vse pojavitve tega elementa.

PrimeriPrimeribody {color: black} p {font-family: "sans serif"; font: italic small-caps 900 12px arial} p {text-align:center; color:red}

p { text-align: center; color: black; font-family: arial;

}

h1,h2,h3,h4,h5,h6 { color: green }

77

Primer datoteke z Primer datoteke z definicijo stilovdefinicijo stilovh1,h2,h3 { font-family: arial, "sans serif"; }p,table,li,address { font-family: arial, "sans serif"; margin-left: 15pt; } p,li,th,td { font-size: 80%; } th { background-color:#FAEBD7} body { background-color: #ffffff; }

p{font: italic small-caps 900 12px arial;}

88

Primer definicije stilov v Primer definicije stilov v zunanji datotekizunanji datoteki

Primer definicije v glavi HTML datoteke:Primer definicije v glavi HTML datoteke:

<head> <link rel="stylesheet" type="text/css"

href="style1.css"></head>

Primer datoteke style1.css:Primer datoteke style1.css:hr {color: sienna} p {margin-left: 20px}

body {background-image:url("images/back40.gif")}

99

NasvetNasvet

Uporabljajte zunanje CSS predloge, saj Uporabljajte zunanje CSS predloge, saj jih lahko ponovno uporabite v različnih jih lahko ponovno uporabite v različnih vsebinskih hipertekstovnih dokumentih.vsebinskih hipertekstovnih dokumentih.

Uporaba zunanjih CSS predlog v različnih Uporaba zunanjih CSS predlog v različnih HTML dokumentih pohitri nalaganje HTML dokumentih pohitri nalaganje spletnih strani, saj brskalnik naloži CSS spletnih strani, saj brskalnik naloži CSS predlogo samo enkrat in jo uporablja pri predlogo samo enkrat in jo uporablja pri prikazu vsebine vseh spletnih strani, ki prikazu vsebine vseh spletnih strani, ki to predlogo uporabljajo.to predlogo uporabljajo.

1010

Primer definicije stilov Primer definicije stilov v glavi datoteke HTMLv glavi datoteke HTML

<head> <style type="text/css"> hr {color: sienna}

p {margin-left: 20px} body {background-image:url("images/back40.gif")}

</style> </head>

1111

Primer definicije stila v Primer definicije stila v glavi dokumenta HTML glavi dokumenta HTML pri starejših brskalnikih pri starejših brskalnikih

<head> <style type="text/css"> <!– hr {color: sienna}

p {margin-left: 20px} body {background-image:url("images/back40.gif")}

--> </style> </head>

Pri starejših brskalnikih morate nujno uporabiti Pri starejših brskalnikih morate nujno uporabiti komentar pri definiciji stilov, saj vam drugače komentar pri definiciji stilov, saj vam drugače izpiše vsebino definicije.izpiše vsebino definicije.

1212

Uporaba stila v Uporaba stila v označbah HTMLoznačbah HTML

<p style="color: sienna; margin-left: 20px"> To je odstavek

</p>

<p style="font-family: arial, 'lucida console', sans-serif"> To je odstavek

</p>

1313

NasvetNasvet

Ne uporabljajte stilov v značkah Ne uporabljajte stilov v značkah HTML, saj s tem preveč HTML, saj s tem preveč povezujete vsebino z obliko. Če povezujete vsebino z obliko. Če boste želeli spremeniti obliko, boste želeli spremeniti obliko, boste morali popravljati značke boste morali popravljati značke HTML v vsebini.HTML v vsebini.

1414

Komentar v Komentar v kaskadnem stilukaskadnem stilu Primer kaskadnega stila s komentarjem:Primer kaskadnega stila s komentarjem:

/* Komentar pred definicijo stila */ p { text-align: center; /* Komentar v definiciji stila */ color: black; font-family: arial ; }

1515

Dedovanje kaskadnih Dedovanje kaskadnih stilovstilov Primer stila definiranega v zunanji datoteki:Primer stila definiranega v zunanji datoteki:h3 { color: red; text-align: left; font-size: 8pt }

Primer stila v glavi dokumenta:Primer stila v glavi dokumenta:h3 { text-align: right; font-size: 20pt }

Vrednosti, ki jih dobijo vse označbe Vrednosti, ki jih dobijo vse označbe <h3><h3> so: so:color: red; text-align: right; font-size: 20pt

Iz stila, definiranega v zunanji datoteki se podeduje: Iz stila, definiranega v zunanji datoteki se podeduje: color: red; Stil v glavi dokumenta prekrije ostale Stil v glavi dokumenta prekrije ostale lastnosti stila, definiranega v zunanji datoteki: lastnosti stila, definiranega v zunanji datoteki: text-align: right; font-size: 20pt

1616

HTML element <div>HTML element <div>

<div> <div> je bločni element, ki ga uporabljamo za je bločni element, ki ga uporabljamo za oblikovanje enega ali več bločnih in vrstičnih oblikovanje enega ali več bločnih in vrstičnih elementov znotraj sekcije, ki jo oklepa.elementov znotraj sekcije, ki jo oklepa.

Primer:Primer:V tem besedilu smo uporabili div:

<div style="color:#FF0000;"> <h1> To je poglavje znotraj <i>div sekcije</i>

</h1> <p>To je odstavek znoraj <strong>div </strong>

sekcije.</p></div>

1717

HTML element <span>HTML element <span>

<<spanspan> > je vrstični element, ki ga uporabljamo za oblikovanje enega je vrstični element, ki ga uporabljamo za oblikovanje enega ali več vrstičnih elementov znotraj sekcije, ki jo oklepa.ali več vrstičnih elementov znotraj sekcije, ki jo oklepa.

Primer:Primer:<p>To je odstavek <span style="color:#0000FF;">v katerem smo uporabili <strong>span element. </strong> </span> Ta del odstavka ne uporablja <i>span elementa </i>.</p> <p> <span style="color:#00DD45;"> To je še en odstavek, v katerem imamo vse njegove vrsticne

elemente znotraj <strong> span elementa .</strong> </span></p>

1818

Uporaba lastnosti Uporaba lastnosti ""class class "" pri selektorju pri selektorju Kateremukoli elementu lahko predpišemo lastnost Kateremukoli elementu lahko predpišemo lastnost ““classclass””, katere vrednost je , katere vrednost je

ime razreda, ki mu element pripada. Ime si lahko poljubno izberemo, da bomo ime razreda, ki mu element pripada. Ime si lahko poljubno izberemo, da bomo kasneje lažje brali napisano kodo, pa je priporočljivo, da se da že iz imena kasneje lažje brali napisano kodo, pa je priporočljivo, da se da že iz imena razreda sklepati, kakšni elementi mu pripadajo. Posamezen element lahko razreda sklepati, kakšni elementi mu pripadajo. Posamezen element lahko pripada tudi več kot enemu razredu. To dosežemo tako, da za vrednost pripada tudi več kot enemu razredu. To dosežemo tako, da za vrednost lastnosti lastnosti ““classclass”” naštejemo več imen razredov, ki jih ločimo s presledki naštejemo več imen razredov, ki jih ločimo s presledki (presledek ne more nastopati v imenu razreda). (presledek ne more nastopati v imenu razreda).

Primer dvojne definicije HTML označbe Primer dvojne definicije HTML označbe <p>:<p>:p.desno {text-align: right} p.centrirano {text-align: center}

Z lastnostjo “class” se pri elementu odločimo, katero definicijo oblike za ta Z lastnostjo “class” se pri elementu odločimo, katero definicijo oblike za ta element bomo uporabili:element bomo uporabili:

<p class= ""desno"> Ta odstavek je desno poravnan.

</p>

<p class= ""centrirano"> Ta odstavek je izpisan centrirano.

</p>

Uporabimo lahko le eno definicijo selektorja class v eni HTML označbi.Uporabimo lahko le eno definicijo selektorja class v eni HTML označbi.

1919

Uporaba lastnosti Uporaba lastnosti class pri HTML class pri HTML elementihelementih Če ne nastopa pri elementu lastnost Če ne nastopa pri elementu lastnost

“class”, se uporabi privzeta oblika za ta “class”, se uporabi privzeta oblika za ta element.element.

Primer:Primer:p {font-family: courier}p.sansserif {font-family: sans-serif}

<p>To je odstavek v fontu curier.</p><p class="sansserif">To je odstavek v

fontu sansserif.</p>

2020

Izpuščanje imena HTML Izpuščanje imena HTML označbe pri definiciji označbe pri definiciji kaskadnega stilakaskadnega stilaPrimer:Primer:.centriraj {text-align: center}

Če izpustimo ime HTML označbe pri definiciji Če izpustimo ime HTML označbe pri definiciji kaskadnega stila, se ta definicija uporablja pri vseh kaskadnega stila, se ta definicija uporablja pri vseh HTML označbah skupaj s selektorjem “class”. HTML označbah skupaj s selektorjem “class”. Poglejmo si dva primera:Poglejmo si dva primera:

<h1 class="centriraj"> Ta naslov je centriran.

</h1> <p class="centriraj">

Ta odstavek je centriran.</p>

2121

Uporaba oznak (label) Uporaba oznak (label) v kaskadnih stilihv kaskadnih stilih Kadar želimo nastaviti oblikovne lastnosti samo za točno določeno Kadar želimo nastaviti oblikovne lastnosti samo za točno določeno

pojavitev nekega elementa, imamo dve možnosti. pojavitev nekega elementa, imamo dve možnosti. AliAli to naredimo pri to naredimo pri samem elementu z uporabo lastnosti samem elementu z uporabo lastnosti ““stylestyle””, vendar , vendar toto ni ni priporočljivo, ker se vsebina in oblika preveč mešata. Druga možnost priporočljivo, ker se vsebina in oblika preveč mešata. Druga možnost je, da izbrano pojavitev elementa posebej poimenujemo, kar storimo je, da izbrano pojavitev elementa posebej poimenujemo, kar storimo tako, da elementu definiramo lastnost tako, da elementu definiramo lastnost idid, katere vrednost je , katere vrednost je (enolična) oznaka tega elementa. Oznako si lahko poljubno izberemo, (enolična) oznaka tega elementa. Oznako si lahko poljubno izberemo, paziti pa moramo, da ne bodo različni elementi imeli enakih oznak. paziti pa moramo, da ne bodo različni elementi imeli enakih oznak. Primer oznake:Primer oznake:

p#para1 { text-align: center; color: red }

Stil se uporabi, vsepovsod, kjer naletimo na oznako para1 v HTML Stil se uporabi, vsepovsod, kjer naletimo na oznako para1 v HTML označbi označbi <p><p>

<p id="para1">Tekst v odstavku</p>

Primer oznake, ki se uporabi v vseh elementih HTML z oznako Primer oznake, ki se uporabi v vseh elementih HTML z oznako zeleno ::

*#zeleno {color: green}V dokumentu HTML se na to oznako sklicujemo, kot je podano na primerih:

<h1 id="zeleno">Naslov</h1> <p id="zeleno">Odstavek</p>

2222

Skupine elementov Skupine elementov HTML z enakimi HTML z enakimi lastnostmilastnostmi Večim elemetom, razredom ali enotam lahko Večim elemetom, razredom ali enotam lahko

predpišemo iste oblikovne lastnosti v enem predpišemo iste oblikovne lastnosti v enem koraku, tako da njihove selektorje naštejemo koraku, tako da njihove selektorje naštejemo enega za drugim, pri čemer jih ločimo z vejicami. enega za drugim, pri čemer jih ločimo z vejicami. Za vejico zaradi preglednosti običajno naredimo Za vejico zaradi preglednosti običajno naredimo še presledek. V spodnjem primeru nastavimo še presledek. V spodnjem primeru nastavimo rdečo rdečo barvo in centriramo besedilo barvo in centriramo besedilo za vse za vse glavne nasloveglavne naslove ( h1) ( h1), , elemente, ki uporabljajo elemente, ki uporabljajo razred “centriraj” in elemente z oznako “opis”razred “centriraj” in elemente z oznako “opis”. . V drugem primeru vsem elementom nastavimo V drugem primeru vsem elementom nastavimo desno poravnavo besedila in modro barvodesno poravnavo besedila in modro barvo

Primera:Primera:h1, .centriraj, #opis { text-align: center; color: red } * { text-align: right; color: blue }

2323

Drevo HTML označbDrevo HTML označb

<html> <head> <title>Moja domaca stran</title> </head> <body> <h1>Moja domaca stran</h1> <p>Pozdravljeni na moji domaci strani. Moji priljubljeni glasbeniki so:

</p> <ul> <li> Elvis Presley <li> Zoran Predin <li> Eric Clapton </ul> </body></html>

• html je starš od head in body

• head in body sta otroka od html

• p je predhodnik od ul

• ul je naslednik od p

• h1, p in ul so sorodniki

• li je potomec od body

• body je prednik od li

2424

DefinicijeDefinicije

Element HTML vsebuje začetno in končno Element HTML vsebuje začetno in končno označbo in vsebino. Nekateri elementi nimajo označbo in vsebino. Nekateri elementi nimajo vsebine, zato jim pravimo prazni ( empty) vsebine, zato jim pravimo prazni ( empty) elementi. Vsebina je lahko tekst, povezava, elementi. Vsebina je lahko tekst, povezava, vgnezdeni elementi ali kombinacija vseh vgnezdeni elementi ali kombinacija vseh treh. Če element vsebuje vgnezdene treh. Če element vsebuje vgnezdene elemente, se imenuje elemente, se imenuje staršstarš (parent) od teh (parent) od teh elementov. Elementi, ki so vgnezdeni v elementov. Elementi, ki so vgnezdeni v starša, se imenujejo starša, se imenujejo otroci otroci (children) ali (children) ali neposredni neposredni potomci potomci (descendant) tega (descendant) tega starša. Starš je neposredni starša. Starš je neposredni prednik prednik (ancestor ) svojih otrok. (ancestor ) svojih otrok.

2525

Definicije - Definicije - nadaljevanjenadaljevanje Dokumentovo drevo (dDokumentovo drevo (document tree ocument tree ))

Drevo elementov HTML, ki jih dobimo, če razčlenimo dokument HTML se imenuje Drevo elementov HTML, ki jih dobimo, če razčlenimo dokument HTML se imenuje dokumentovo drevodokumentovo drevo. Vsak element v dokumentovem drevesu ima natanko enega . Vsak element v dokumentovem drevesu ima natanko enega starša. Izjema je starša. Izjema je koren drevesa (root),koren drevesa (root), ki nima staršev. ki nima staršev.

Otrok (child)Otrok (child)Element A imenujemo Element A imenujemo otrok otrok elementa B samo v primeru, če je B starš od A. elementa B samo v primeru, če je B starš od A.

Potomec (descendant) Potomec (descendant) Element A imenujemo Element A imenujemo potomecpotomec elementa B, če je: elementa B, če je:1.1. element A otrok od B ali če je element A otrok od B ali če je 2.2. element A otrok elementa C, ki je potomec od B. element A otrok elementa C, ki je potomec od B.

Prednik (aPrednik (ancestorncestor)) – Element A se imenuje Element A se imenuje prednikprednik elementa B samo, če je B potomec elementa A. elementa B samo, če je B potomec elementa A.

Sorodnik (sSorodnik (siblingibling)) – Elementi, ki si zaporedno sledijo in niso med seboj vgnezdeni, se imenujejo sorodniki. Elementi, ki si zaporedno sledijo in niso med seboj vgnezdeni, se imenujejo sorodniki.

Element A se imenuje Element A se imenuje sorodniksorodnik od elementa B, samo takrat, če ima skupaj z od elementa B, samo takrat, če ima skupaj z elementom B istega starša. Element A je elementom B istega starša. Element A je predhodni sorodnik (predhodni sorodnik (preceding siblingpreceding sibling)) elementa B, če se nahaja v dokumentnem drevesu pred elementom B. Element B je elementa B, če se nahaja v dokumentnem drevesu pred elementom B. Element B je naslednji sorodnik (naslednji sorodnik (following siblingfollowing sibling) ) elementa A, če se v dokumentnem drevesu elementa A, če se v dokumentnem drevesu nahaja za elementom A. nahaja za elementom A.

Predhodni element (pPredhodni element (preceding elementreceding element)) – Element A se imenuje Element A se imenuje predhodni elementpredhodni element od elementa B , če je prednik od B ali od elementa B , če je prednik od B ali

predhodni sorodnik od B. predhodni sorodnik od B. Naslednji element (fNaslednji element (following elementollowing element))

– Element A se imenuje Element A se imenuje naslednji elementnaslednji element od B če je B predhodni element od A. od B če je B predhodni element od A.

2626

VerigeVerige

Različne osnovne selektorje z omejitvami Različne osnovne selektorje z omejitvami lahko povežemo v poljubno dolgo verigo, pri lahko povežemo v poljubno dolgo verigo, pri čemer sosednja člena povežemo z enim izmed čemer sosednja člena povežemo z enim izmed spodnjih treh operatorjevspodnjih treh operatorjev ( presledek, > +) ( presledek, > +). . Okoli operatorjev Okoli operatorjev >> in in ++ lahko zaradi lahko zaradi preglednosti pišemo presledke, niso pa preglednosti pišemo presledke, niso pa obvezni. obvezni. – EE FF tiste pojavitve tiste pojavitve elementa Felementa F, ki so , ki so

potomcipotomci pojavitev pojavitev elementa E,elementa E,– EE > > FF tiste pojavitve tiste pojavitve elementa Felementa F, ki so, ki so

otrociotroci pojavitev pojavitev elementa E,elementa E, – EE + + FF tiste pojavitve tiste pojavitve elementa Felementa F, ki so , ki so

naslednji sorodnikinaslednji sorodniki pojavitv pojavitvee elementa E (element E je elementa E (element E je predhodni sorodnikpredhodni sorodnik elementa F). elementa F).

2727

PrimerPrimer

<html> <head> <style type="text/css"> h1 b { font-style: italic; color:red } h1 + h2 { margin-left: 15mm; color:blue} body > p { font-weight: bold; font-size:10pt; color:green} div > p {text-indent:25px} .vprasanje b { font-style: italic } a img { border: none } </style> </head> <body> <h1>To je <b>poudarjena</b> beseda v naslovu - selektor - h1 b { font-style: italic; color:red }</h1> <h2> Podpoglavje - selektor h1 + h2 { margin-left: 15mm; color:blue} </h2> <p> To je otrok elementa body - selektor body > p { font-weight: bold; font-size:10pt; color:green}</p> <div> <p class="vprasanje">To je <b>poudarjena</b> beseda v vprašanju - selektor .vprasanje b { font-

style: italic } in div > p {text-indent:25px} </p> <p>To pa je <b>poudarjena</b> beseda v navadnem odstavku - selektor div > p {text-

indent:25px}</p> <p>Aktivna slika - selektor a img { border: none } in div > p {text-indent:25px}:

<a href="http://www.feri.uni-mb.si"><img src="smiley.gif" alt="Smeško"></a> </p>

</div> </body></html>

2828

Primer uporabe Primer uporabe navideznih razredov navideznih razredov (pseudo class) definicije(pseudo class) definicije

Primer 1:Primer 1: a.zeleno:visited {color: #00FF00} <a class= "zeleno" href="http://www.feri.uni-mb.si">FERI</a>

Povezavo, ki smo jo že kliknili (visited), bo izpisal zeleno.Povezavo, ki smo jo že kliknili (visited), bo izpisal zeleno.

Primer 2:Primer 2: div > p:first-child { text-indent:25px }

Ta selektor bo vplival na prvi odstavek znotraj Ta selektor bo vplival na prvi odstavek znotraj <div><div>::<div> <p> Ta odstavek se bo obojestransko poravnal. </p> <p> Ta odstavek se ne bo poravnal. </p> </div>

2929

Primer definicije Primer definicije navideznega (pseudo) navideznega (pseudo) elementaelementaPrimer 1:Primer 1:div:first-letter { color: #ff0000; font-size:xx-large }

Prva črka za Prva črka za <div><div> HTML označbo se izpiše veliko in rdeče. HTML označbo se izpiše veliko in rdeče.

Primer 2:Primer 2:p {font-size: 12pt} p:first-line {color: #0000FF; font-variant: small-caps}

<<p>p> Prva vrstica odstavka se izpiše z velikimi črkami in modro, Prva vrstica odstavka se izpiše z velikimi črkami in modro, ostale vrstice se izpišejo normalno ostale vrstice se izpišejo normalno </p></p>

3030

Primeri Primeri navideznih navideznih razredov razredov in in navideznih navideznih elementovelementov<html>

<head> <style type="text/css"> a.zeleno:visited {color: #00FF00} div > p:first-child { text-indent:25px } div:first-letter { color: #ff0000;font-size:xx-large} p {font-size: 12pt} .prva:first-line {color: #0000FF; font-variant: small-caps} </style> </head> <body> <p>Povezavo, ki smo jo že kliknili (visited - selektor a.zeleno:visited {color: #00FF00}), bo izpisal zeleno.

</p> <a class= "zeleno" href="http://www.feri.uni-mb.si">FERI</a> <p>Selektor div > p:first-child { text-indent:25px } bo vplival na prvi odstavek znotraj div:</p> <div> <p> Prvi odstavek se bo obojestransko poravnal. </p> <p> Drugi odstavek se ne bo poravnal. </p> </div> <div>Prva crka za div (selektor div:first-letter { color: #ff0000;font-size:xx-large}) HTML oznacbo se

izpiše veliko in rdece. </div> <p class=prva> Prva vrstica odstavka ( selektor .prva:first-line {color: #0000FF; font-variant: small-

caps}) se izpiše z velikimi crkami in modro, ostale vrstice se izpišejo normalno. </p> </body></html>

3131

OmejitveOmejitve

Omejitve, ki se pričnejo z dvopičjem, pa določajo, v Omejitve, ki se pričnejo z dvopičjem, pa določajo, v kakšnem stanju mora biti elementkakšnem stanju mora biti element:: – :link:link element je še neobiskana povezavaelement je še neobiskana povezava– :visited:visited element je že obiskana povezava element je že obiskana povezava – :hover:hover nad elementom je miškin kurzor nad elementom je miškin kurzor – :active:active element je aktiven (uporabnik je element je aktiven (uporabnik je

pritisnil tipko na miški in je pritisnil tipko na miški in je še ni še ni spustil) spustil)

– :focus:focus element ima fokus element ima fokus – ::langlang elementelement HTML vsebuje kodo v HTML vsebuje kodo v

specificiranem specificiranem jeziku (npr :Lang(C)jeziku (npr :Lang(C) vsebina vsebina elementa elementa je v je v jeziku C jeziku C ))

– :first-child:first-child element je prvi neposredni potomec element je prvi neposredni potomec nekega drugega elementa nekega drugega elementa

– ::firstfirst--letterletter definira stil prvi črki, ki sledi HTML definira stil prvi črki, ki sledi HTML elementuelementu

– :first-line:first-line deffinira stil prvi vrstici, ki sledi deffinira stil prvi vrstici, ki sledi elementu elementu HTMLHTML

– :before:before doda vsebino pred element HTMLdoda vsebino pred element HTML– :after:after do vsebino po zaključku elementa HTMLdo vsebino po zaključku elementa HTML

3232

Omejitve - primeriOmejitve - primeri

a:link { color: blue }a:visited { color: magenta }a:hover { text-decoration: underline }a:active { background-color: yellow }a:focus {color: #00FF00} –ne deluje v IEa:first-child {text-decoration:none}q:lang(no) {quotes: "~" "~"} – ne deluje v IEdiv > p:first-child {text-indent:25px}p:first-letter {color: #ff0000;font-size:xx-large}p:first-line {color: #ff0000; font-variant: small-caps}h1:before{content: url(smiley.gif)} – ne deluje v IEh1:after {content: url(smiley.gif)} – ne deluje v IE

3333

Primer gradnje drop-down menuja s Primer gradnje drop-down menuja s pomočjo navideznega razreda hoverpomočjo navideznega razreda hover

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Drop-Down Menu </title> <style type = "text/css"> body { font-family: arial, sans-serif } div.menu { font-weight: bold; color: white; border: 2px solid #225599; text-align: center; width: 10em; background-color: #225599 } div.menu:hover a { display: block } div.menu a { display: none; border-top: 2px solid #225599; background-color: white; width: 10em; text-decoration: none; color: black } div.menu a:hover { background-color: #dfeeff } </style> </head> <body> <div class = "menu">Kaj vas zanima? <a href = "#">Osnovni podatki</a> <a href = "#">Novice</a> <a href = "#">Zabava</a> <a href = "#">Blog</a> <a href = "#">Pišite nam</a> </div> </body> </html>

3434

CSS enoteCSS enote

Absolutne enote: Absolutne enote: – mmmm - milimeter - milimeter – cmcm - centimeter (1cm = 10mm) - centimeter (1cm = 10mm) – inin - inch (1in = 2.54cm) - inch (1in = 2.54cm) – ptpt - point (72pt = 1in) - point (72pt = 1in) – pcpc - pica (1pc = 12pt) - pica (1pc = 12pt)

Relativne enote: Relativne enote: – emem - velikost trenutne pisave - velikost trenutne pisave(2em je dvakratna velikost fonta (font-size)(2em je dvakratna velikost fonta (font-size) – exex - višina črke - višina črke xx v trenutni pisavi v trenutni pisavi (polovica velikosti fonta (font-size)(polovica velikosti fonta (font-size)

Zaslonske enote: Zaslonske enote: – pxpx - pixel (običajno je 96px = 1in) - pixel (običajno je 96px = 1in)

Procenti ( 74%, -47.72%, +8.33%)Procenti ( 74%, -47.72%, +8.33%)

Primeri:0 1em 2cm 15.3pt 0.362in 1.2ex 600px -12.5mm -47pc

3535

BarveBarve

3636

Barvni krogBarvni krog

primarne barve - rdeča, rumena, modra; sekundarne barve - barve, ki so sestavljene iz dveh primarnih (npr: oranžna); terciarne barve - barve, ki so sestavljene iz ene primarne in ene sekundarne barve (npr: siva, svetlo vijolična...);Nasprotne barve (komplementarne barve) - (npr: modra- oranžna ali rdeča-zelena);tople barve - rdeče, oranžne, rumene, rjave;mrzle barve - modre, zelene, škrlatne; nevtralne barve - bele, rjave, bež; močne barve - intezivne barve, ki niso razrečene s črno, belo ali komplementarno barvo;blede barve - manj intezivne barve zaradi mešanja z belo, črno ali komplementarno barvo ;

3737

Lastnosti barvLastnosti barv

Komplementarnost barveKomplementarnost barve

Nasičenost barveNasičenost barve

3838

Lastnosti barvLastnosti barv

KontrastKontrast

Svetlost barveSvetlost barve

3939

Vpliv barve okoliceVpliv barve okolice

4040

Katero besedilo lažje Katero besedilo lažje preberete?preberete?

Vrstni red svetlosti najuporabnejših barv je: bela, rumena, svetlomodra (cyan), zelena, škrlatna (magenta), rdeča, modra in črna. Na temnem ozadju so primerne bela, rumena, svetlomodra in zelena. Na svetlem ozadju so najprimernejše škrlatna, rdeča, modra in črna.

Med ospredjem in ozadjem naj bo razmerje v kontrastu vsaj 3:1, da so podrobnosti dovolj dobro razvidne.

4141

Barvne kombinacije za Barvne kombinacije za svetovni spletsvetovni splet

4242

Barve v stilih CSSBarve v stilih CSS

Barve lahko določimo na več načinovBarve lahko določimo na več načinov::– Lahko jih zapišemoLahko jih zapišemo z besedo z besedo (angleška imena barv). XHTML (angleška imena barv). XHTML

pozna 16 imen (HTML tolmači sicer podpirajo veliko več imen pozna 16 imen (HTML tolmači sicer podpirajo veliko več imen vendar, če želimo, da je dokument veljaven, lahko uporabimo le vendar, če želimo, da je dokument veljaven, lahko uporabimo le spodnjih šestnajst).spodnjih šestnajst). Primer: Primer: background: red

– Lahko jih zapišemo kot RGB (Red Green Blue) vrednost. Oblika Lahko jih zapišemo kot RGB (Red Green Blue) vrednost. Oblika zapisa zapisa #rrggbb#rrggbb (šes (šesttnajstinajstišški zapis za posamezne barve). ki zapis za posamezne barve).

Primer: Primer: background: #FF0000

– Uporabimo lahko tudi funkcijo Uporabimo lahko tudi funkcijo RGB(rdeča, zelena, modra)RGB(rdeča, zelena, modra) (barve zapisane v desetiških vrednostih)(barve zapisane v desetiških vrednostih). . Število vseh Število vseh kombinacij (256 x 256 x 256) več kot 16 mio.kombinacij (256 x 256 x 256) več kot 16 mio.Primer:Primer:absolutne vrednosti barv: absolutne vrednosti barv: background: rgb(220,30,80)"ali barve definiramo v procentih:ali barve definiramo v procentih: background: rgb(20%,40%,40%)

4343

Osnovne barve v Osnovne barve v XHTMLXHTML XHTML podpira naslednje barve:XHTML podpira naslednje barve:

Več o vseh barvah, ki jih podpira HTML, najdete na: Več o vseh barvah, ki jih podpira HTML, najdete na: http://www.w3schools.com/html/html_colornames.asphttp://www.w3schools.com/html/html_colornames.asp

4444

Primer nijans modre Primer nijans modre barvebarve

4545

Primer mešanja barve Primer mešanja barve (rdeča in modra)(rdeča in modra)

Več o mešanju barv najdete na http://www.w3schools.com/html/html_colorsfull.asp

4646

Barva in Barva in ozadjeozadje

colorcolor barva besedila barva besedila background-colorbackground-color barva ozadja barva ozadja background-imagebackground-image slika v ozadju slika v ozadju background-attachmentbackground-attachment premikanje slike v ozadju premikanje slike v ozadju background-repeatbackground-repeat način tlakovanja ozadja način tlakovanja ozadja background-positionbackground-position položaj osnovne položaj osnovne slike pri slike pri

tlakovanju tlakovanju ozadja ozadja backgroundbackground bližnjica za vse bližnjica za vse

lastnosti ozadjalastnosti ozadja Primeri:Primeri:background: #00ff00 url('smiley.gif') no-repeat fixed center;body {background-color: yellow}h1 {background-color: #00ff00}h2 {background-color: transparent}p {background-color: rgb(250,0,255)}body {background-image: url('smiley.gif');

background-repeat: no-repeat; background-position: 50px 100px; }

4747

PisavaPisava

font-familyfont-family pisava pisava font-sizefont-size velikost pisave velikost pisave font-weightfont-weight krepkost pisave krepkost pisave font-stylefont-style nagnjenost pisave nagnjenost pisave font-variantfont-variant male velike črke male velike črke line-heightline-height višina vrstice višina vrstice fontfont bližnjica za vse lastnosti bližnjica za vse lastnosti

pisavepisave Primeri:Primeri:font: italic small-caps 900 12px arialh1 {font-size: 150%}p.sansserif {font-family: sans-serif}h1 {font-style: italic}p.poudarjeno {font-weight: bold}

4848

NasvetNasvet

V vseh hipertekstovnih dokumentih na V vseh hipertekstovnih dokumentih na vaši spletni strani uporabljajte za vaši spletni strani uporabljajte za odstavke (p), div-e, span-e in poglavja odstavke (p), div-e, span-e in poglavja ( h1 – h6) CSS stile. V stilu definirajte ( h1 – h6) CSS stile. V stilu definirajte pisavo, njeno velikost, nagnjenost, pisavo, njeno velikost, nagnjenost, poudarjenost in barvo. Ne oblikujte poudarjenost in barvo. Ne oblikujte določenih elementov drugače, razen določenih elementov drugače, razen če želite da izstopajo.če želite da izstopajo.

Besedilo na spletni strani naj bo Besedilo na spletni strani naj bo čitljivo. Pisava naj ne bo premajhna ali čitljivo. Pisava naj ne bo premajhna ali prevelika. Uporabljajte standardne prevelika. Uporabljajte standardne pisave ( Arial, Times, Verdana...)pisave ( Arial, Times, Verdana...)

4949

BesediloBesedilo

text-decorationtext-decoration okraski na besediluokraski na besedilutext-transformtext-transform pretvorba besedila pretvorba besedila text-aligntext-align poravnava besedila poravnava besedila text-itext-inndentdent zamik prve vrstice zamik prve vrstice letter-spacingletter-spacing razmik med znaki razmik med znaki line-line-heightheight določanje razmika med vrsticamidoločanje razmika med vrsticamiword-spacingword-spacing razmik med razmik med besedamibesedamiwhite-spacewhite-space način obravnavenačin obravnave belih znakov belih znakov

(presledki (presledki tabulatorji, skoki v tabulatorji, skoki v novo vrstico) novo vrstico)

vertical-alignvertical-align navpična poravnavanavpična poravnava

Primeri:Primeri:h1 {text-decoration: underline; text-align: left; letter-spacing: -3px;

line-height: 90%}h4 {letter-spacing: 0.5cm; text-indent: 1cm; text-transform: uppercase;

word-spacing: 30px}p.veliko {line-height: 200%; direction: rtl; white-space: nowrap}

5050

Robovi (border) odmiki (margin), Robovi (border) odmiki (margin), širina (width), višina ( height), širina (width), višina ( height), prazni prostor med robom in prazni prostor med robom in vsebino ( padding)vsebino ( padding)

5151

RoboviRoboviborder-left-colorborder-left-color barva levega roba barva levega roba border-left-styleborder-left-style oblika levega roba oblika levega roba border-left-widthborder-left-width debelina levega roba debelina levega roba border-right-colorborder-right-color barva desnega roba barva desnega roba border-right-styleborder-right-style oblika desnega roba oblika desnega roba border-right-widthborder-right-width debelina desnega debelina desnega

roba roba border-top-colorborder-top-color barva zgornjega roba barva zgornjega roba border-top-styleborder-top-style oblika zgornjega roba oblika zgornjega roba border-top-widthborder-top-width debelina zgornjega debelina zgornjega

roba roba border-bottom-colorborder-bottom-color barva spodnjega roba barva spodnjega roba border-bottom-styleborder-bottom-style oblika spodnjega roba oblika spodnjega roba border-bottom-widthborder-bottom-width debelina spodnjega roba debelina spodnjega roba border-colorborder-color barve vseh robov barve vseh robov border-styleborder-style oblike vseh robov oblike vseh robov border-widthborder-width debeline vseh robov debeline vseh robov border-leftborder-left levi rob levi rob border-rightborder-right desni rob desni rob border-topborder-top zgornji rob zgornji rob border-bottomborder-bottom spodnji rob spodnji rob borderborder vsi robovivsi robovi

Primeri:p.prvi {border: medium double rgb(250,0,255)}

p.drugi {border-top: medium solid #ff0000}

p.tretji {border-style: solid;

border-left-width: 15px}

p.cetrti{border-style: solid;

border-left-width: thin}

p .peti {border-style: solid;

border-right-color: #ff0000}

5252

Odmiki in prazni Odmiki in prazni prostor med robom in prostor med robom in vsebinovsebinomargin-leftmargin-left levi zunanji odmiklevi zunanji odmikmargin-rightmargin-right desni zunanji odmik desni zunanji odmik margin-topmargin-top zgornji zunanji odmikzgornji zunanji odmikmargin-bottommargin-bottom spodnji zunanji odmikspodnji zunanji odmikmarginmargin zunanji odmiki zunanji odmiki padding-leftpadding-left levi notranji odmik levi notranji odmik padding-rightpadding-right desni notranji odmikdesni notranji odmikpadding-toppadding-top zgornji notranji odmikzgornji notranji odmikpadding-bottompadding-bottom spodnji notranji odmikspodnji notranji odmikpaddingpadding notranji odmikinotranji odmiki

Primeri:Primeri:p.odmik {margin: 2cm 4cm 3cm 4cm}p.leviodmik {margin-left: 2cm}p.desniodmik {margin-right:25%}

5353

DimenzijeDimenzije

widthwidth širina elementa širina elementa heightheight višina elementa višina elementa min-widthmin-width najmanjša širina elementa najmanjša širina elementa - IE te lastnosti ne - IE te lastnosti ne

podpirapodpiramin-heightmin-height najmanjša višina elementa najmanjša višina elementa - IE te lastnosti ne - IE te lastnosti ne

podpirapodpiramax-widthmax-width največja širina elementa največja širina elementa - IE te lastnosti ne podpira- IE te lastnosti ne podpiramax-heightmax-height največja višina elementanajvečja višina elementa - IE te lastnosti ne podpira - IE te lastnosti ne podpiraline-line-heightheight določanje razmika med vrsticamidoločanje razmika med vrsticami

Primer:Primer:img.mala{height: 30px}img.debela{width:30%}p.mala {line-height: 90%}p.velika {line-height: 200%}p {min-height: 200px}

5454

Položaj Položaj

displaydisplay vrsta elementavrsta elementapositionposition položaj elementa položaj elementa leftleft položaj levega roba položaj levega roba rightright položaj desnega roba položaj desnega roba toptop položaj zgornjega roba položaj zgornjega roba bottombottom položaj spodnjega roba položaj spodnjega roba floatfloat postavitev elementa ob stranipostavitev elementa ob straniclearclear izogibanje elementom ob straneh izogibanje elementom ob straneh z-indexz-index prekrivanje elementovprekrivanje elementov – uporaba – uporaba

več plasti več plasti verticalvertical--alignalign definira poravnavo vrstičnega elementa definira poravnavo vrstičnega elementa

znotraj znotraj starševskega elementastarševskega elementaoverflowoverflow definira, kaj narediti, če prekoračimo definira, kaj narediti, če prekoračimo

območje namenjeno elementuobmočje namenjeno elementudirectiondirection smer besedilasmer besedilavisibility visibility določa ali bo element viden ali nedoloča ali bo element viden ali ne

5555

displaydisplay

S to oblikovno lastnostjo določimo vrsto elementa. S to oblikovno lastnostjo določimo vrsto elementa.

Vrednost Vrednost Pomen Pomen block block bločni element bločni element inline-block inline-block blok v vrstici blok v vrstici inline inline vrstični element vrstični element list-item list-item točka seznama točka seznama none none prazen element prazen element run-in run-in element, ki bo prikazan (če bo to element, ki bo prikazan (če bo to

možno) znotraj možno) znotraj naslednjega elementanaslednjega elementa

table table tabela tabela inline-tableinline-table vrstična tabela vrstična tabela table-row-group table-row-group skupina vrstic v tabeli skupina vrstic v tabeli table-column table-column stolpec v tabeli stolpec v tabeli table-column-group table-column-group skupina stolpcev v tabeli skupina stolpcev v tabeli table-header-group table-header-group glava tabeleglava tabeletable-footer-group table-footer-group noge tabele noge tabele table-row table-row vrstica tabele vrstica tabele table-cell table-cell celica v tabeli celica v tabeli table-caption table-caption opis tabele opis tabele

5656

Primer uporabe Primer uporabe lastnosti displaylastnosti display <html> <head> <style type="text/css"> p {display: inline} div {display: none} span {display:block} </style> </head> <body> <p>Uporaba lastnosti display, ki je v tem primeru omogočila, da bosta odstavka (p) postala vrstična elementa, sekcija div bo nevidna, sekcija span pa bo postala bločni element. </p> <p>Ta odstavek se nadaljuje v isti vrstici. </p> <div>Sekcija div ni vidna. </div> <span> Sekcija span je postala bločni element. </span> </body></html>

5757

position position

S to oblikovno lastnostjo določimo način postavitve elementa. V vseh S to oblikovno lastnostjo določimo način postavitve elementa. V vseh primerih (razen pri statični postavitvi) z lastnostmi primerih (razen pri statični postavitvi) z lastnostmi leftleft, , rightright, , toptop in in bottombottom določimo, za koliko naj bo kateri rob elementa odmaknjen od določimo, za koliko naj bo kateri rob elementa odmaknjen od roba drugega elementa. roba drugega elementa.

VrednostVrednost Pomen Pomen static static običajna postavitevobičajna postavitev – ignorira nastavljanje pozicije – ignorira nastavljanje pozicije relativerelative relativno glede na relativno glede na trenutnotrenutno postavitev postavitev elementa elementa

(primer: (primer: position:relative; left:100px; position:relative; left:100px; top:150pxtop:150px – 100 pikslov levo in – 100 pikslov levo in 150 pikslov 150 pikslov navzdol),navzdol),

absoluteabsolute relativno glede na bločni element, v katerem je relativno glede na bločni element, v katerem je vsebovanvsebovan (primer: (primer: position:absolute; position:absolute; left:100px;t op:150pxleft:100px;t op:150px – 100 – 100 pikslov levo in pikslov levo in 150 pikslov navzdol – od začetka elementa, v 150 pikslov navzdol – od začetka elementa, v katerem je ta element vsebovan)katerem je ta element vsebovan)

fixedfixed relativno glede na okno brskalnikarelativno glede na okno brskalnika (primer: (primer:

position:fixed; position:fixed; left:100px; top:150pxleft:100px; top:150px – 100 – 100 pikslov levo in 150 pikslov pikslov levo in 150 pikslov navzdol – od vrha okna navzdol – od vrha okna brskalnika- ko se z drsnikom brskalnika- ko se z drsnikom pomikamo pomikamo navzdol, vsebina tega elementa ostane na isti navzdol, vsebina tega elementa ostane na isti poziciji) poziciji) – ne deluje v IE.– ne deluje v IE.

Preizkusite to lastnost!Preizkusite to lastnost!

5858

floatfloat

S to oblikovno lastnostjo lahko element S to oblikovno lastnostjo lahko element prestavimo na levi ali desni rob. Pri tako prestavimo na levi ali desni rob. Pri tako postavljenem elementu se vsebina drugih postavljenem elementu se vsebina drugih elementov odmika od njegovih robov. V tem elementov odmika od njegovih robov. V tem se tudi razlikuje od absolutne postavitve, kjer se tudi razlikuje od absolutne postavitve, kjer se vsebina drugih elementov ne odmika. se vsebina drugih elementov ne odmika.

Vrednost Vrednost Pomen Pomen none none običajna postavitev običajna postavitev left left element je ob levem robuelement je ob levem roburight right element je ob desnem robu element je ob desnem robu

5959

Primer uporabe Primer uporabe lastnosti floatlastnosti floatStil:Stil:div.glava {background-color: #bbddff; text-align: center; font-family: arial, helvetica, sans-serif; padding: .2em }p { text-align: justify; font-family: verdana, geneva, sans-serif; margin: .5em }div.tekst { background-color: #00eeee; font-size: 1.5em; font-family: arial, helvetica, sans-serif; padding: .2em; margin-left: .5em; margin-bottom: .5em; float: right; text-align: right; width: 50% }div.sekcija { border: 1px solid #bbddff }

6060

HTML za stil iz prejšnje HTML za stil iz prejšnje prosojniceprosojnice<div class = "glava">Na Fakulteti za elektrotehniko, raèunalništvo in informatiko smo v

šolskem letu 2007/2008 začeli izvajati dva študijska programa, ki sta nastala iz študijskega programa

"Računalništvo in informatika": </div> <div class = "sekcija"> <div class = "tekst">Računalništvo in informacijske tehnologije</div> <p>Osnovno vodilo pri prenovljenem študijskem programu Računalništvo in

informacijske tehnologije je uvajanje projektnega načina izvajanja predavanj in vaj, in sicer v povezavi z industrijskimi

partnerji in institucijami družbenega pomena. V zaèetku drugega letnika se razpišejo predvidoma trije projekti. Vsak projekt vsebuje po osem izbirnih strokovno računalniških predmetov, ki se izvajajo v letnem semestru drugega letnika in v zimskem semestru tretjega letnika.

</p> </div> <div class = "sekcija"> <div class = "tekst">Informatika in tehnologije komuniciranja</div> <p>Študijski program Informatika in tehnologije komuniciranja (ITK) je nastal zaradi

razvoja tehnologij in zahtev informacijske družbe. Ustvarjen je z namenom pripraviti svoje diplomante za sodobna, v informacijsko tehnologijo usmerjena delovna mesta prihodnosti, ki zahtevajo znanja razvoja informacijskih rešitev, vodenja projektov, upravljanja omrežij in obvladovanja informacij.

</p> </div>

6161

Izgled v brskalnikuIzgled v brskalniku

6262

Zanimiva primera s Zanimiva primera s floatfloat

Izdelava horizontalnega menija s Izdelava horizontalnega menija s pomočjo CSS.pomočjo CSS.

Izdelava domače strani brez Izdelava domače strani brez tabel.tabel.

6363

z-index z-index

S to lastnostjo določimo S to lastnostjo določimo platplat, na kater, na katerii bo narisan element. Brskalnik vse elemente, ki so bo narisan element. Brskalnik vse elemente, ki so vsebovani v istem bločnem elementu, riše po vsebovani v istem bločnem elementu, riše po plasteh plasteh od najnižje proti najvišjod najnižje proti najvišjii. Tako lahko . Tako lahko določimo, kateri element bo na površju, ko pride do prekrivanja. Do prekrivanja elementov določimo, kateri element bo na površju, ko pride do prekrivanja. Do prekrivanja elementov lahko pride, kadar imamo relativno, absolutno ali fiksno postavljene elemente. Če za lahko pride, kadar imamo relativno, absolutno ali fiksno postavljene elemente. Če za plastplast elementa določimo celo število, se za v njem vsebovane elemente vzpostavi lokalni sistem elementa določimo celo število, se za v njem vsebovane elemente vzpostavi lokalni sistem plastiplasti, v kater, v katerii je ta element na je ta element na plastiplasti 0. 0.

Primer:Primer:<html><head><style type="text/css">

img.x {position:absolute; left:20px; top:10px; z-index:1}

</style></head>

<body><h1>Demonstracija lepljenja vecih plasti</h1><img class="x" src="bulbon.gif" width="100" height="180">

<p>Privzeta vrednost za z-index je 0. Z vrednostjo z-indexa 1 za element img (naša slika žarnice) damo sliko pred ta tekst.</p>

</body>

</html>

6464

overflowoverflow Z lastnostjo Z lastnostjo overflowoverflow določimo, kaj se naj zgodi, če vsebina elementa prekorači območje, ki mu je določimo, kaj se naj zgodi, če vsebina elementa prekorači območje, ki mu je

namenjeno. Možne lastnosti so namenjeno. Možne lastnosti so scrollscroll (pojavita se horizontalni in vertikalni drsnik), (pojavita se horizontalni in vertikalni drsnik), visiblevisible (vidi se celotna (vidi se celotna vsebina - območje se prekorači), vsebina - območje se prekorači), hiddenhidden (prikaže samo del vsebine, ki je vidna v tem območju) in (prikaže samo del vsebine, ki je vidna v tem območju) in auto auto (pojavi se samo horizontalni drsnik(pojavi se samo horizontalni drsnik –avtomatsko, ko vsebina elementa prekorači območje –avtomatsko, ko vsebina elementa prekorači območje).).

Primer:Primer:<html> <head> <style type="text/css"> div {background-color:#00FFFF; width:150px; height:150px;overflow: scroll} </style> </head>

<body> <p>Z lastnostjo overflow dolocimo, kaj se naj zgodi, ce vsebina elementa prekoraci obmocje, ki mu je

namenjeno. Možne lastnosti so scroll (pojavita se horizontalni in vertikalni drsnik), visible (vidi se celotna vsebina -

obmoèje se prekoraci), hidden (prikaže samo del vsebine, ki je vidna v tem obmocju) in auto (pojavi se samo horizontalni

drsnik).</p>

<div>HTML (HyperText Markup Language) je jezik, s katerim opišemo gradiva, ki jih želimo objaviti na spletu. </div>

</body>

</html>

6565

visibilityvisibility

<html> <head> <style type="text/css">¸ h1.viden {visibility:visible} h1.neviden {visibility:hidden} </style> </head> <body> <h1 class="viden">Ta naslov poglavja je

viden.</h1> <h1 class="neviden">Ta naslov poglavja ni

viden</h1> </body></html>

6666

BrskalnikBrskalnik

cursorcursor vrstavrsta kurzorjakurzorja outline-coloroutline-color barvabarva obrobeobrobe - ne deluje v - ne deluje v

IEIE

outline-styleoutline-style oblikaoblika obrobeobrobe - ne deluje v - ne deluje v IEIE

outline-widthoutline-width debelina obrobe debelina obrobe - ne deluje v IE - ne deluje v IE

outlineoutline obrobaobroba - ne deluje v IE - ne deluje v IE

6767

TabeleTabele

Lastnosti delno delujejo v IE.Lastnosti delno delujejo v IE.

table-layouttable-layout postopekpostopek zaza določitevdoločitev širineširine tabeletabele

border-collapseborder-collapse vrstavrsta robovrobov celiccelic

border-spacingborder-spacing prostorprostor med med celicamicelicami

empty-cellsempty-cells prikaz praznih celic prikaz praznih celic

caption-sidecaption-side postavitev opisa postavitev opisa tabeletabele

6868

SeznamiSeznami

Lastnosti delujejo samo delno v IE.Lastnosti delujejo samo delno v IE.list-style-typelist-style-type način številčenja način številčenja list-style-imagelist-style-image slika kot oznaka slika kot oznaka

pri pri naštevanju naštevanju list-style-position list-style-position položaj oznake pri položaj oznake pri

naštevanju naštevanju list-style list-style bližnjica za vse bližnjica za vse

lastnosti lastnosti oznak pri oznak pri naštevanjunaštevanju

6969

Podpora različnim Podpora različnim medijemmedijemCSS2 omogoča podporo različnim medijem. Medije vključujemo z CSS2 omogoča podporo različnim medijem. Medije vključujemo z @media

Primeri:Primeri:@import url("loudvoice.css") aural;@media print { /* stili za print */}@media print { body { font-size: 10pt }}@media screen {body { font-size: 12pt }}@media screen, print {body { line-height: 1.2 } }

Če hočemo definirati stil za določen medij lahko to določimo z naslednjimi selektorji:Če hočemo definirati stil za določen medij lahko to določimo z naslednjimi selektorji:allall stil se uporablja za vse naprave. stil se uporablja za vse naprave. auralaural uporablja se pri sintezi govora in pri posebnih zvočnih efektihuporablja se pri sintezi govora in pri posebnih zvočnih efektih.. Poglejte Poglejte

specifikacijospecifikacijo aural style sheets aural style sheets, če želite izvedeti podrobnosti, če želite izvedeti podrobnosti. . braillebraille uporablja se pri bralnih napravah za slepe. uporablja se pri bralnih napravah za slepe. embossedembossed uporablja se za tiskanje vsebine na tiskalnike za slepe.uporablja se za tiskanje vsebine na tiskalnike za slepe.handheldhandheld uporablja se za mobilne in manjše naprave (dlančniki, mobilni telefoni, zasloni uporablja se za mobilne in manjše naprave (dlančniki, mobilni telefoni, zasloni

občutljivi na dotik...). občutljivi na dotik...). printprint uporablja se za predogled tiskanja na tiskalniki. Poglejte specifikacijo uporablja se za predogled tiskanja na tiskalniki. Poglejte specifikacijo

pagedmediapagedmedia, če vas zanimajo podrobnosti., če vas zanimajo podrobnosti. projectionprojection uporablja se za pripravo projekcij ( predstavitev preko spletnega brskalnika) ali uporablja se za pripravo projekcij ( predstavitev preko spletnega brskalnika) ali

tiskanje prosojnic. Poglejte specifikacijo tiskanje prosojnic. Poglejte specifikacijo paged mediapaged media, če vas zanimajo , če vas zanimajo podrobnosti.podrobnosti.

screenscreen uporablja se za izpis vsebine na računalniškem zaslonu. uporablja se za izpis vsebine na računalniškem zaslonu.ttytty uporablja se za naprave z omejeno zmožnostjo izpisa (npr. uporablja se za naprave z omejeno zmožnostjo izpisa (npr.

prenosne naprave, prenosne naprave, alfanumerični terminali...).alfanumerični terminali...).tvtv uporablja se za zaslone z nizko resolucijo, barvno omjenostjo, zmožnostju uporablja se za zaslone z nizko resolucijo, barvno omjenostjo, zmožnostju

uporabe analognega in digitalnega zvoka (npr. televizija, uporabe analognega in digitalnega zvoka (npr. televizija, teletekst).teletekst).

7070

Pogled v prihodnostPogled v prihodnost

CSS2 omogoča možnosti za sintezo govora CSS2 omogoča možnosti za sintezo govora in zvočne efekte, kar je zelo uporabno pri in zvočne efekte, kar je zelo uporabno pri izgradnji multimodalnih uporabniških izgradnji multimodalnih uporabniških vmesnikov. Trenutne verzije brskalnikov vmesnikov. Trenutne verzije brskalnikov tega še ne podpirajo. Več o tem najdete na tega še ne podpirajo. Več o tem najdete na http://www.w3schools.com/css/css_ref_aural.asphttp://www.w3schools.com/css/css_ref_aural.asp

CSS2 podpira tudi možnosti za boljše CSS2 podpira tudi možnosti za boljše tiskanje dokumentov. Več o tem najdete na tiskanje dokumentov. Več o tem najdete na http://www.w3schools.com/css/css_ref_print.asphttp://www.w3schools.com/css/css_ref_print.asp

CSS3 specifikacije najdete na CSS3 specifikacije najdete na http://www.w3.org/Style/CSS/current-work#CSS3http://www.w3.org/Style/CSS/current-work#CSS3