Web viewDa nastavimo objašnjenje opšte šeme opisa. Znači navede se selektor (ili više njih odvojenih zarezom) a u vitičastim zagradama se nabrajaju atributi koji se

http://www.bubaj.com/index.php?cssCSSKao prvo i osnovno, da bi učenje CSS -a imalo nekog smisla morate znati HTML.

CSS (Cascading Style Sheets) je jezik formatiranja pomoću koga definišemo izgled internet strana.

Kad se pojavio internet jedino je HTML definisao kompletan izgled, strukturu i sadržaj web stranica. Kada su u HTML 3.2 dodati tagovi poput <font> počinju poteškoće za web programere, jer HTML dokumenti počinju bivati sve veći, i vrlo je teško bilo snalaziti se u njima. Da bi se uprostio takav HTML dokument od verzije HTML 4.0 uveden je CSS. Sa uvodjenjem CSS web dokumenti se dele na:

1. HTML deo koji definiše sadržaj internet stranice,2. CSS deo koji definiše izgled i strukturu internet stranice (kao na primer boja slova,

pozadine, margine i tako dalje).

Šta je to magično postignuto u CSS što uprošćava web programiranje? Kao što znamo da bi definisali na primer boju teksta moramo upotrebiti tag <font> sa atributom COLOR. E sad ako imamo 100 ili 1000 stranica onda to znači da na svaku stranu moramo upotrebiti tag FONT kako bi smo definisali boju. Znaži 1000 stranica daje 1000 upotrebe taga FONT sa svim parametrima koje on poseduje. Na svakoj stranici pored <font> taga postoje u proseku još 100 taga koji definišu izgled tablica, margina itd itd, što daje preko 10 000 tagova. E sad to sve pomnožimo u proseku sa oko 20 znaka kojim je ispisan svaki tag sa svojim atributima, što daje preko 200 000 znaka. To je negde oko 200 Kb. To je možda čak i 10% od samog tekstualnog sadržaja web sajta.

E sad tu stupa na scenu CSS da nam olakša i pisanje stranica ali što je još važnije da nam štedi prostor na hostu. Naime, sve te stilske osobine tekstova, slika, pozadina, tabela itd. definišemo samo jednom u fajlu pod nazivom na primer stil.css. Taj CSS fajl zatim ubacujemo u HEAD sekciju svakog HTML dokumenta kao link. Sve to rezultira definisanju izgleda web strana samo na jednom mestu u tom CSS fajlu. Taj CSS fajl može se pozivati neograničen broj puta.

Medjutim CSS ima daleko veće dizajnerske mogućnosti od čistog HTML-a. Zato je danas CSS gotovo nezamenjljiv u dizajniranju internet stranica.

CSS osnoveU ovom delu CSS osnove objasnićemo CSS sintaksu, umetanje CSS fajla i koda unutar HTML koda. Sama sintaksa je vrlo uprošćena u odnosu na HTML sintaksu u smislu manjeg korišćenja znakova za slične vizuelne efekte. Pa da krenemo :)

1

CSS sintaksa i umetanje CSS fajlaCSS sintaksa se sastoji od jednog ili više opisa. Svaki opis se sastoji od tri elementa:

Selektor Atributi Vrednosti

Sintaksa svakog opisa ima sledeću opštu šemu:

selektor1,selektor2,...,.imeKlase1,...{svojstvo1: vrednost1; svojstvo2: vrednost2;...}

Obično u jedan opis figuriše jedan selektor, ali ako više selektora imaju ista svojstva onda možemo i njih dodati, samo se odvoje zarezom (može i klase itd) - to se naziva grupisanje selektora.

Da nastavimo objašnjenje opšte šeme opisa. Znači navede se selektor (ili više njih odvojenih zarezom) a u vitičastim zagradama se nabrajaju atributi koji se medjusobno odvajaju tačka zarezom. Vrednosti atributa se dodeljuju ne znakom jednako kao što je bio slučaj u HTML već se pišu dve tačke izmedju atributa i njegove vrednosti. E sad ovde su šematski prikazane dva svojstva ali naravno može koliko god nam je potrebno. Ajde da vidimo konkretan primer pa će sve biti jasno:

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

ili ako je selektor sa mnogo atributa moše se pisati i ovako:

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

U gornjem kodu smo definisali da tekst u pasusima (<p></p>) bude u crvenoj boji, i centriran. Znači, iako u HTML kodovima nećemo pisati u <p> tagovima atribute za boju i položaj tekstova svi tekstovi će ipak biti u crvenoj boji i centrirani. Ajde to i da dokažemo, a ujedno i da vidimo kako se to umeću CSS fajlovi. Znač otvorimo notepad i prepišemo gornji kod u njemu, i taj fajl imenujemo sa stil.css . Otvorimo novi notepad i u njemu napravimo HTML stranicu strana.htm sledećeg sadržaja:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><link rel="stylesheet" type="text/css" href="stil.css"><title>CSS edukacija</title></head><body><p>Moja prva CSS lekcija</p></body></html>

2

Na početku svakog HTML dokumenta (čak i ispred <html> taga) gde ubacujete CSS stilove steknite naviku da uvek pišete !DOCTYPE tag u formatu kao što smo mi u gornjem kodu napisali.

Idemo dalje. Kad otvorimo u brauzeru fajl strana.htm dobijemo tekst "Moja prva CSS lekcija" u crvenoj boji ispisan po sredini. Znači, iako nismo direktno u HTML dokumentu u <p> tagu definisali boju i položaj teksta, brauzer je ispoštovao naredbe fajla stil.css. CSS fajl kao što vidimo umeće se u HTML dokument u HEAD delu i to pomoću taga <link> i atributa REL, TYPE i HREF. Uvek pišete REL i TYPE atribute kao u gornjem primeru zajedno sa njihovim vrednostima, a u HREF atributu pišete lokaciju CSS fajla.

Medjutim CSS kod ne mora uvek da se umeće. Naime, možemo CSS kod direktno pisati u HTML HEAD delu ovako:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> p {color: red; text-align: center} </style><title>CSS edukacija</title></head><body><p>Moja prva CSS lekcija</p></body></html>

Rezultat će biti isti. I ovde imamo <style> tag ali samo sa TYPE atributom U ovom slučaju postoji i zatvarajući tag </style>.

Postoji i mogućnost umetanja CSS stilova i u samim HTML tagovima, a efekat će biti isti. Na primer možemo pisati i ovako:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>CSS edukacija</title></head><body><p style="color:red; text-align:center">Moja prva CSS lekcija</p></body></html>

CSS podržava i komentare, koji izgledaju kao u programskom jeziku C, dakle navodeći se između znakova /* i */, ali samo unutar CSS koda.

CSS selektorRazlikujemo tri tipa selektora:

navodeći ime HTML taga, navodeći klasu elemenata i,

3

navodeći identifikacionu vrednost (ID) elementa.

Ime tagaKad definišemo navodeći ime HTML taga onda će opis uticati na sve elemente u dokumentu koji su definisani takvim imenom taga. To izgleda ovako:

body { svojstvo: vrednost; ...}

Medjutim nije na odmet napomenuti vrlo bitno CSS pravilo. Naime, možemo mi definisati da svi pasusi budu na primer u crvenoj boji i to na svim stranicama, ali ako recimo želimo baš neki konkretan pasus da bude u plavoj boji onda možemo definisati i taj konkretan pasus, na primer preko ID (malo ispod objasnićemo ID).

CSS klasaCSS klasa se pravi tako što se stavi tačka pa odma napiše neko ime na primer ImeKlase, a ostalo je isto:

.ImeKlase { svojstvo: vrednost; ...}

I kasnije u HTML kodu tu klasu sa tim imenom možemo stavljati u različitim HTML tagovima kao atribute, a osobine će biti one koje su definisane u klasi. Evo primera:

<p class="imeKlase">...</p><div class="imeKlase">...</div>...

Medjutim ako želimo da nam samo za paragrafe važe svojstva klase onda pišemo:

p.ImeKlase { svojstvo: vrednost; ...}

Kasnije u HTML kodu u paragrafima ne moramo navoditi atribut class jer će automatski da se podrazumeva. Obratite peažnju da upravo to razlikuje klase od identifikacione elemente koje ćemo odma ispod proučiti. Medjutim pomoću klasa mogu da se ugnježđuju selektori , kao i praviti pseudo klase, a to se ne može postići identifikacionim elementima takodje.

Identifikacioni elementIdentifikacioni element se piše sa id (ili velikim slovima ID) u HTML kodu unutar tagova kao atribut. Identifikacioni element se definiše samo jednom unutar CSS koda, znači mora biti

4

jedinstven unutar CSS koda. To jest može postojati samo jedan identifikacioni element sa određenom identifikacionom vrednošću. Identifikaciona vrednost (u našem slučaju ispod smo je imenovali sa "prvi") se imenuje sledećim pravilima:

Vrednost mora početi slovom (može i brojem ili da bude samo broj, ali mozilla firefox brauzer ne podržava takvo imenovanje).

Nakon početnog slova mogu da slede brojevi, slova, ili razne kombinacije slova sa brojevima ili znacima kao što su: Znak minus "-", donja crta "_", dve tačke ":", i tačka "."

Vrednosti su osetljive na mala i velika slova.

Ajde da definišemo jedan identifikacioni element sa vrednošću na primer "prvi":

#prvi {color: red; text-align: center}

Kao što vidimo CSS identifikacioni element se definiše tako što prvo pišemo znak tarabu, pa onda vrednost identifikacionog elementa i zatim u vitičastim zagradama pišemo svojstva. E sad, unutar HTML tagova, kao što smo već pisali, identifikacioni element shvatite kao atribut, odnosno pišemo:

<p ID="prvi">Moja prva CSS lekcija</p>

A može se ubaciti i u nekom drugom tagu u istom HTML dokumentu:

<div id="prvi">Moja prva CSS lekcija</div>

Ovaj će, dakle, opis uticati na sve HTML tagove koji imaju id="prvi".

CSS atributi, vrednosti i jedinice mereNeke od CSS atributa možemo kategorisati u sledeće grupe:

definicija pozadine elementa ivica okvir prikaz dimenzije font generisani sadržaj margine unutrašnji prazan prostor pozicija izgled pripadajućeg teksta

Vrednosti atributa mogu biti:

predefinisane ključne reči brojevne vrednosti

5

Primeri predefinisanih ključnih reči su recimo "scroll" - da se kreće uvek zajedno sa sadržajem elementa, ili "fixed" - da stoji uvek na istom mestu bez obzira na kretanje sadržaja.

Brojevne vrednosti se mogu zadavati na nekoliko načina:

zadajući samo brojevnu vrednost zadajući brojevnu vrednost navodeći i jedinicu veličine (px, em, pt, ...)

Ako zadajemo samo brojevnu vrednost, imamo mogućnost da je pišemo na dva načina:

u dekadnom sistemu u heksadekadnom sistemu (#a4fde3), a ovaj sistem se najviše koristi u definiciji boje

Određena CSS svojstva kao što smo napisali, imaju vrednost u odredjenim jedinicama mere. CSS jedinice mere su:

px - piksel, označava broj tačkica na ekranu pt - point, najčešće se koristi za zadavanje veličina slova (ovo je jedinica mere koja

odgovara veličini slova u Word-u). Inače, 1pt = 1/72 inča. pc - pika, jedinica mere koja se ređe zadaje. 1pc = 12pt. mm, cm, in - milimetri, centimetri ili inči se retko zadaju za stilove koji se prikazuju

na ekranu, ali su korisni kada se dokument priprema za štampanje % - procenti predstavljaju relativnu jedinicu mere. Kada se zada npr. veličina nekog

bloka u procentima, njegova veličina će biti podešena kao npr. 60% od rezolucije ekrana ili bloka u kome se to što se definiše nalazi.

em - relativna mera u odnosu na trenutnu veličinu fonta. Ako je font veličine 12pt, onda će 2em predstavljati veličinu od 24pt.

ex - još jedna relativna mera u odnosu na veličinu slova, 1ex je otprilike jednak polovini veličine fonta.

U praksi se najčešće zadaju px, pt ili procenti.

CSS stilU ovom delu ćemo naučiti već konkretne stvari za kreiranje efikasnog dizajna sajta. Proučićemo razne CSS atribute sa njihovim svim mogućim vrednostima. CSS stilove ćemo podeliti na stilove za pozadine, za fontove, tekst, tekstualne liste i linkove. Pa da krenemo :)

CSS pozadina i bojeDa se potsetimo, u HTML pozadina može se definisati za celu stranu, zatim u TABLE, TD i TR tagovima tabela, itd. Pozadina može biti u boji ili u slici. CSS uvodi još neke nove atribute vezane za pozadinu, a samim tim i još neke mogućnosti i efekte. Na primer u CSS možemo

6

postaviti pozadinu i u tekstualnoj liniji. Zapravo CSS može postaviti pozadinu takoreći gde god želimo, odnosno gde postoji vizuelna mogućnost.

U CSS se pozadine definišu sledećim atributima:

background-color - boja pozadine. Boja se može zadati slovno na primer crvena boja kao red, u heksadecimalnim zapisu kao u HTML na primer #FFFFFF, a može i u decimalnom formaturgb(255,255,0).

background-image - definiše sliku za pozadinu. Putanja slike se zadaje u obliku: "url(putanjadoslike.gif)"

background-repeat - definiše da li će se slika u pozadini ponavljati. Vrednosti:o repeat - klasično ispunjava slika površinu pozadine nadovezivanjem dok je ne

ispuni,o no-repeat - definiše da slika ne treba da ispuni celu površinu pozadine

ukoliko je ne pokriva svojom veličinom,o repeat-x - slika se ponavlja samo vodoravno dok ne ipuni u jednoj "liniji"

površinu pozadine,o repeat-y - isto kao sa X samo u ovom slučaju se odnosi na vertikalu.

background-attachment - definiše kako će se slika u pozadini ponašati pri skrolovanju. Vrednosti: scroll - prati skrolovanje i, fixed fiksirana i ne prati skrolovanje.

background-position - definiše poziciju slike. Vrednosti mogu biti kombinacije unapred definisanih reči:

o top left - znači da će se pozadina pojaviti bez ponavljanja samo jednom u gornjem do vrha levom uglu (baš u vrh bez imalo razmaka),

o top center - u gornjem centralnom delu,o top right - u gornjem desnom delu,o center left - u centralnom delu po vertikali ali po horizontali u levom delu,o center center - u centralnom delu ali i u centru po horizontali,o center right - u centralnom delu ali uz desnu ivicuo bottom left - u donjem delu skroz i to u levom delu po horizontali,o bottom center - u donjem delu po vertikali a po horizontali u centru,o bottom right - u donjem delu po vertikali a u desnom delu po horizontali,o x% y% - daju se x i y koordinate u procentima od visine i širine ekranske

rezolucije ako je upitanju pozadina cele strane, ili procentualno u odnosu na visinu i širinu prostora u koji se smešta pozadina.

o xpos ypos - fiksno se definiše položaj najčešće u pikselima (a može i u mm, cm, pc, ex, itd) po vertikali i horizontali gde će se pozadinska slika pojaviti

Ajde sad da vidimo kako se atributi primenjuju u praksi kroz par primera. Počnimo od background-color:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #w1 {background-color: #c5def7;} </style></head><body id=w1><p>Prvi tekst</p><p>Drugi tekst</p></body></html>

7

A rezultat će biti pozadina u boji koju definiše heksadecimalni zapis boje #c5def7.

Ako pak želimo da nam pozadina bude slikovna onda to radimo pomoću sledećeg kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#w2 { background-image: url(csspozadina.gif);}</style></head><body id=w2><p>Prvi tekst</p><p>Drugi tekst</p></body></html>

E sad ako želimo da nam slika pozadine ne ispunjava celu površinu već samo onu kolika je i sama slika pišemo sledeći kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#w3 { background-image: url(csspozadina.gif); background-repeat: no-repeat;}</style></head><body id=w3><p>Prvi tekst</p><p>Drugi tekst</p></body></html>

A rezultat:

8

Ovde vidimo da se slika u pozadini pojavila samo jednom bez ponavljanja. To smo uspeli zbog parametra background-repeat i to zato što je njegova vrednost no-repeat. Ako je vrednost repeatonda se ponavlja po celoj površini kao što je to slučaj u čistom HTML-u. A ako stavimo za vrednostrepeat-x prostor će se puniti slikom samo po jednoj horizontali na vrhu prostora, a ako je repeat-yonda po jednoj vertikali uz levu ivicu prostora. A u kombinaciji sa background-position možemo odrediti i u koji tačno deo prostora želimo da ispunimo, itd. Probajte i vežbajte sve mogućnosti.

Naravno za definisanje jednog selektora možemo koristiti više atributa i to u raznim kombinacijama, ali ne samo recimo bacground atribute već i sve moguće ako su interesantni za neki efekat. Znači ovde smo atribute podelili u grupe za pozadinu, za fontove itd ali to samo da bi vi lakše shvatili, ali za definisanje selektora možemo upotrebljavati sve kombinacije svih mogućih CSS atributa ako daju odredjene efekte. Upravo to je jedan od razlog koji daje velike mogućnosti CSS-u za dizajniranje stranica.

Zato ajde da vidimo našta se tačno misli vezano za atribut background-attachment, a ujedno ajde da vidimo kako to CSS može da umeće pozadine gde god želimo, što nije bio slučaj sa čistim HTML-om. Primera radi ajde da umetnemo pozadinu u TEXT AREI:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #w4 { background-image: url(csspozadina.gif); background-attachment: fixed; }</style></head><body><form><textarea rows="6" cols="51" id="w4">Neki tekstttttttt tttttttt tggggggggggg ggggggg ggggggggffff fffffffffttttttttt ttttttttt tttttttt tggggggggggg ggggggg ggggggggffffffffffff fttttttttt ttttttttt tttttttt tggggggggggg gggggggggggggggffff ffffffff fttttttttt ttttttttt ttttttggggggg gffffffffffffggggg ggggghhhhh hhhhhh hhhhhhhh hhhhhffff ffffff ffffffttttt

9

tttttttttttt gfffffffff ffffff ghhhhhhh hhhhhhh hhhhfffff fffffffftttttttt nnnnnnnn nnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn nnnnnnnnn< /textarea></form></body></html>

A rezultat:

Dakle kad stavimo background-attachment: fixed; imamo pozadinu koja se iako pomeramo klizač ne pomera jer je fiksirana. Pomerajte gornji klizač i vdećete

CSS i fontNeki FONT atributi imaju za vrednosti predefinisane ključne reči, a nekima se vrednost zadaje kao numerička vrednost. Numeričke vrednosti su praćene mernom jedinicom (px, pt, %...). Jedinica se navodi bez razmaka, npr: "15px". Imamo sledeće atribute fonta:.

font-family - naziv fonta, zadaje se unutar navodnika ako font ima razmake. Moguće je zadati nekoliko fontova odvojenih zarezom, pri čemu web čitač pokušava da učita prvi, pa ako ne uspe drugi, itd. Kao vrednost font-familiy mogu da se zadaju na primer vrste slova kao što je Arial,Times New Roman, Century, itd. Medjutim osim vrste slova mogu se zadavati i varijacije izabrane vrste slova: serif, sans-serif, cursive, fantasy, monospace. Detaljnije videćemo u primeru.

font-size - veličina fonta, zadaje se na više načina. Postoje i ovde kao vrednosti predefinisane ključne reči, iako se ređe zadaju:

o xx-smallo x-smallo smallo mediumo largeo x-largeo xx-largeo smallero larger

Ali kao najčešća vrednost zadaje se broj koji definiše fiksnu veličinu slova u pikselima, milimetrima, santimetrima i ostalim CSS veličinama. Moguće je i procentualno definisanje veličine fonta (%) - koji definiše procentualno veličinu slova u odnosu na zadatu veličinu okolnih slova. Mi nećemo moći sve prikazati primerima ali nije loše Vi da izvrtite sve varijante jer tako ćete dobiti predstavu o kakvim veličinama slova se radi, a ujedno i da stičete rutinu u pisanju CSS.

10

font-style - definiše dodatno oblik slova u smislu normalnog ili iskošenog itd. Vrednosti:normal, italic, oblique.

font-variant - ispis slova. Vrednosti: normal, small-caps. font-weight - obična ili masna slova (debljina slova).

Vrednosti: normal, bold, bolder, lighter,100, 200, ..., 900.

Ajde da vidimo neke varijante svih atributa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #f1 {font-family: "Times New Roman";} #f2 {font-family: "Times New Roman"; font-family: cursive;} #f3 {font-family: Arial;} #f4 {font-family: Arial; font-family: monospace;} #f5 {font-family: Arial; font-family: monospace; font-size: x-small;} #f6 {font-family: Arial; font-style: italic;} #f7 {font-family: Arial; font-variant: small-caps;} #f8 {font-family: Arial; font-weight: bolder; color: blue; background-image: url(csspozadina.gif);}</style></head><body><p id=f1>SLOVA prva varijanta samo Times New Roman</p><div id=f2>SLOVA druga varijanta Times New Roman sa cursive</div><div id=f3>Treća a font Arial. <span id=f4>Četvrta font Arial i monospace.</span></div><div id=f5>Peta arial, monospace plus veličina x-small</div><div id=f6>Šesta arial, a stil italic</div><div id=f7>Sedma arial, a font variant small-caps</div><div id=f8>Osma arial, a font weight bolder</div></body></html>

A rezultat:

SLOVA prva varijanta samo Times New Roman

SLOVA druga varijanta Times New Roman sa cursiveTreća a font Arial. Četvrta font Arial i monospace.Peta arial, monospace plus veličina x-smallŠesta arial, a stil italicSEDMA ARIAL, A FONT VARIANT SMALL-CAPSOsma arial, a font weight bolderU gornjem kodu smo koristili sve atribute sa nekim njihovim varijantama. Mislim da neko posebno objašnjenje nije potrebno.

CSS tekst atributiAjde prvo da damo sve atributa sa njihovim vrednostima pa da ih objasnimo zatim i primerima.

11

direction - Definiše smer pisanja teksta. Vrednosti su: ltr - sa leva na desno, što je i po defaultu; rtl - sa desna na levo. Ovaj atribut je iz CSS 2 specifikacije.

line-height - Definiše udaljenost izmedju redova pisanja. Vrednosti mogu biti:o normal - Rastojanje po defaultu,o broj - bilo koji celi broj koji definiše rastojanje tako što je ono jednako

proizvodu tog broja i trenutne razdaljine izmedju redova pisanja,o rastojanje u px, pt, cm i ostalim CSS jedinicama - Rastojanje izmedju

redova pisanja se definiše fiksno u datim jedinicama,o rastojanje u % - Rastojanje se odredjuje procentualno u odnosu na veličinu

slova. letter-spacing - Definiše razmak izmedju znakova u tekstu. Veličina može

biti: normal - koja je po defaultu i; razmak u px (pikselima) ili u drugim CSS jedinicama mere. Negativne vrednosti su dozvoljene.

word-spacing - Definiše dužinu razmaka izmedju reči u rečenicama. Vrednost može biti upikselima ali i ostalim CSS jedinicama mere; normal - onako kako je po defaultu.

text-align - Rasporedjuje tekst u prostoru po horizontali. Vrednosti su:o left - pomera tekst uz levu ivicu prostora,o right - uz desnu ivicu,o center - postavlja tekst u centralnom delu prostora u datoj horizontali,o justify - poravnava tekst sa svih strana da izgleda kao neki novinarski članak

(svi redovi su iste dužine). vertical-align - Rasporedjuje tekst u odnosu na objekat. Vrednosti su:

o dužina u CSS jedinicama za dužinu. Podiže ili spušta za odredjen broj recimo piksela. I negativne vrednosti su dozvoljene.

o % - Podiže ili spušta tekst u odnosu na gornju ivicu objekta za vrednost koja je jednaka procentualnom u odnosu na veličinu objkta po vertikali. Moguća je i negativna vrednost.

o baseline

o sub

o super

o top

12

o text-top

o middle

o bottom

o text-bottom

text-decoration - Vrši dekoraciju teksta. Vrednosti su:o none - bez dekoracije što je i po defaultu,o underline - podvlači tekst (iscrtava liniju ispod teksta),o overline - nadvlači tekst (crta liniju iznad teksta),o line-through - precrtava tekst (crta liniju po sredini teksta),o blink - definiše trepćući tekst (naizmenično se tekst gubi i pojavljuje ali nije

podržano od svih brauzera). text-indent - Uvlači tekst u prvom redu deksta. Vrednosti: rastojanje u px, pt, cm

i ostalim CSS jedinicama; rastojanje u % u odnosu na širinu prostora u kome se ispisuje tekst.

text-shadow - Omogućava stvaranje tekstualne senke, to jest kopira tekst i izvlači malo naviše ili naniže i pri tome je tekst malo zamagljen. Na žalost za sada ovaj atribut ne podržava explorer. Vrednosti su: none- kada nema senke a to je po defaultu, kad ima vrednost onda ima4 nazovimo podvrednosti koje idu uvek zajedno i definišu vrednost. Podvrednosti su:

o boja senke koja može biti zapisana kao reč, heksadecimalno ili decimalno;o dužina pomeraja po horizontali u CSS jedinicama dužine (na primer 20px

znači desno od početka teksta a ako pišemo -20px onda ispred početka teksta kome se pravi senka);

o dužina pomeraja senke po vertikali u odnosu na tekst u jedinicama dužine (na primer ako je 20px onda ide ispod teksta za 20 piksela a ako je -20px onda iznad teksta);

o broj u CSS jedinicama dužine. Ako je nula onda nema zamagljivanja. Na primer po mom ukusu je 12px lepo zamagljivanje. Zamagliti tekst na primer 2px znači toliko tekst razvući uzrokujući blur efekt. Nemojte postaviti ovu vrednost preveliku jer shadow tekst brzo postaje nečitak.

text-transform - Definiše da li su mala slova u tekstu ili velika. Vrednosti su:o none - postavlja slova po defaultu;o capitalize - transformiše prvi znak svake rečenice u veliko slovo;o uppercase - transformiše sva slova u tekstu u velika slova;o lowercase - transformiše sva slova u tekstu u mala slova.

white-space - Definiše prikaz otkucanog teksta u HTML kodu. Vrednosti su:

13

o normal - onako kao što je i bez tog atributa, znači po defaultu;o pre - onako kako otkucamo tekst u kodu tako će biti i prikazan. Znači gde god

kliknemo na enter tu se prikazuje <br>;o nowrap - koliko god dug tekst kucali u kodu brauzer će ga prikazati baš te

dužine i neće ga seći kad tekst naidje na kraju ekrana brauzera. Znači u nov red se prelazi tek kad se i naidje na novi pasus ili na <br>.

Ajde da vidimo kroz primer interesantnije atribute i koji su možda manje jasni, i neke njihove zanimljive vrednosti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> .a {direction: rtl;} .b {line-height: 3mm;} .c {letter-spacing: 2px;} .d {word-spacing: 10px;} .e {text-align: center;} .f {text-decoration: overline;} .g {text-shadow: blue 10px -10px 2px;}</style></head><body><div>Direction definiše smer pisanja teksta. Vrednost su ltr i rtl.</div><div class=a>Direction definiše smer pisanja teksta. Vrednost su ltr i rtl.</div><br><div class=b>line-height-Definiše udaljenost izmedju redova pisanja. line-height - Definiše udaljenost izmedju redova pisanja.</div><br><div class=c>Letter-spacing-definiše razmak izmedju znakova u tekstu</div><br><div class=d>word-spacing-Definiše dužinu razmaka izmedju reči u rečenicama</div><br><div class=e>text-align - Rasporedjuje tekst u prostoru po horizontali</div><br><div class=f>text-decoration - Vrši dekoraciju teksta</div><br><div class=g>text-shadow - Omogućava stvaranje tekstualne senke</div><br></body></html>

Direction definiše smer pisanja teksta. Vrednost su ltr i rtl.Direction definiše smer pisanja teksta. Vrednost su ltr i rtl.

line-height-Definiše udaljenost izmedju redova pisanja. line-height - Definiše udaljenost izmedju redova pisanja.

Le t t e r - s pac i ng -de f in i še r azma k i zm ed ju zna kova u t e ks t u

word-spacing-Definiše dužinu razmaka izmedju reči u rečenicama

text-align - Rasporedjuje tekst u prostoru po horizontali

14

text-decoration - Vrši dekoraciju teksta

text-shadow - Omogućava stvaranje tekstualne senke

CSS linkLinkovi se u CSS dekorišu najčešće pomoću 4 pseudo klasa. Te 4 klase se medjusobno najčešće definišu različitim atributima da bi link imao vizuelno lep efekat, ali mogu i dva po dva imati iste atribute ili tri pa jedan itd. Evo kako se prave pseudo klase za link:

a:link { } - klasa koja definiše izgled linka koji nikad nije posećen od strane posetioca; a:visited { } - izgled linka nakon klika na njega; a:hover { } - izgled linka kad se predje mišem preko njega; a:active { } - izgled linka u trenutku klika.

Sve 4 klase mogu sadržati bilo koji atribut, ali naravno da ima smisla. Evo primer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> a:link {width: 178px; height: 43px; background: url(cssmenu/link.jpg);} a:visited {width: 178px; height: 42px; background: url(cssmenu/visited.jpg);} a:hover {width: 196px; height: 48px; background: url(cssmenu/hover1.jpg);} a:active {width: 160px; height: 39px; background: url(cssmenu/hover2.jpg);}</style></head><body><br><a href="www.tvoj.sajt.com"></a></body></html>

Znamo da se u HTML-u za link može koristiti samo jedna slika, ali CSS uz pomoć klasa proširuje tu mogućnost, i kao što vidimo koristili smo 4 različite slike. Da bi funkcionisao link u 4 slike (ili 2, 3 slike zavisno kako osmislimo) u klasama smo koristili atribute width i height koji definišu visinu i dužinu boksa a čije su vrednosti u našem primeru iste kao i dužine i širine slika (a i ne mora). Kasnije će mo detaljnije o uredjivanju boksova elemenata. U atributima background (može i bacgroun-image) za vrednost stavljamo lokacije slika.

Napisane klase u gornjem primeru definišu sve linkove u HTML dokumentu. Ali ako želimo da se linkovi medjusobno razlikuju u efektima onda moramo imenovati klase kako bi se znalo koji link koji efekat ima. Važna stvar je ako želimo različite linkove onda ne

15

možemo na primer prvo definisati klase za sve linkove a posle dodavati nove imenovane klase za druge linkova u istom dokumentu jer će u nekim slučajevima dolaziti do komflikta. Znači ako nameravamo imati linkove sa različitim efektima onda moramo baš sve klase imenovati! Imenovanje klasa se vrši klasično kao bilo koja druga klasa. Takodje ako za dizajn jednog tipa linkova koristimo 4 klase onda sve 4 klase imenujmo istim imenom. Na primer ako imenujemo sa dizajn1, onda to zapisujemo ovako:

a.dizajn1:link { } a.dizajn1:visited { } a.dizajn1:hover { } a.dizajn1:active { }

Kako to konkretno izgleda pokazaću u dekoraciji različitih linkova u jednom HTML dokumentu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">a.jedan:link {color: #ff0000}a.jedan:visited {color: #0000ff}a.jedan:hover {color: #ffcc00}

a.dva:link {color: #ff0000}a.dva:visited {color: #0000ff}a.dva:hover {font-size: 150%}

a.tri:link {color: #ff0000}a.tri:visited {color: #0000ff}a.tri:hover {background: #66ff66}

a.pet:link {color: #ff0000}a.pet:visited {color: #0000ff}a.pet:hover {font-family: monospace}

a.cetri:link {color: #ff0000; text-decoration: none}a.cetri:visited {color: #0000ff; text-decoration: none}a.cetri:hover {text-decoration: underline}

a.sest:link {background-color:#B2FF99;}a.sest:visited {background-color:#FFFF85;}a.sest:hover {background-color:#FF704D;}a.sest:active {background-color:#FF704D;}

a.sedam:link, a.sedam:visited {width:140px; padding:7px;font-weight:bold; color:#FFFFFF; text-align:center; text-decoration:none;background-color:#98bf21;}a.sedam:hover, a.sedam:active {background-color:#7A991A;}</style></head><body><a class="jedan" href="#">Prva dekoracija</a><br><br><a class="dva" href="#">Druga dekoracija</a><br><br><a class="tri" href="#">Treća dekoracija</a><br><br><a class="cetri" href="#">Četvrata dekoracija</a><br><br><a class="pet" href="#">Peta dekoracija</a><br><br>

16

<a class="sest" href="#">Šesta dekoracija</a><br><br><a class="sedam" href="#">Sedma dekoracija</a><br><br></body></html>

Prva dekoracija

Druga dekoracija

Treća dekoracija

Četvrata dekoracija

Peta dekoracija

Šesta dekoracija

Sedma dekoracija

U primeru vidite da smo pojedine linkove dekorisali pomoću tri klase. Takodje vidite da smo koristili raznorazne atribute u klasama za dobijanje raznih efekata linkova. Takodje zapazite da smo grupisali po dva selektora za definisanje sedmog linka. Znači mašta je granica mogućnosti.

CSS listaAjde i ovde da damo sve atribute sa svim vrednostima pa zatim da objasnimo.

list-style-type - Definiše izgled znaka u listama (nabrajanjima).o Za neuredjenu listu atribut list-style-type može imati sledeće vrdnosti:

none - bez oznaka; disc - pun kružić (što je i po defaultu); circle - prazan kružić; square - pun kvadratić.

o Za uredjene liste atribut list-style-type može imati sledeće vrednosti: armenian - neki Armenski znaci; decimal - decimalni brojevi, 1, 2, 3, 4 itd; decimal-leading-zero - decimalni brojevi sa vodećom nulom, 01, 02,

03 itd; georgian - neki Georgian brojevi: lower-alpha - mala slova abecede, a, b, c, d itd; lower-latin - isto mala slova abecede a, b, c, d itd; lower-greek - grčka slova, alfa, beta. gama, delta itd; lower-roman - rimski mali brojevi, i, ii, iii, iv, v itd; upper-latin - velika slova latinice, A, B, C, D itd; upper-alpha - isto velika slova latinice, A, B, C, D itd; upper latin - veliki rimski brojevi, I, II, III, IV, V itd.

list-style-position - Odredjuje poziciju liste. Vrednosti su:o outside - po defaultu kao i obična pozicija liste;o inside - malo uvučenija lista nego obično;

17

list-style-image - Za oznaku u nabrajanju definiše jednu sliku. Pošto je jedna slika onda je to neuredjena lista. Vrednosti su:

o none - bez slike;o url("adresaSlike.jpg") - upišete edresu slike;

Mislim da nije teško ovo shvatiti zato ću objasniti kroz primer sve atribute ali samo sa pojedinim vrednostima. Naravno vi možete u cilju vežbanja menjati vrednosti atributa i videti konkretno izgled svih vrednosti. Evo primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> ul.a {list-style-type: square;} ul.b {list-style-type: none;} #a {list-style-type: decimal; list-style-position: inside;}</style></head><body><ul class="a"> <li>Milan</li> <li>Zoran</li> <li>Steva</li></ul><ul class="b"> <li>Milan</li> <li>Zoran</li> <li>Steva</li></ul><ul id="a"> <li>Milan</li> <li>Zoran</li> <li>Steva</li></ul></body></html>

Milan Zoran Steva

Milan Zoran Steva

1. Milan2. Zoran3. Steva

18

CSS box modelHTML elementi kao što su naprimer <p>, <div>, <span>, <table>, <td>, <tr> i drugi, definišu sadržaj i strukturu, ali što je najvažnije za našu priču PRAVE PROSTOR kako bi se smestio taj sadržaj. Taj prostor shvatimo kao jednu kutiju (box - boks) koju CSS može dekorisati. Taj BOX možemo pretstaviti i slikovno:

Kao što vidimo sa slike taj box prostor se deli na 4 dela:

CONTENT - sadržaj elementa koji je na našoj slici samo veliko slovo A; PADDING - praznina izmedju sadržaja i linije granice elementa; BORDER - linija granice elementa; MARGIN - prazan prostor izmedju granice elementa i okolnih elemenata;

Svi ovi nabrojani delovi prostora u CSS - u se opisuju većim brojem atributa, a atributi većim brojem vrednosti da bi se što lepše i preciznije dekorisale internet strane.

Postoje atributi box modela koji definišu njegovu visinu i širinu kao što su:

with - definiše širinu elementa, hight - koji definiše visinu elementa.

U nastavku će mo objasniti sve atribute box elemenata kao i njihove vrednosti.

Širina i visina CSS BOX elementaOvde nema neke velike filozofije. Evo daću odma primer i onda ću ga prokomenterisati.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

19

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #wr {border: 1px solid gray;} #wc {width: 200px; height: 100px; border: 5px solid gray;} #wo {width: 300px; padding: 20px; border: 5px solid gray;} #we {width: 200px; height: 100px; border: 5px solid gray; margin: 30px;}</style></head><body><p id=wr>Baš volim boks model</p><p id=wc>Baš volim boks model</p><p id=wo>Baš volim boks model</p><p id=we>Baš volim boks model</p></body></html>

Baš volim boks model




Prvi pasus je običan pasus koji se sreće u čistom HTML - u, stim što sam mu samo dodao vrednost zaborder i za boju linije solid gray kako bi videli granice pasusa, odnosno tog box elementa. U drugom pasusu smo dodali još i širinu width od 200 piksela, visinu height od 100 piksela, i liniju granice smo malo podebljaji tako što smo stavili border 5 piksela. Znači u tom drugom pasusu vidimo kako smo definisali širinu i povećali visinu. U trećem pasusu smo umesto height stavili padding koji definiše u svim pravcima rastojanje izmedju sadržaja i linije granice, te imamo da je tekst od granica boxa udaljen podjednako od 20px u svim pravcima. Četvrti pasus je isti kao i drugi samo mu je dodat atribut margin od 30 piksela, što prouzrokuje da se u svim pravcima oko granice elementa napravi prazan prostor od 30 piksela.

Ovde smo demonstrirali upotrebu atributa width i height a ostale atribute smo ovde koristili samo da bi se lepše uočile stvari vezane za širinu i visinu. O tim drugim atributima sledi u nastavku mnogo više.

bubaj.com

IZRADA SAJTA za 10 €

20

Home FORUM Toplista HTML CSS JavaScript PHP DIZAJN SEO Mapa

Širina i visina CSS BOX elementaCSS borderCSS margin i paddingSadržaj CSS BOX elementa

KONTAKT

izuzetan[at]gmail.com

IgriceSlike

CSS borderAtribut border može imati po tri vrednosti, a to su boja, stil, i debljina. Svaka od te tri vrednostimože imati razne varijacije te ću ih dati kao spisak sa objašnjenjima, a nakon toga daćemo i primer koji će dočarati atribut border.

boja linije granice (color) - se može definisati imenovanjem boje (blue, red, black itd), ili uheksadecimalnom zapisu (#aabbcc), ili udecimalnom zapisu (rgb(23,123,12))

stil linije granice (style) - Vrednosti mogu biti:o none - ne vide se linije graniceo hidden - isto kao i none ali u situacijama sa drugim elementima da ne bi

došlo do sukoba vrednosti (najčešće u tablicama)o dotted - Odredjuje ukrasnu granicu u obliku tufnao dashed - Granice u obliku crticao solid - puna linijao double - prikazuje granice sa dve linije a izmedju prazan prostoro groove - 3D užljebljene granice. A izgled zavisi od border-color vrenostio ridge - efekat grebena. 3D efekat umišljene granice, koji takodje zavisi od

21

http://www.bubaj.com/top-lista-sajtova/

vrednosti border-coloro inset - odredjuje 3D umetak granice. Isto efekat zavisi od border-color

atributao outset - odredjuje početak 3D granice. Efekat zavisi isto od border-color

debljina linije granice (width) - Vrednosti mogu biti:o debljina u jedinicama CSS za dužinu - znači pikseli (px), milimetri (mm),

centimetri (cm), i sve ostalo što smo već objasnilio thin - tanka linija svih granicao medium - srednja debljina svih granicao thick - sve granice debele

Kao što znamo sve što je četvorougaono ima četri strane, ivice, ili kako god to nazvali. Kad napišemo samo border onda se tako definišu sve 4 ivice našeg box modela potpuno isto. Medjutim CSS omogućava definisanje i svih ivica drugačije kako nama odgovara. Na primer želimo definisati gornja ivicu onda pišemo atribut border-top, levu ivicu border-left, desnu ivicu border-right i donju ivicuborder-bottom. Svi ti atributi mogu imati spisak vrednosti kao i border atribut gore.

Ajde sad da vidimo neke karakteristične atribute kroz primer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #ba {width: 160; border: 5px dotted blue;} #bb {width:160; border: 5px dashed blue;} #bc {width:160; border: 5px solid blue;} #bd {width:160; border: 5px double blue;} #be {width:160; border: 10px groove;} #bf {width:160; border: 10px ridge;} #bg {width:160; border: 10px inset;} #bh {width:160; border: 10px outset;} #bi { width: 230; height: 50; border-top: 5px dotted black; border-left: 8px double blue; border-right: 4px dashed green; border-bottom: 15px solid black; } #bj {width:260; border-bottom: solid;}</style></head><body><span id="ba"> Boks model sa dotted</span> <span id="bb"> Boks model sa dashed</span> <span id="bc"> Boks model sa solid</span> <br><p><span id="bd"> Boks model sa double</span> <span id="be"> Boks model sa groove</span> <span id="bf"> Boks model sa ridge</span> </p><br><p><span id="bg"> Boks model sa inset</span> <span id="bh"> Boks model sa outset</span> </p><span id="bi"> Boks model sa 4 razlicite strane</span> <span id="bj"> Boks model samo sa donje strane linija</span></body></html>

22

Boks model sa otted

Boks model sa ashed

Boks model sa solid

Boks model sa double

Boks model sa groove

Boks model sa ridge

Boks model sa inset

Boks model sa outset

Boks model sa 4 razlicite strane

Boks model samo sa donje strane linija

Prva 8 spanova prikazuju sve varijacije stilova. U tim delovima vidimo da se sve 4 strane boksa obradjuju istim vrednostima te zato se koristi samo atribut border. A vrednosti se definišu tako što se samo nabrajaju iza dve tačke i nije potreban zarez već samo da su razmaknute. Vidimo takodje da ako nije zadata boja da je ona po defaultu crna, odnosno sa nijansama crne sive da bi se dobio odredjen stil. U devetom spanu smo stavili da nam sve 4 strane budu drugačije po skoro svim elementima. U desetom spanu smo demonstrirali

23

kako može da se definiše samo jedna strana boksa, ali naravno tom logikom možemo bilo koju drugu stranu ili kombinacije raznorazne. U desetom takodje primetite da mi ne moramo uvek zadavati debljinu border atributu. Možemo samo zadati stil i automatski se nacrta sa defaultnom debljinom od 3px.

U CSS postoji još jedna linija koja se može definisati. Naime radi se o spoljnoj liniji koja oivičuje border, to jest dodatno oivičava granične linije boksa. Za tu liniju apsolutno sve isto važe vrednosti kao i za border, jedino se umesto atributa border piše outline i nema mogućnosti da se posebno definišu pojedine ivice. Znači nema left, right, top, i bottom varijante. Evo jedng kratkog primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #bc { width: 250; border: 10px solid blue; outline: 15px dotted red; }</style></head><body><p id="ga">Boks model sa outline i border</p></body></html>

Boks model sa outline i border

Meni ovo nije radilo u internet explorer 8, neznam kod drugih.

CSS margin i paddingMargine su prazan prostor izmedju border dela i okolnih elemenata. Pomoću atributamargin se definiše veličina praznog prostora svuda oko border. Obzirom da border ima 4 strane postoji mogućnost da se zasebno odredi veličina praznog prostora oko sve 4 strane i to redom: margin-bottom definiše prazan prostor ispod donje ivice; margin-top definiše iznad gornje ivice; margin-left levo od leve ivice i; margin-right desno.

Svi ovi atributi, znači i margin, i margin-left, margin-right, margin-top i margin-bottom mogu imati sledeće vrednosti:

auto - defaultna vrednost koju dodeljuje sam brauzer dužina - na primer u pikselim, milimetrima, itd , znaci sve CSS merne jedinice dužina u procentima - procenat u odnosu na širinu elementa

Evo primera koji sve objašnjava:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> p {background-color: yellow;}

24

p.margine { margin-top: 85px; margin-bottom: 50px; margin-right: 500px; margin-left: 25px; }</style></head><body><p>Ovo je pasus bez ikakvih margina</p><p class=margine>Ovo je sa marginama koje su različite u svim pravcima</p><p>Ovo je pasus bez ikakvih margina</p></body></html>

Ovo je pasus bez ikakvih margina

Ovo je sa različitim marginama

Ovo je pasus bez ikakvih margina

Ako nam se veličina praznina razlikuje samo po horizontali u odnosu na vertikalu, što znači da su leva i desna iste , kao i gornja i donja onda to možemo kraće zapisati i ovako: margin:80px 40px . Stim što se 80 odnosi na dužinu vertikalnih a 40 na dužinu horizontalnih praznina.

Padding, za razliku od margin, definiše unutrašnje praznine izmedju sadržaja i bordera. Padding što se tiče obeležavanja atributa i njihovih vrednosti je potpuno isti kao i margin, samo umesto margin pišete padding, ovako: padding - definiše prazan prostor izmedju sadržaja i bordera u svim pravcima podjednako; padding-left - definiše veličinu praznog prostora levo od sadržaja i ivice; padding-right - desno; padding-top - gored i; padding-bottom - dole. Evo primera koji sve lepo dočarava.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> p.padng { width: 300px; border: 4px solid blue; padding-top: 5px; padding-bottom: 25px; padding-right: 50px; padding-left: 100px; }</style></head><body><p class=padng>Ovo je sa padding koji su različite u svim pravcima</p></body></html>

25

Ovo je sa padding koji su različite u svim pravcima

Takodje i ovde važi ona priča da ako trebamo definisati prostor samo po horizontali i vertikali onda pišemo padding: 30px 50px gde 50px definiše left i right praznine, a 30px top i bottom.

Sadržaj CSS BOX elementaKad je sadržaj veći od prostora kojeg nudi BOX onda po defaultu se on povećava naniže ili udesno. Medjutim to možemo promeniti. Atribut koji nam služi za to jeoverflaow koji može imati sledeće vrednosti:

auto - pojavljuju se vertikalni i horizontalni klizači isključivo po potrebi. hidden - nikad se ne pojave klizači, a i veličina polja će uvek biti striktno po

definisanim veličinama bez obzira i da se tekst ili bilo koji drugi sadržaj iseče. scroll - pojaviće se vodjice za scroll i po vertikali i po horizontali uvek bez obzira ako i

ne treba, a ako se pojavi potreba onda se ubacuje i klizač visible - to je kao i po defaultu, znači kao i bez overflow atributa. Bez obzira na

veličine height i width atributa sadržaj će proširivati box sve do kraja sadržaja. Ukoliko je tekst onda će se proširivati na dole po vertikali a po horizontali će zadržati definisanu vrdnost. Ukoliko je slika recimo, onda će se proširivati i po horizontali i po vertikali ako je potrebno.

Evo primera koji sve dočarava:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #skrl { width: 100px; height: 100px; overflow: scroll; } #hid { width: 100px; height: 100px; overflow: hidden; } #vis { width: 100px; height: 100px; overflow: visible; } #au { width: 100px; height: 100px; overflow: auto; } #bez {

26

width: 100px; height: 100px; }</style></head><body><div id="skrl"> Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll</div><br><div id="hid"> hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden</div><br><div id="vis"> visible visible visible visible visible visible visible visible visible visible visible visible visible visible visible</div><br><div id="au"> auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto</div><br><div id="bez"> bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow</div></body></html>

Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll Scroll

hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden hidden

visible visible visible visible visible visible visible visible visible visible visible visible visible visible visible

auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto

bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow bez atributa overflow

Naravno i atribut overflow podržavaju uglavnom noviji brauzeri jer je iz CSS2 specifikacije.

CSS displayU ovom delu atributi su i iz CSS 1 specifikacije ali i u velikom broju iz CSS 2. Ovi novi atributi su jako zanimljivi, kao što će te videti i sami, ali problem je što ih podržavaju naravno uglavnom nove verzije brauzera. Medjutim nesme se zanemariti činjenica da pojedini posetioci još uvek posećuju sajtove sa starijim brauzerima. Dakle treba još vremena da zažive u većem obimu brauzeri koji podržavaju CSS 2 atribute. Ajde da vidimo kakve nove efekte CSS sprema za budućnost :)

CSS atribut DISPLAY

27

U HTML postoje elementi koji u nekim slučajevima iako sadržajem ne ispunjavaju do kraja celu širinu ekrana ne dozvoljavaju prisustvo u nastavku sadržaju drugom elementu. Takvi su na primer <h1>, <p>,<div> itd. i oni se zovu blok elementi.

Postoje elementi koji dozvoljavaju i druge sadržaje u ekranskoj liniji u kojoj se nalaze. Takvi elementi su <span> i <a>, i nazivaju se inline elementima.

CSS uvodi jedan atribut DISPLAY koji ima sposobnost da blok elementima omogućava ponašanje sa okolnim sadržajem kao da su inline, a inline kao da su blokovi. Evo primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> #displ {display: block} #inl {display: inline}</style></head><body><p>Recicu iskreno da je <a href=#>OVAJ SAJT ZA UČENJE</a> vrlo, ali vrlo, ozbiljan sajt</p><p>Recicu iskreno da je <a href=# id=displ>OVAJ SAJT ZA UČENJE</a> vrlo, ali vrlo, ozbiljan sajt</p><p>Pasusi koji nisu prebaceni u inline</p><p>Pasusi koji nisu prebaceni u inline</p><p id=inl>Pasusi koji jesu prebaceni u inline</p><p id=inl>Pasusi koji jesu prebaceni u inline</p></body></html>

Recicu iskreno da je OVAJ SAJT ZA UČENJE vrlo, ali vrlo, ozbiljan sajt

Recicu iskreno da jeOVAJ SAJT ZA UČENJEvrlo, ali vrlo, ozbiljan sajt

Pasusi koji nisu prebaceni u inline

Pasusi koji nisu prebaceni u inline

Pasusi koji jesu prebaceni u inline

Pasusi koji jesu prebaceni u inline

Mislim da je ovde sve jasno. Display atribut može pored ove dve vrednosti block i inline imati još neke vrednosti. Evo spiska sa objašnjenjima:

- none - sakriva element. Evo primera:

<style>#test1 {display: none;}</style>

28

<div>bez sakrivanja</div><div id="test1">sakrivanje</div>

bez sakrivanja

Primetite (naravno oni sa novim brauzerima) da na desnom delu u rezultat se ne vidi tekst iz DIV sa identifikacijom "test1".

-list-item - sve elemente pretvara u listu. Evo primera:

<style>#test1 {display: list-item; list-style-position: inside;}</style><div>nesto u div</div><span>nesto u span</span><p>nesto u P</p><br><br><div id="test1">nesto u div sa id=test1</div><span id="test1">nesto u span sa id=test1</span><p id="test1">nesto u P sa id=test1</p>

nesto u div nesto u span

nesto u P

nesto u div sa id=test1nesto u span sa id=test1

nesto u P sa id=test1

Vi display: list-item morate uvek pisati u kombinaciji sa list-style-position: inside, inače neće doći do efekta, ili hoće ali u kombinaciji sa recimo padding-left: 20px. I još nešto, preporučujem korišćenje samo neuredjenih lista u kombinaciji sa display: list-item, jer često se dešava kad se koriste uredjene da brojanje ne počinje od 1 već od nekog broja. Naime neki brauzeri broje sve elemente a ne samo one koje mi želimo. To se dešava jer pojedini brauzeri oćito imaju bagove. Takodje oni sa novijim operama vide da pasus (iako ima tačku ispred, i da pravi listu) je spušten za jedan red niže, ali naravno to ne treba tako jer je bag. Sva tri elementa (verovatno u budućnosti) će graditi lepu listu.

Postoje još: - run-in - element će biti prikazan ili kao inline ili kao blok-element, zavisno od sadržaja. - compact - opet, element će biti prikazan ili kao inline ili kao blok-element, zavisno od sadržaja, a u cilju uštede ekranskog prostora.

29

Vrednosti run-in i compat nisu podržane od ogromne većine brauzera, a mnogi brauzeri koji kao podržavaju imaju bagove, te nećemo ih nešto posebno objašnjavati primerima. Mislim nema smisla jer đaba ja napišem nešto i prokomentarišem rešenja ako većina vas vidi sasvim nešto drugo na ekranu. Ispašće da lažem.

Medjutim postoje i tabelarne display vrednosti. Zapravo te vrednosti su uveli u CSS kako bi zamenile HTML tabele u dizajniranju stranica. A klasične HTML tabele preporučuju za prikazivanje podataka tabelarno. U sledećem naslovu ćemo više o tim tabelarnim display vrednostima

CSS DISPLAY i tabeleAtribut DISPLAY ima i, nazovimo, tabelarne vrednosti pomoću kojih mogu da se kreiraju pod znacima navoda tabele, prvenstveno namenjene dizajniranju internet strana. Spisak tih vrednosti sledi:

table - vrednost u display atributu koja je analogija <table> HTML tagu table-row - vrednost u display atributu koja je analogija <tr> HTML tagu table-cell - vrednost u display atributu koja je analogija <td> HTML tagu table-row-group - trebalo bi da bude nešto kao analogija figurativno tbody za

tabelu kao body u html kodu table-header-group - analogno kao nekom, nazovimo figurativno, thead za te CSS

tabele, a kao analogija head tagu u HTML kodu table-footer-group - trebalo bi da se definiše kao podnožje tabele (čitaj podnožje

internet strane) table-caption - kao neki deo za naslov tabele. Zapravo tačnije za internet stranice,

jer u stvari mi sad pravimo alat za lakše dizajniranje stranica. table-column - vrednost koja bi trebala (ako zatreba) da definiše pojedinu kolonu

(primećujete da tako nešto nije postojalo u HTML tabelama). table-column-group - vrednost koja bi trebala ako zatreba da definiše čitave grupe

kolona (takodje nije postojalo u HTML tabelama).

Ako uzmemo neke od gornjih vrednosti sa njihovim značenjem ajde da napravimo tu CSS tabelu sa, na primer, tri ćelije:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> .kontejner {display: inline-table;} .redovi {display: table-row;} .celije { display: table-cell; width: 100px; height: 20px; border: 1px solid blue; padding: 3px; }</style></head><body><div class="kontejner"> <div class="redovi"> <div class="celije">CELIJA A</div> <div class="celije">CELIJA B</div>

30

<div class="celije">CELIJA C</div> </div></div></body></html>

CELIJA ACELIJA BCELIJA C

Samo napomena da trebate kao rezultat videti ćelije koje su rasporedjene ne jedna ispod druge nego jedan pored druge horizontalno. Svi oni koji vide ćelije jednu ispod druge njihovi brauzeri ne podržavaju CSS tabele. Jer i bez ikakvih display atributa prave se ćelije jedna ispod druge. Poenta je napraviti ih tabelarnim vrednostima jednu pored druge. Nastavimo sad dalje.

Medjutim obzirom da smo sada na terenu CSS-a, komotno će raditi potpuno isto i sledeći kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> .celije { display: table-cell; width: 100px; height: 20px; border: 1px solid blue; padding: 3px; }</style></head><body><div class="celije">CELIJA A</div><div class="celije">CELIJA B</div><div class="celije">CELIJA C</div></body></html>

CELIJA ACELIJA BCELIJA C

Ovakva CSS tabela koja ima samo ćelije naziva se anonimna tabela. Ovde smo izbacili klase sa atributima display: inline-table i display: table-row da bi demonstrirali kako se u CSS mogu kreirati fleksibilnije tabele. Naravno takve anonimne tabele imaju svoju primenu , ali takodje i atribute koje smo izostavili imaju svoju logiku i primenu. Na primer u klasu koju smo nazvali kontejner možemo ubacivati atribute koji su opšti za celu jednu tabelu, pa kasnije kad hoćemo nešto menjati, menjamo samo kontejner, itd. Takodje i svi ostale vrdnosti tabelarne koje smo nabrojali za atribut display itekako imaju svoju primenu.

Za sada će mo ovde stati sa teorijom u vezi CSS tabela iz prostog razloga što ih jako malo brauzera podržava. A i oni koji podržavaju većina ima bagova.

31

Evo spisak brauzera sa njihovim verzijama od kojih su počeli da podržavaju CSS tabele: firefox 2, opera 9.62, internet explorer 8.x, safari 4.0b, chrome 2, konqueror 3. Svi ispod tih verzija ne podržavaju.

CSS dimenzijeOvde se misli na definisanje širine i visine elemenata. Već smo upoznali atribute za definisanje širine (width) i visine (height) ali sada će mo ovde kompletirati sve atribute. Evo spiska a zatim i primer:

height - definiše visinu elementa. Jedinice su:o auto - defaultna vrednost koju odredjuje brauzer u zavisnosti od prave

veličine elementao dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicamao % - procentualna visina u odnosu na visinu elemena

max-height - definiše maksimalnu visinu elementao dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicamao % - procentualna visina u odnosu na visinu elementa

min-height - definiše minimalnu visinu elementao dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicamao % - procentualna visina u odnosu na visinu elementa

width - definiše širinu elementao auto - defaultna vrednost koju odredjuje brauzero dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicamao % - procentualna visina u odnosu na visinu elementa

max-width - definiše maksimalnu čirinu elementao dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicamao % - procentualna visina u odnosu na visinu elementa

min-width - definiše minimalnu širinu elementao dužina - vrednost u pikselima, milimetrima i ostalim CSS jedinicamao % - procentualna visina u odnosu na visinu elementa

Verovatno se pitate kakva je razlika izmedju na primer max-width i width? Recimo definišemo neki prostor gde će stajati slike sa max-width = 200px. E sad ako unese posetilac sliku koja je manja od 200 piksela onda će se u tom prostoru širina te slike prikazati po defaultu. Znači neće se ni smanjiti ni povećati. Jedino ako neki posetilac unese neku sliku koja je veće širine od 200px, onda će se širina slike smanjiti na 200px, jer je to maksimum. Ali ako smo taj prostor definisali striktno sa width = 200px onda kakvu god širinu slike posetilac uneo, znači i manju ili veću nebitno, uvek će širina slike biti 200px u tom prostoru. Evo jednog primera gde unapred definišemo koliki će prostor biti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#cv { max-width: 50px; max-height: 50px}</style></head><body><span><img src="csspozadina.gif"></span>

32

<span><img src="csspozadina.gif" id="cv"></span></body></html>

max-width, max-height, min-width i min-height podržavaju noviji brauzeri.

CSS LAYERMožemo definisati poziciju (položaj) svakog HTML elemenata u prostoru na različite načine uz pomoć CSS -a. Sad ću dati spisak atributa koji definišu odredjene načine pozicioniranja elemenata:

Bottom, left, right i topDo sad smo bottom, left, right i top koristili kao vrednosti nekih atributa ali oni se mogu koristiti i kao atributi. Oni se kao atributi koriste uglavnom nakon atributa koje ćemo ovde u nastavku razmatrati. Ali najpre ću dati sliku na kojom ću pokušati da objasnim atribute left, right, bottom i top:

Mislim da je slika jasna i da ne treba neko posebno objašnjenje. Vrednosti za bottom, top, right i left mogu biti u procentima (u odnosu na veličinu elementa), dužinskim jedinicama (pikseli, milimetri i ostale CSS jedinice mere), i auto što je i po defaultu.

33

PositionPosition atribut definiše poziciju elementa na osnovu jedne od sledećih vrednosti:

static - to je pozicija po defaultu, kad i ne koristimo position atribut absolute - Pomoću ove vrednosti odredjujemo tačan položaj elementa u odnosu na

"body" površinu, bez obzira na položaj bilo kog drugog elementa.

Nakon atributa position: absolute slede atributi bottom, top, left, ili right koji će definisati tačku ili oblast gde će biti apsolutan položaj elementa. Evo na primer definišimo da nam neki tekst bude u apsolutnom nekom položaju:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#abs { position: absolute; left: 165px; top: 60px;}</style></head><body><h3 id="abs">Ovo je kao naslov tog nekog podugačkog teksta</h3><p>Ovo je neki podugacak tekst</p></body></html>

Kao što vidite mi smo dali apsolutnu poziciju naslova pomoću "kordinata" u left i top atributima, tako da on ne stoji iznad teksta već ispod njega, iako bi na osnovu HTML koda trebao da stoji iznad teksta.

Fixed

34

Fixed fiksira položaj nekog objekta na ekranu tako da bez obzira da li mi pokrećemo scrollbar -ove (ako ih ima), tekst i dalje stoji u istom položaju ekrana. Evo primera i sve će biti jasnije:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#ku { position: fixed; left: 845px; top: 52px}</style></head><body><p id="ku">Fiksiran tekst</p><p>Internet Explorer 7 (ili noviji) podržava ovaj atribut, ali uz !DOCTYPE specifikaciju</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p></body></html>

Pogledajte u brauzeru kako radi ovaj kod. Znači iskopirajte ga u neki fajl sa ekstenzijom htm. i taj fajl otvorite brauzerom (po mogućstvu neki noviji brauzer). Primetićete da i ako klizačem idete naniže jedan tekst će uvek biti fiksiran na ekranu i neće se pomerati.

RelativeRelative je atribut kojim definišemo položaj elementa u odnosu na normalan položaj koji bi taj element imao kad ne bi primenili taj CSS atribut "realative". Možda je ovako napisano malo nejasno, ali primer će svima biti jasan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Relative</title></head><body><p>Obican tekst</p><p style="position: relative; left: -100px; top: 10px">Tekst kojeg pomeramo relativno</p></body></html>

Obican tekst

35

Tekst koji pomeramo relativno

Oni sa novijim brauzerima primećuju kako je tekst u odnosu na normalan položaj koji bi imao zbog HTML koda pomeren prilično u levo. Znači poenta je u tome da se pozicija nova odredjuje u odnosu na poziciju koju bi element imao na osnovu HTML koda.

Z-indexMoguće je da ako na odredjeni način upotrebimo atribute relative ili absolute može doći do preklapanja elemenata. E sad na primer preklope se neki tekst i neka slika, onda mi pomoću argumenta z-index možemo odrediti koja od ta dva elementa će biti iznad, ili ispod, odnosno koji će u delu preklapanja biti vidljiv a koji ne. Evo primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css">#ispod { position: absolute; left: 0px; top: 0px; z-index: -1;}#iznad { position: absolute; left: 110px; top: 0px; z-index: 1;}</style></head><body><p>Ovaj tekst na osnovu HTML koda treba da se pojavljuje ispod slike</p><img src="pozadina.gif" id="ispod"><img src="pozadina.gif" id="iznad"></body></html>

36

Primetićete da je tekst ispisan na slici u jednom delu vidljiv a u drugom nije u zavisnosti od vrednostiz-index: -1 - vidljiv, a kad je 1 nije vidljiv. Znači u tome je poenta. z-index odredjuje koji element će biti ispred a koji iza ukoliko se medjusobno preklapaju. Takodje z-index jedino i uvek ide u kombinaciji sa atributima absolute, fixed i relative, i to nakon njih u CSS kodu. E sad postoje tu još neke varijacije kad se preklapaju više elemenata jer onda se koriste i brojevi veći od 1 (naravno i u negativnom i u pozitivnom smeru), kako bi smo tačno definisali koji objekti su ispred kojih.

ClipClip atribut prikazuje samo onaj deo elementa koji želimo da bude vidljiv. Znači na primer ako imamo neku sliku možemo definisati pomoću ovog atributa da se vidi samo neki deo slike (na primer prva četvrtina slike) a ne i cela slika. Vrednosti ovog atributa su auto - što je i po defaultu, kad i nema atributa clip, i rect(top, right, bottom, left) - kad tačno definišemo oblast unutar elementa koji želimo da bude vidljiv. Evo primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style type="text/css"> img { position: absolute; clip: rect(0px, 300px, 150px, 0px); }</style></head><body><img src="boksmod.gif" width=580 height=300></body></html>

I ovaj primer prebacite u neki fajl (u kome se nalazi i slika bilokojaslika.gif) i otvorite brauzerom. Primetićete da slika nije prikazana u celosti već samo njena gornja leva četvrtina.

CSS i cursorCSS2 je uveo mogućnost upravljanja načina prikazivanja kursora. Atribut je cursor. Ovo je vrlo jednostavan atribut zato je dovoljan samo primer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head></head><body><span style="cursor: auto">auto</span><br /><span style="cursor: crosshair">crosshair</span><br /><span style="cursor: default">default</span><br /><span style="cursor: e-resize">e-resize</span><br /><span style="cursor: help">help</span><br /><span style="cursor: move">move</span><br /><span style="cursor: n-resize">n-resize</span><br /><span style="cursor: ne-resize">ne-resize</span><br /><span style="cursor: nw-resize">nw-resize</span><br /><span style="cursor: pointer">pointer</span><br /><span style="cursor: progress">progress</span><br />

37

<span style="cursor: s-resize">s-resize</span><br /><span style="cursor: se-resize">se-resize</span><br /><span style="cursor: sw-resize">sw-resize</span><br /><span style="cursor: text">text</span><br /><span style="cursor: w-resize">w-resize</span><br /><span style="cursor: wait">wait</span><br /></body></html>

auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait

Kako prelazite preko reči tako se i menja izgled kursora. Reči su engleske i one su u stvari predefinisane ključne reči za taj konkretan izgled kursora. Ovaj atribut naravno podržavaju uglavnom novi brauzeri.

38

Documents

Web viewDa nastavimo objašnjenje opšte šeme opisa. Znači navede se selektor (ili više njih odvojenih zarezom) a u vitičastim zagradama se nabrajaju atributi koji se