Kaskadni stili ( CSS)

Kaskadni stili ( CSS)

Zakaj služijo kaskadni stili • Kaskadni stili (CSS - Cascading Style Sheets) služijo za boljše ločevanje vsebine (hiperteksta) od predstavitve na spletu. • Stili definirajo, kako prikazati HTML elemente v brskalniku • Uporabljajo se lahko v brskalnikih, ki prepoznajo dokumente po standardu HTML 4.0 • Stile lahko definiramo: • v zunanjem dokumentu s končnico .css, • v glavi dokumenta, • znoraj HTML označb (te definicije imajo najvišjo prioriteto in prekrijejo ostale stile) • Če stilov ne definiramo, se uporabijo privzeti stili za izpis v brskalniku. • Poglejte si primer uporabe stilov na http://www.w3schools.com/css/demo_default.htm • Poglejte st tudi CSS Zen Garden, kjer lahko vidite kaj vse se da narediti s kaskadnimi stili.

Dodatni viri za CSS • Poglejte si še dodatne vire, od koder boste lahko izvedeli še več o CSS: http://www.w3schools.com/css/default.asp http://zaversnik.fmf.uni-lj.si/Gradiva/CSS/ http://www.mezzoblue.com/zengarden/resources/ • Standard CSS 2.1 Candidate Release najdete na http://www.w3.org/TR/2007/CR-CSS21-20070719/ • Seznam najpogosteje uporabljenih CSS lastnosti, izpisanih na eni A4 strani najdete na: http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/

Prenosljivost hipertekstovnih dokumentov • Vsi stili CSS ne delujejo v vseh brskalnikih, zato spletno stran, ki jo naredite preizkusite v vseh širše uporabljenih spletnih brskalnikih (IE, Firefox, Opera, Safari), preizkusite pa ju tudi s pomočjo W3C CSS validatorja.

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

Slovnica CSS • Slovnica definicije kaskadnega stila je naslednja: selektor {lastnost: vrednost; ...} Selektor določa, katerim elementom HTML (značkam) predpisujemo oblikovne lastnosti, ki jih naštejemo v zavitih oklepajih. Posamezne pare lastnosti 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 predpisana oblika velja za vse pojavitve tega elementa. • Primeri body {color: black} p {font-family: "sansserif"; 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 }

Primer datoteke z definicijo stilov h1,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; }

Primer definicije stilov v zunanji datoteki Primer definicije v glavi HTML datoteke: <head> <linkrel="stylesheet"type="text/css"href="style1.css"> </head> Primer datoteke style1.css: hr {color: sienna} p {margin-left: 20px} body {background-image:url("images/back40.gif")}

Nasvet • Uporabljajte zunanje CSS predloge, saj jih lahko ponovno uporabite v različnih vsebinskih hipertekstovnih dokumentih. • Uporaba zunanjih CSS predlog v različnih HTML dokumentih pohitri nalaganje spletnih strani, saj brskalnik naloži CSS predlogo samo enkrat in jo uporablja pri prikazu vsebine vseh spletnih strani, ki to predlogo uporabljajo.

Primer definicije stilov v glavi datoteke HTML <head> <styletype="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image:url("images/back40.gif")} </style> </head>

Primer definicije stila v glavi dokumenta HTML pri starejših brskalnikih <head> <styletype="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 komentar pri definiciji stilov, saj vam drugače izpiše vsebino definicije.

Uporaba stila v označbah HTML <pstyle="color: sienna; margin-left: 20px"> To je odstavek </p> <pstyle="font-family: arial, 'lucida console', sans-serif">To je odstavek </p>

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

Komentar v kaskadnem stilu • Primer kaskadnega stila s komentarjem: /* Komentar pred definicijo stila */ p { text-align: center; /* Komentar v definiciji stila */ color: black; font-family: arial ; }

Dedovanje kaskadnih stilov • Primer stila definiranega v zunanji datoteki: h3 { color: red; text-align: left; font-size: 8pt } • Primer stila v glavi dokumenta: h3 { text-align: right; font-size: 20pt } • Vrednosti, ki jih dobijo vse označbe <h3> so: color: red; text-align: right; font-size: 20pt • Iz stila, definiranega v zunanji datoteki se podeduje: color: red;Stil v glavi dokumenta prekrije ostale lastnosti stila, definiranega v zunanji datoteki: text-align: right; font-size: 20pt

HTML element <div> • <div> je bločni element, ki ga uporabljamo za oblikovanje enega ali več bločnih in vrstičnih elementov znotraj sekcije, ki jo oklepa. • Primer: V tem besedilu smo uporabili div: <divstyle="color:#FF0000;"> <h1> To je poglavje znotraj <i>div sekcije</i></h1> <p>To je odstavek znoraj <strong>div </strong> sekcije.</p> </div>

HTML element <span> • <span> je vrstični element, ki ga uporabljamo za oblikovanje enega ali več vrstičnih elementov znotraj sekcije, ki jo oklepa. Primer: <p>To je odstavek <spanstyle="color:#0000FF;">v katerem smo uporabili <strong>span element. </strong> </span> Ta del odstavka ne uporablja <i>span elementa </i>. </p> <p> <spanstyle="color:#00DD45;"> To je še en odstavek, v katerem imamo vse njegove vrsticne elemente znotraj <strong> span elementa .</strong> </span> </p>

Uporaba lastnosti "class " pri selektorju • Kateremukoli elementu lahko predpišemo lastnost “class”, katere vrednost je 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 razreda sklepati, kakšni elementi mu pripadajo. Posamezen element lahko pripada tudi več kot enemu razredu. To dosežemo tako, da za vrednost lastnosti “class” naštejemo več imen razredov, ki jih ločimo s presledki (presledek ne more nastopati v imenu razreda). • Primer dvojne definicije HTML označbe <p>: p.desno{text-align: right} p.centrirano{text-align: center} • Z lastnostjo “class” se pri elementu odločimo, katero definicijo oblike za ta element bomo uporabili: <pclass= "desno"> Ta odstavek je desno poravnan. </p> <pclass= "centrirano"> Ta odstavek je izpisan centrirano. </p> Uporabimo lahko le eno definicijo selektorja class v eni HTML označbi.

Uporaba lastnosti class pri HTML elementih • Če ne nastopa pri elementu lastnost “class”, se uporabi privzeta oblika za ta element. Primer: p {font-family: courier} p.sansserif{font-family: sans-serif} <p>To je odstavek v fontu curier.</p> <pclass="sansserif">To je odstavek v fontu sansserif.</p>

Izpuščanje imena HTML označbe pri definiciji kaskadnega stila Primer: .centriraj{text-align: center} • Če izpustimo ime HTML označbe pri definiciji kaskadnega stila, se ta definicija uporablja pri vseh HTML označbah skupaj s selektorjem “class”. Poglejmo si dva primera: <h1class="centriraj"> Ta naslov je centriran. </h1> <pclass="centriraj"> Ta odstavek je centriran. </p>

Uporaba oznak (label) v kaskadnih stilih • Kadar želimo nastaviti oblikovne lastnosti samo za točno določeno pojavitev nekega elementa, imamo dve možnosti. Ali to naredimo pri samem elementu z uporabo lastnosti “style”, vendar to ni priporočljivo, ker se vsebina in oblika preveč mešata. Druga možnost je, da izbrano pojavitev elementa posebej poimenujemo, kar storimo tako, da elementu definiramo lastnost id, katere vrednost je (enolična) oznaka tega elementa. Oznako si lahko poljubno izberemo, paziti pa moramo, da ne bodo različni elementi imeli enakih oznak. Primer oznake: p#para1{ text-align: center; color: red } Stil se uporabi, vsepovsod, kjer naletimo na oznako para1 v HTML označbi <p> <pid="para1">Tekst v odstavku</p> 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: <h1id="zeleno">Naslov</h1> <pid="zeleno">Odstavek</p>

Skupine elementov HTML z enakimi lastnostmi • Večim elemetom, razredom ali enotam lahko predpišemo iste oblikovne lastnosti v enem koraku, tako da njihove selektorje naštejemo enega za drugim, pri čemer jih ločimo z vejicami. Za vejico zaradi preglednosti običajno naredimo še presledek. V spodnjem primeru nastavimo rdečo barvo in centriramo besedilo za vse glavne naslove ( h1), elemente, ki uporabljajo razred “centriraj” in elemente z oznako “opis”. V drugem primeru vsem elementom nastavimo desno poravnavo besedila in modro barvo Primera: h1,.centriraj,#opis{ text-align: center; color: red } * { text-align:right; color: blue}

Drevo 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 bodysta otroka od html • pje predhodnik od ul • ul je naslednik od p • h1, p in ulso sorodniki • lije potomec od body • bodyje prednik od li

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

Definicije - nadaljevanje • Dokumentovo drevo (document tree ) Drevo elementov HTML, ki jih dobimo, če razčlenimo dokument HTML se imenuje dokumentovo drevo. Vsak element v dokumentovem drevesu ima natanko enega starša. Izjema je koren drevesa (root), ki nima staršev. • Otrok (child) Element A imenujemo otrok elementa B samo v primeru, če je B starš od A. • Potomec (descendant) Element A imenujemo potomec elementa B, če je: • element A otrok od B ali če je • element A otrok elementa C, ki je potomec od B. • Prednik (ancestor) • Element A se imenuje prednik elementa B samo, če je B potomec elementa A. • Sorodnik (sibling) • Elementi, ki si zaporedno sledijo in niso med seboj vgnezdeni, se imenujejo sorodniki. Element A se imenuje sorodnik od elementa B, samo takrat, če ima skupaj z elementom B istega starša. Element A je predhodni sorodnik (preceding sibling)elementa B, če se nahaja v dokumentnem drevesu pred elementom B. Element B je naslednji sorodnik (following sibling) elementa A, če se v dokumentnem drevesu nahaja za elementom A. • Predhodni element (preceding element) • Element A se imenuje predhodni element od elementa B , če je prednik od B ali predhodni sorodnik od B. • Naslednji element (following element) • Element A se imenuje naslednji element od B če je B predhodni element od A.

Verige • Različne osnovne selektorje z omejitvami lahko povežemo v poljubno dolgo verigo, pri čemer sosednja člena povežemo z enim izmed spodnjih treh operatorjev ( presledek, > +). Okoli operatorjev > in + lahko zaradi preglednosti pišemo presledke, niso pa obvezni. • EF tiste pojavitve elementa F, ki so potomci pojavitev elementa E, • E > F tiste pojavitve elementa F, ki so otrocipojavitev elementa E, • E + F tiste pojavitve elementa F, ki so naslednji sorodniki pojavitve elementa E (element E je predhodni sorodnik elementa F).

Primer <html> <head> <styletype="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> <pclass="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}: <ahref="http://www.feri.uni-mb.si"><imgsrc="smiley.gif"alt="Smeško"></a> </p> </div> </body> </html>

Primer uporabe navideznih razredov (pseudo class) definicije • Primer 1: a.zeleno:visited{color: #00FF00} <aclass= "zeleno"href="http://www.feri.uni-mb.si">FERI</a> Povezavo, ki smo jo že kliknili (visited), bo izpisal zeleno. • Primer 2: div >p:first-child{ text-indent:25px } Ta selektor bo vplival na prvi odstavek znotraj <div>: <div> <p> Ta odstavek se bo obojestransko poravnal. </p> <p> Ta odstavek se ne bo poravnal. </p> </div>

Primer definicije navideznega (pseudo) elementa Primer 1: div:first-letter { color: #ff0000; font-size:xx-large } Prva črka za <div> HTML označbo se izpiše veliko in rdeče. Primer 2: p {font-size: 12pt} p:first-line{color: #0000FF; font-variant: small-caps} <p>Prva vrstica odstavka se izpiše z velikimi črkami in modro, ostale vrstice se izpišejo normalno </p>

Primeri navideznih razredov in navideznih elementov <html> <head> <styletype="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> <aclass= "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> <pclass=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>

Omejitve • Omejitve, ki se pričnejo z dvopičjem, pa določajo, v kakšnem stanju mora biti element: • :linkelement je še neobiskana povezava • :visitedelement je že obiskana povezava • :hovernad elementom je miškin kurzor • :activeelement je aktiven (uporabnik je pritisnil tipko na miški in je še ni spustil) • :focuselement ima fokus • :langelement HTML vsebuje kodo v specificiranem jeziku (npr :Lang(C)vsebina elementa je v jeziku C ) • :first-childelement je prvi neposredni potomec nekega drugega elementa • :first-letterdefinira stil prvi črki, ki sledi HTML elementu • :first-line deffinira stil prvi vrstici, ki sledi elementu HTML • :before doda vsebino pred element HTML • :after do vsebino po zaključku elementa HTML

Omejitve - 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 IE a:first-child{text-decoration:none} q:lang(no){quotes: "~" "~"} – ne deluje v IE div >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 IE h1:after{content: url(smiley.gif)} – ne deluje v IE

Primer gradnje drop-down menuja s pomočjo navideznega razreda hover <htmlxmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Drop-Down Menu </title> <styletype = "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> <divclass = "menu">Kaj vas zanima? <ahref = "#">Osnovni podatki</a> <ahref = "#">Novice</a> <ahref = "#">Zabava</a> <ahref = "#">Blog</a> <ahref = "#">Pišite nam</a> </div> </body> </html>

CSS enote Primeri: 0 1em 2cm 15.3pt 0.362in 1.2ex 600px -12.5mm -47pc • Absolutne enote: • mm - milimeter • cm - centimeter (1cm = 10mm) • in - inch (1in = 2.54cm) • pt - point (72pt = 1in) • pc - pica (1pc = 12pt) • Relativne enote: • em - velikost trenutne pisave (2em je dvakratna velikost fonta (font-size) • ex - višina črke x v trenutni pisavi (polovica velikosti fonta (font-size) • Zaslonske enote: • px - pixel (običajno je 96px = 1in) • Procenti ( 74%, -47.72%, +8.33%)

Barve

Barvni 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 ;

Lastnosti barv • Komplementarnost barve • Nasičenost barve

Lastnosti barv • Kontrast • Svetlost barve

Vpliv barve okolice

Katero besedilo lažje 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 inzelena. Na svetlem ozadju so najprimernejše škrlatna, rdeča, modra inčrna. Med ospredjem in ozadjem naj bo razmerje v kontrastu vsaj 3:1, daso podrobnosti dovolj dobro razvidne.

Barvne kombinacije za svetovni splet

Barve v stilih CSS • Barve lahko določimo na več načinov: • Lahko jih zapišemo z besedo (angleška imena barv). XHTML pozna 16 imen (HTML tolmači sicer podpirajo veliko več imen vendar, če želimo, da je dokument veljaven, lahko uporabimo le spodnjih šestnajst). Primer: background: red • Lahko jih zapišemo kot RGB (Red Green Blue) vrednost. Oblika zapisa #rrggbb (šestnajstiški zapis za posamezne barve). Primer: background:#FF0000 • Uporabimo lahko tudi funkcijo RGB(rdeča, zelena, modra) (barve zapisane v desetiških vrednostih). Število vseh kombinacij (256 x 256 x 256) več kot 16 mio. Primer: absolutne vrednosti barv: background: rgb(220,30,80)" ali barve definiramo v procentih:background: rgb(20%,40%,40%)

Osnovne barve v XHTML • XHTML podpira naslednje barve: • Več o vseh barvah, ki jih podpira HTML, najdete na: http://www.w3schools.com/html/html_colornames.asp

Primer nijans modre barve

Primer mešanja barve (rdeča in modra) Več o mešanju barv najdete na http://www.w3schools.com/html/html_colorsfull.asp

Barva in ozadje colorbarva besedila background-colorbarva ozadja background-imageslika v ozadju background-attachmentpremikanje slike v ozadju background-repeatnačin tlakovanja ozadja background-positionpoložaj osnovne slike pri tlakovanju ozadja backgroundbližnjica za vse lastnosti ozadja 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;}

Pisava font-familypisava font-sizevelikost pisave font-weightkrepkost pisave font-stylenagnjenost pisave font-variantmale velike črke line-heightvišina vrstice fontbližnjica za vse lastnosti pisave Primeri: font: italic small-caps 900 12px arial h1 {font-size: 150%} p.sansserif{font-family: sans-serif} h1 {font-style: italic} p.poudarjeno{font-weight: bold}

Nasvet • V vseh hipertekstovnih dokumentih na vaši spletni strani uporabljajte za odstavke (p), div-e, span-e in poglavja ( h1 – h6) CSS stile. V stilu definirajte pisavo, njeno velikost, nagnjenost, poudarjenost in barvo. Ne oblikujte določenih elementov drugače, razen če želite da izstopajo. • Besedilo na spletni strani naj bo čitljivo. Pisava naj ne bo premajhna ali prevelika. Uporabljajte standardne pisave ( Arial, Times, Verdana...)

Besedilo text-decorationokraski na besedilu text-transformpretvorba besedila text-alignporavnava besedila text-indentzamik prve vrstice letter-spacingrazmik med znaki line-heightdoločanje razmika med vrsticami word-spacingrazmik med besedami white-spacenačin obravnave belih znakov (presledki tabulatorji, skoki v novo vrstico) vertical-alignnavpična poravnava 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}

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

Kaskadni stili ( CSS)