kaskadni stili css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Kaskadni stili ( CSS) PowerPoint Presentation
Download Presentation
Kaskadni stili ( CSS)

Loading in 2 Seconds...

play fullscreen
1 / 70

Kaskadni stili ( CSS) - PowerPoint PPT Presentation


  • 259 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Kaskadni stili ( CSS)' - shelly-mccullough


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
zakaj slu ijo kaskadni stili
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
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
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
Oblika strani
  • Enako oblikovno podobo lahko ustvarimo z večimi različnimi kombinacijami stilov.
slovnica css
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
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 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
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
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
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
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>

nasvet1
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 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 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
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
  • 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
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
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
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%)
barvni krog
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
Lastnosti barv
  • Komplementarnost barve
  • Nasičenost barve
lastnosti barv1
Lastnosti barv
  • Kontrast
  • Svetlost barve
katero besedilo la je preberete
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.

barve v stilih css
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
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 me anja barve rde a in modra
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
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
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}

nasvet2
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
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
Robovi (border) odmiki (margin), širina (width), višina ( height), prazni prostor med robom in vsebino ( padding)
robovi
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}

border-left-colorbarva levega roba

border-left-styleoblika levega roba

border-left-widthdebelina levega roba

border-right-colorbarva desnega roba

border-right-styleoblika desnega roba

border-right-width debelina desnega roba

border-top-colorbarva zgornjega roba

border-top-styleoblika zgornjega roba

border-top-widthdebelina zgornjega roba

border-bottom-color barva spodnjega roba

border-bottom-style oblika spodnjega roba

border-bottom-width debelina spodnjega roba

border-colorbarve vseh robov

border-styleoblike vseh robov

border-widthdebeline vseh robov

border-leftlevi rob

border-rightdesni rob

border-topzgornji rob

border-bottomspodnji rob

bordervsi robovi

odmiki in prazni prostor med robom in vsebino
Odmiki in prazni prostor med robom in vsebino

margin-leftlevi zunanji odmik

margin-rightdesni zunanji odmik

margin-topzgornji zunanji odmik

margin-bottomspodnji zunanji odmik

marginzunanji odmiki

padding-leftlevi notranji odmik

padding-rightdesni notranji odmik

padding-topzgornji notranji odmik

padding-bottomspodnji notranji odmik

paddingnotranji odmiki

Primeri:

p.odmik{margin: 2cm 4cm 3cm 4cm}

p.leviodmik{margin-left: 2cm}

p.desniodmik{margin-right:25%}

dimenzije
Dimenzije

widthširina elementa

heightvišina elementa

min-widthnajmanjša širina elementa - IE te lastnosti ne podpira

min-heightnajmanjša višina elementa - IE te lastnosti ne podpira

max-widthnajvečja širina elementa - IE te lastnosti ne podpira

max-heightnajvečja višina elementa - IE te lastnosti ne podpira

line-heightdoločanje razmika med vrsticami

Primer:

img.mala{height: 30px}

img.debela{width:30%}

p.mala{line-height: 90%}

p.velika{line-height: 200%}

p {min-height: 200px}

polo aj
Položaj

displayvrsta elementa

positionpoložaj elementa

leftpoložaj levega roba

rightpoložaj desnega roba

toppoložaj zgornjega roba

bottompoložaj spodnjega roba

floatpostavitev elementa ob strani

clearizogibanje elementom ob straneh

z-indexprekrivanje elementov – uporaba več plasti

vertical-align definira poravnavo vrstičnega elementa znotraj starševskega elementa

overflow definira, kaj narediti, če prekoračimo območje namenjeno elementu

directionsmer besedila

visibility določa ali bo element viden ali ne

display
display

S to oblikovno lastnostjo določimo vrsto elementa.

Vrednost Pomen

block bločni element

inline-block blok v vrstici

inline vrstični element

list-item točka seznama

none prazen element

run-in element, ki bo prikazan (če bo to možno) znotraj naslednjega elementa

table tabela

inline-tablevrstična tabela

table-row-group skupina vrstic v tabeli

table-column stolpec v tabeli

table-column-group skupina stolpcev v tabeli

table-header-group glava tabele

table-footer-group noge tabele

table-row vrstica tabele

table-cell celica v tabeli

table-caption opis tabele

primer uporabe lastnosti display
Primer uporabe lastnosti display

<html>

<head>

<styletype="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>

position
position
  • S to oblikovno lastnostjo določimo način postavitve elementa. V vseh primerih (razen pri statični postavitvi) z lastnostmi left, right, top in bottom določimo, za koliko naj bo kateri rob elementa odmaknjen od roba drugega elementa.

VrednostPomen

static običajna postavitev – ignorira nastavljanje pozicije

relativerelativno glede na trenutno postavitev elementa(primer: position:relative; left:100px; top:150px – 100 pikslov levo in 150 pikslov navzdol),

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

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

Preizkusite to lastnost!

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

Vrednost Pomen

none običajna postavitev

left element je ob levem robu

right element je ob desnem robu

primer uporabe lastnosti float
Primer uporabe lastnosti float

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 }

html za stil iz prej nje prosojnice
HTML za stil iz prejšnje prosojnice

<divclass = "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>

<divclass = "sekcija">

<divclass = "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>

<divclass = "sekcija">

<divclass = "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>

zanimiva primera s float
Zanimiva primera s float
  • Izdelava horizontalnega menija s pomočjo CSS.
  • Izdelava domače strani brez tabel.
z index
z-index
  • S to lastnostjo določimo plat, na kateri bo narisan element. Brskalnik vse elemente, ki so vsebovani v istem bločnem elementu, riše po plasteh od najnižje proti najvišji. Tako lahko 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 plast elementa določimo celo število, se za v njem vsebovane elemente vzpostavi lokalni sistem plasti, v kateri je ta element na plasti 0.

Primer:

<html>

<head>

<styletype="text/css">

img.x{position:absolute;

left:20px;

top:10px;

z-index:1}

</style>

</head>

<body>

<h1>Demonstracija lepljenja vecih plasti</h1>

<imgclass="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>

overflow
overflow
  • Z lastnostjo overflow določimo, kaj se naj zgodi, če vsebina elementa prekorači območje, ki mu je namenjeno. Možne lastnosti so scroll (pojavita se horizontalni in vertikalni drsnik), visible (vidi se celotna vsebina - območje se prekorači), hidden (prikaže samo del vsebine, ki je vidna v tem območju) in auto (pojavi se samo horizontalni drsnik –avtomatsko, ko vsebina elementa prekorači območje).

Primer:

<html>

<head>

<styletype="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>

visibility
visibility

<html>

<head>

<styletype="text/css">

¸ h1.viden{visibility:visible}

h1.neviden{visibility:hidden}

</style>

</head>

<body>

<h1class="viden">Ta naslov poglavja je viden.</h1>

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

</body>

</html>

brskalnik
Brskalnik

cursorvrsta kurzorja

outline-colorbarva obrobe - ne deluje v IE

outline-styleoblika obrobe - ne deluje v IE

outline-widthdebelina obrobe - ne deluje v IE

outlineobroba - ne deluje v IE

tabele
Tabele

Lastnosti delno delujejo v IE.

table-layoutpostopek za določitev širine tabele

border-collapsevrsta robov celic

border-spacingprostor med celicami

empty-cellsprikaz praznih celic

caption-sidepostavitev opisa tabele

seznami
Seznami

Lastnosti delujejo samo delno v IE.

list-style-typenačin številčenja

list-style-imageslika kot oznaka pri naštevanju

list-style-positionpoložaj oznake pri naštevanju

list-stylebližnjica za vse lastnosti oznak pri naštevanju

podpora razli nim medijem
Podpora različnim medijem

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

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:

all stil se uporablja za vse naprave.

aural uporablja se pri sintezi govora in pri posebnih zvočnih efektih. Poglejte specifikacijoaural style sheets, če želite izvedeti podrobnosti.

braille uporablja se pri bralnih napravah za slepe.

embossed uporablja se za tiskanje vsebine na tiskalnike za slepe.

handheld uporablja se za mobilne in manjše naprave (dlančniki, mobilni telefoni, zasloni občutljivi na dotik...).

print uporablja se za predogled tiskanja na tiskalniki. Poglejte specifikacijo pagedmedia, če vas zanimajo podrobnosti.

projection uporablja se za pripravo projekcij ( predstavitev preko spletnega brskalnika) ali tiskanje prosojnic. Poglejte specifikacijo paged media, če vas zanimajo podrobnosti.

screen uporablja se za izpis vsebine na računalniškem zaslonu.

tty uporablja se za naprave z omejeno zmožnostjo izpisa (npr. prenosne naprave, alfanumerični terminali...).

tv uporablja se za zaslone z nizko resolucijo, barvno omjenostjo, zmožnostju uporabe analognega in digitalnega zvoka (npr. televizija, teletekst).

pogled v prihodnost
Pogled v prihodnost
  • CSS2 omogoča možnosti za sintezo govora in zvočne efekte, kar je zelo uporabno pri izgradnji multimodalnih uporabniških vmesnikov. Trenutne verzije brskalnikov tega še ne podpirajo. Več o tem najdete na http://www.w3schools.com/css/css_ref_aural.asp
  • CSS2 podpira tudi možnosti za boljše tiskanje dokumentov. Več o tem najdete na http://www.w3schools.com/css/css_ref_print.asp
  • CSS3 specifikacije najdete na http://www.w3.org/Style/CSS/current-work#CSS3