Vi ste ovde: Web dizajn > CSSDinkostaOnline 
  
Home
Teme
Kompjuteri
Web dizajn
Softver
Cascading Style Sheets
 Cascading Style Sheets (CSS) ili Kaskadni stilovi su postojali kao preporuka W3C jo� od 1996, ali tek u zadnjih godinu-dve je do�lo do pravog proboja ovog jezika. Danas gotovo svi web-sajtovi na Internetu imaju u svom kodu i CSS.
 Datoteke sa stilom se koriste za prikazivanje povezanih delova teksta povezanim na�inom prezentacije. Ugradjuju se u zaglavlje (head) HTML dokumenta i onda se prepoznaju po tagu <style>...</style>. Druga mogu�nost je unutar tela dokumenta (body) i tu se mogu koristiti gotovo unutar svih tagova (npr: <p style="color:red;font:bold 18">). I tre�a mogu�nost je upotreba eksternih datoteka sa stilom : to je dokument sa jednostavnim tekstom u kome su navedena pravila i sa�uvan je sa ekstenzijom .css. Pravila definisana u takvom dokumentu mogu se primeniti na sve HTML dokumente koji se linkuju s njim , tj. ako u zaglavlju HTML dokumenta postoji ovakav link : <link rel="stylesheet" href="xy.css" type="text/css>, gde je xy ime spoljnog dokumenta .
CSS je jedan od tri najva�nija elementa koji sa�injavaju DHTML.

Kaskadni stilovi se mogu definisati pomo�u selektora atributa class, selektora atributa id i odre�ivanjem pravila za elemente (npr., P, H2, DIV itd). Primer: 
<HTML><HEAD> 
<title>Naslov dokumenta</title>
<style> 
P {font-family: Arial; font-size: 12pt}  
H2 {color: darkblue; font-size: 24pt} 
.tap {color: red} 
#green {color: green} 
</style>
</HEAD>
<body>
<h2>
Naslov veli�ine 24 tamnoplave boje
</h2>
<p>
Tekst koji se nalazi unutar paragrafa je u Arial fontu veli�ine 12.
</p>
<div id=green>
Tekst u ovom odeljku �e biti zelene boje.
</div>
<div class=tap>
A tekst u ovom odeljku �e biti crvene boje.
</div>
<div style="color:green;font:bold">
Stil za ovaj odeljak je definisan unutar DIV elementa (bold font zelene boje).
</div>
Deklaracije se sme�taju unutar viti�astih zagrada { ... } i razdvajaju se pomo�u ta�ke sa zarezom ; .
Pseudo-klase: Kori��enjem pseudo-klasa mo�e se uticati na izgled linkova na stranici. Za pravilan rad je bitno o�uvati redosled : link, : visited, : hover, :active (ali ne morate koristiti sve pseudo-klase). Primer:
<style>
a:link { font-weight:bold; color:darkblue; text-decoration:none }
a:visited { font-weight:bold; color:maroon; text-decoration:none }
a:hover { font-weight:bold; color:blue; text-decoration:underline }
a:active { font-weight:bold; color:blue; text-decoration:underline }
a:focus { font-weight:bold; color:blue; text-decoration:underline }
</style>
. . . .
<a href="link">Neki link</a>
Ako �elite da se neki stil primeni samo na neki odre�eni link, onda koristite atribut class:
a:hover.pk {color:red;background:yellow}
. . . .
<a href="link" class=pk>Klik</a>

: focus (tj. davanja fokusa linku tasterom TAB) ne radi do verzije Internet Explorer 5.

  Sledi kratak pregled najva�nijih atributa:

Formatiranje teksta

font-style (normal | italic | oblique | inherit)
font-weight (normal | bold | bolder | 100 | 200 | 300 ... 900)
font-family (naziv fonta)
font-size (veli�ina fonta)
font (skra�eno ozna�avanje)
Primer: #pol {font-size:18; font-family:Verdana; font-weight:bold}
ili skra�eno #pol {font:bold 18 Verdana}

color (naziv boje (npr. red) ili heksadecimalna vrednost (npr. # 0a6cce) za boju teksta)
text-decoration (dekoracija teksta, underline (podvla�enje teksta) i none (bez podvla�enja) se naj�e��e koriste)
text-align (poravnanje teksta; vrednosti: left | right | center | justify)
letter-spacing (razmak izme�u slova; broj�ana vrednost: 1 | 2 | 3 itd).
text-indent (uvla�enje teksta)

Pozadina

background-color (boja pozadine)
background-image (slika za pozadinu; notacija: background-image: url(slika.gif))
background-repeat (ponavljanje slike; vrednosti: repeat | repeat-x | repeat-y | no-repeat)
background-attachment (vodeni znak)
background-position (pozicioniranje slike; vrednosti: top | center | middle | right | left | bottom)
background (skra�ena notacija za gore navedene atribute; primer: body {background:url(x.gif) fixed blue 10% no-repeat})

Vizuelna prezentacija i pozicioniranje

cursor (odre�ivanje izgleda kursora unutar odre�enog elementa; vrednosti: crosshair | default | pointer | e-resize | s-resize | text | wait | help itd)
display (prikaz elementa; vrednosti: block | inline | list-item | run-in | compact | table | inline-table | none)
position (pozicioniranje elemenata; vrednosti: absolute | relative | static | fixed | inherit)
top (polo�aj u odnosu na vrh stranice)
left (polo�aj u odnosu na levu ivicu stranice)
visibility (vidljivost elementa; vrednosti: visible | hidden; razlika izme�u display i visibility je u tome �to kod prvog okolni elementi zauzimaju njegov prostor kad on nije vidljiv, dok kod drugog element dr�i svoj prostor, bez obzira da li je vidljiv ili ne)
width (�irina elementa; vrednost u pikselima ili procentima)

Okvir

Atributi za okvir: border-style, border-color, border-width, border-left, border-top itd. Skra�ena notacija: border, gde se unose vrednosti za boju, �irinu i stil (vrednosti se razdvajaju razmakom). Za border-style su mogu�e slede�e vrednosti: solid | inset | outset | double | ridge | groove.
Primer: border:blue 2px solid

Odstojanje

Za unutra�nje odstojanje elementa atributi su padding-right, padding-left, padding-top, padding-bottom, skra�ena notacija padding (sve 4 strane elementa dobijaju isto unutra�nje odstojanje).
Za spolja�nje odstojanje atributi su margin-top, margin-left, margin-right, margin-bottom, skra�ena notacija margin.

Filteri

I filteri su deo kaskadnih stilova, a njihova upotreba u kombinaciji sa skriptovima mo�e da proizvede dosta zanimljive efekte. Neke primere za to mo�ete da vidite pri dnu ove stranice, a jo� neki se mogu videti ovde.
Filteri se dele na vizuelne i tranzicione. Neki od vizuelnih filtera su:
alpha, blur, flipV, glow, dropShadow, mask itd.
Filteri tranzicije se notiraju od nule do 23, npr. transition=23 proizvodi nasumi�an prelaz, dok 12 proizvodi efekat rasturanja (random dissolve).
Od Internet Explorer-a 5.5 se primenjuje modifikovana notacija, gde nazivu filtera prethodi progid:DXImageTransform.Microsoft, ali se normalno prihvata i notacija iz Internet Explorer-a 4.
_____________________________________

  Primeri:
Prvi primer pokazuje definisanje DIV elementa unutar samog elementa:
<div style="position:relative;top:15;left:5;width:70;border:red 5 ridge;background:beige;color:#0a6cce;font:bold verdana 16;letter-spacing:2">

Drugi primer pokazuje mogu�u upotrebu kaskadnih stilova u kombinaciji sa JavaScript-om:
<style>
.van{width:130;height:35;color:white;background:blue; text-decoration:none;text-align:center;letter-spacing:1;border:silver 3 outset;font:bold 16 arial}
.preko {width:130;height:35;color:yellow;background:red;text-decoration:underline; text-align:center;letter-spacing:1;border:gold 3 outset;font:bold 14 helvetica}
</style>
<button class=van onmouseover="this.className='preko';this.innerHTML='Promena teksta'" onmouseout="this.className='van';this.innerHTML='Ovo je tekst'">Ovo je tekst</button>
Primenjeno, to bi onda izgledalo ovako:  

 Primeri filtera:
<span style="width:80;filter:Shadow(color=gold, strength=3)">Primer senke</span>
Isto to sa malim dodatkom JavaScripta:
<span style="width:150;filter:Shadow(color=gold, strength=3)" onmouseover="this.filters.Shadow.color='lime'" onmouseout="this.filters.Shadow.color='gold'">Stavite mi�a na ovaj tekst</span>

I jedan primer za tranzicioni filter:
<script>
slike = new Array("sl1.jpg","sl2.jpg","sl3.jpg")
tr = 0
function kreni(){
tr = (tr+1)%slike.length
pro.filters.revealTrans.Apply()
document.images.pro.src=slike[tr]
pro.filters.revealTrans.Play()
setTimeout("kreni()",5000)
}
</script>
<img id=pro src="sl1.jpg" onclick="kreni()" style="width:150;height:100;filter: revealTrans(duration = 3, transition = 12)">


HTML  |  JavaScript  |  Saveti za Windows  |  Registraciona baza  |  DHTML  |  Softver  |  Putovanja
Hosted by www.Geocities.ws

1