css stilovi
DESCRIPTION
hgghTRANSCRIPT
HTML je originalno dizajniran sa definiše sadržaj dokumenta. On je trebao da bude jednostavan opisni jezik sadržaja koji kaže „Ovo je tabela (table)“, „Ovo je paragraf (paragraph)“, „Ovo je zaglavlje (header)“ koristeći tagove <table>, <p>,<head>... Izgled je trebao da definiše browser bez korišćenja ijednog taga za formatiranje. Tadašnji velikani među browser-ima, Netscape i Internet Explorer, su originalnoj specifikaciji HTML dodavali HTML tagove i atribute (na primer <font> tag i color atribut). Kako je HTML postajao komplikovaniji, bilo je sve više mogućnosti za definiciju izgleda elemenata, ali je istovremeno postajao nečitljiviji i teži za održavanje dok je izrada web stranica u kojima je jasno odvojen sadržaj od izgleda je postala nemoguć zadatak. Dodatno, različiti browser-i su prikazivali dokumente na različite načine, i postojala je potreba za jedinstvenom tehnikom definisanja prikaza elemenata na stranici. I te potrebe nastao je CSS (Cascading Style Sheets), jezik formatiranja pomoću kog se definiše izgled elemenata web-stranice.
Dakle, nekada je HTML služio da definiše kompletan izgled, strukturu i sadržaj web-stranice, ali je od verzije 4.0 HTML-a uveden CSS kojim se definiše izgled, dok je HTML ostao zadužen za definisanje strukture i sadržaja.
CSS sintaksa se sastoji od opisa izgleda elemenata u dokumentu. Opis može da definiše izgled više elemenata, ali i više opisa može da definiše jedan element. Na taj način se opisi slažu jedan preko drugog da bi definisali konačni izgled određenog elementa. Tako je nastao i naziv Cascading (Eng. cascade - crep), da bi se dočaralo slaganje jednog stila preko drugog u definisanju konačnog izgleda elementa
Svaki opis se sastoji od tri elementa:
definicija ciljnih elemenata svojstva (atributi) vrednosti
Nakon što definišemo ciljne elemente, tj. elemente na koje će se trenutni opis odnositi, nizom parova svojstvo-vrednost definišemo izgled svakog ciljnog elementa. Sintaksa koja se pri tome definiše je sledećeg oblika:
ciljni elementi { atribut1: vrednost1; atribut2: vrednost2; }
CSS podržava i komentare, dakle navode se između znakova /* i */ .
Ciljni elementi se definišu na tri načina:
1. navodeći HTMLtagciljnih elemenata 2. navodeći klasu elemenata 3. navodeći direktnu identifikacionu vrednost (ID) elementa
Kada definišemo stil preko HTML taga (1.), to znači da će ovaj opis uticati na sve elemente u dokumentu koji imaju ovaj tag. Definicija ciljnih elemenata se tada vrši preko direktnog upisa odgovarajućeg HTML taga:
p { svojstvo: vrednost; }
Klasa HTML elementa je reč koju stavimo kao vrednost argumenta class pri definiciji tog elementa (2.). Definicija ciljnih elemenata (svih koji imaju određenu istu klasu) se vrši tako što upišemo znak tačke (.) a zatim naziv klase:
.imeKlase { svojstvo1: vrednost1; svojstvo2: vrednost2; }
Ovaj opis će, dakle, imati uticaja na sve elemente u dokumentu koji su definisani na sledeći način:
<p class = "imeKlase" > ... </p > <div class = "imeKlase" > ... </p >
Identifikaciona vrednost elementa je vrednost argumenta ID pri definiciji tog elementa (3). U jednom dokumentu identifikacione vrednosti moraju biti jedinstvene, tj. može postojati samo jedan element sa određenom identifikacionom vrednošću, što znači da ovakvi opisi mogu uticati samo na po jedan element u dokumentu. Definišu se pomoću znaka tarabe (#) a zatim identifikacionu vrednost:
#IDVrednost { svojstvo1: vrednost1; svojstvo2: vrednost2; }
Ovaj će, dakle, opis uticati na sve elemente koji u svojoj HTML definiciji imaju id="IDVrednost" .
Pogledajte primer ispod:
stilovi01.html<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Stilovi</title>
<style type="text/css">
/* 1. navodeći HTML tag ciljnih elemenata */
p {color: #0000ff; }
/* 2. navodeći klasu elemenata */
.redtext {color: #ff0000; text-align:center; }
/* 3. navodeći direktnu identifikacionu vrednost (ID) elementa */
#greentext {color: #00ff00; text-align:right; }
</style> </head> <body> <p>Prvi pasus. Tekst je levo poravnat i plave boje. </p> <p id="greentext">Drugi pasus. Tekst je desno poravnat i zelene boje.</p> <p class="redtext">pasus. Tekst je centriram i crvene boje. </p> </body> </html>
CSS kod se može zadavati na tri standardna mesta:
1. direktno u HTML tag-u, koristeći argument style (inline) 2. u zaglavlju dokumenta unutar taga style 3. u eksternoj datoteci, koja se linkuje tag-om link
Za jako male dokumente, argument style u nekom tagu (1.) može biti prihvatljiv, ali za veće dokumente ne može jer se na ovaj način stil definiše za svaki elemenat ponaosob. Ovo treba izbegavati jer nepotrebno gomila kod u dokumentu i potire osnovni razlog uvođenja CSS razdvajanje definicije izgleda od samog sadržaja i negativno utiče na čitljivost čime se otežava i održavanje stranice. Argument style taga se najčešće koristi ako neki element ne pripada nijednoj grupi i ima posebne zahteve u odnosu na sve ostale elemente.
Definicija stilova se najčešće radi grupišući elemente u klase, pomoću argumenta class taga, a zatim definišući izgled tih klasa bilo u okviru elementa style u zaglavlju (2.) ili u eksternoj datoteci (3.). Ako definišemo stil u zaglavlju njegov opseg vidljivosti je ta stranica, to jest samo elementi na ovoj stranici mogu koristiti stilove definisane u zaglavlju stranice.
Stilovi u eksternoj datoteci imaju jednu prednost u odnosu na preostala dva načina (stilovi definisani u zaglavlju i inline stilovi), a to je da pomoću eksterne datoteke možemo da utičemo na elemente više dokumenata. Dovoljno je da Web dizajner bude dosledan u definisanju klasa elemenata, da bi jedan fajl sa stilovima određivao izgled svih stranica. Bilo koja izmena u fajlu sa stilovima utiče na sve stranice koje koriste te stilove. Na ovaj način pomoću eksterne datoteke možemo centralizovano da upravljamo stilovima i izgledom dela ili celog sajta. Eksterna datoteka u kojoj se čuvaju CSS stilovi je obična tekstualna datoteka sa ekstenzijom .css
Koji će stil biti korišćen ako definišemo stil za isti elemenat na više mesta?
Uopšteno govoreći, možemo reći da se stilovi slažu u jedan virtuelni stil pri čemu su poređani po starini, što je veći broj nabrajanju stil ima veći prioritet.
1. Browser default2. External style sheet3. Internal style sheet (unutar <head> taga)4. Inline style (unutar HTML elementa)
Znači inline CSS (unutar (inline) HTML elementa) ima najveći prioritet, što znači da će „pregaziti“ svaku definicije u prethodna četiri slučaja. Stil definisan unutar head sekcije dokumenta je stariji od eksternog fajla i browser default-a. Browser default zavisi od podrazumevanih postavki konkretnog browser-a. Pogledajmo sledeći primer. Recimo da imamo jedan eksterni CSS fajl u kojem je definisan izgled za <p> HTML elemenat, u našem primeru definisali smo za <p> tag da je zelene boje i snimili ovaj fajl pod imenom eksterni.css.
eksterni.css p { color:#00FF00; }
Sada pravimo fajl stilovi02.html sa definicijom izgleda <p> taga u okviru <head> sekcije HTML dokumenta kojim smo definisali da je svaki pasus crvene boje i sa jednom definicijom stila u okviru taga unutar body sekcije u kojem smo rekli da je tekst plave boje. Linkujemo sa fajlom eksterni.css navodeći liniju koda <link href="eksterni.css" rel="stylesheet" type="text/css" />. Naravno, relativna dresa podrazumeva da se fajlovi stilovi02.html i eksterni.css nalaze u istoj fascikli.
stilovi02.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Stilovi</title>
<!-- definicija stila u okviru head sekcije dokumenta u pomoć style taga --> <style type="text/css">
p {color:#ff0000; }
</style>
<!-- linkovanje fajla css ekstenzije koji unutar sebe sadrži definiciju stila --> <link href="eksterni.css" rel="stylesheet" type="text/css" />
<!-- Zamislite da se sadržaj dokumenta eksterni.css umeće na ovo mesto u dokumentu--> </head>
<body> <p>Prvi pasus.</p> <!-- inline definicija stila u okviru konkretnog taga --> <p style="color:#0000FF">Drugi pasus. </p> <p>Treci pasus.</p> </body> </html>
Rezultat bi trebalo da bude sledeći: Drugi pasus biće uvek plave boje jer je inline stil najstariji, zatim će važiti CSS definicaja p taga definisan unutar stila u okviru head sekcije dokumenta, zato će prvi i treći pasus biti crvene boje, a zelene boje neće biti nijedan deo teksta iako je definisan u eksternom fajlu jer je definicija u okviru head sekcije dokumenta starija od definicije u eksternom CSS fajlu. Tek ukoliko uklonite definiciju stila za p tag u head sekciji dokumenta za prvi i i treći pasus važiće pravilo definisano u eksternom css fajlu i biće zelene boje.
Svojstva na koja želimo da utičemo u datom opisu se definišu preko niza ključnih reči definisanih u W3C standardu, a koje se kategorišu 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 pojedinih svojstava se definišu na dva načina:
predefinisanim ključnim rečima brojevnim vrednostima
Predefinisane ključne reči za vrednosti svojstava se koriste u situacijama kada dato svojstvo ima ograničen broj mogućnosti. Tako na primer svojstvo za definiciju pozadine elementa može biti samo scroll (da se kreće uvek zajedno sa sadržajem elementa) i fixed (da stoji uvek na istom mestu bez obzira na sadržaj).
Brojevne vrednosti se mogu zadavati na nekoliko načina:
zadajući samo brojevnu vrednost navodeći i jedinicu veličine skupa sa opisom (px, em, pt, ...)
Ponovimo naučeno i naučimo nešto novo o CSS-u
Tri su moguća načina da sačuvamo CSS pravila:
1. izvan HTML dokumenta (external style sheets)
Lepota i snaga CSS-a leži upravo u mogućnosti da se svi stilovi koje ćete koristiti na celom sajtu smeste izvan HTML dokumenta. To nam omogućava da promenom stila na jednom jedinom mestu promenimo prikaz na celom sajtu! Ovom metodom sve stilove smeštamo u zaseban CSS dokument - običan fajl sa .css ekstenzijom kojeg možete napisati u Notepadu i snimiti npr. u root direktorijumu u kojem se nalazi i homepage (index.html). U njemu ćemo definisati sva CSS pravila koja vam trebaju na sajtu i nazvati fajl npr. mojstil.css. Eksterni .css fajl treba povezati s HTML dokumentom. To se radi uglavnom pomoću <LINK> tag-a u <head> sekciji:
<head> <TITLE> Naslov stranice </TITLE><LINK rel="stylesheet" type="text/css" href="http://www.cnti.info/mojstil.css"></head>
Jednom kad povežete HTML dokument sa .css fajlom, stilovi definisani u njemu primenjuju se na tagove pomoću class atributa.
2. unutar <head> tag-a HTML dokumenta (embedded, document-level style sheets)
CSS definišemo unutar specijalnog <style> tag-a:
<head><title> naslov stranice </title><style type="text/css"> p { font-size: large; color: red }</style></head>
Primetite da unutar <style> tag-a obavezno morate definisati tip stila: ovde je to type="text/css". Ova metoda definisanja CSS stilova dobra je ako različitim HTML stranicama želite dodati različite stilove.
3. unutar samog HTML tag-a (inline styles)
Stilove možemo umetati u gotovo svaki HTML tag pomoću atributa style i direktnog specificiranja stila na sledeći način:
<p style="font-size: large; color: red"> neki tekst paragrafa prikazan velikim slovima i crvenom bojom </p>
Napomena! Nemojte pomešati <style> tag koji smo koristili u metodi pod 2) i style atribut koji koristimo ovde. Radi se o dve različite stvari (jedno je tag, a drugo atribut). Inline stilovi mogu biti korisni ako vam određeni stil treba samo na jednom jedinom mestu i nigde više - tada bi bilo glupo taj stil definisati globalno i nepotrebno povećavati veličinu CSS dokumenta. Inline stilovi imaju najviši prioritet od svih metoda za umetanje CSS stilova - specifikacija u inline stilu će pregaziti sve ostale CSS specifikacije. Upravo u tu svrhu se inline stilovi najčešće i koriste.
Ponovimo sintaksu
Svako CSS pravilo pišemo u sledećem obliku (kôd se radi preglednosti obično piše u nekoliko linija):
selektor { ime-stila1: vrednost1; ime-stila2: vrednost1 vrednost2 }
Selektor definiše kojem HTML tagu želite dodati CSS stil i u vitičastoj zagradi određujete kako će taj stil izgledati. Stil određujete tako da naznačite ime stila i dodelite mu vrednost. Ako definišete više stilova, odvajajte ih tačka zarezom. Tačka zarez ne piše se iza poslednjeg navedenog stila. Jednom stilu možete dodeliti više vrednosti i tada ih samo navodite bez interpunkcija.
Primer:
table { background-color: blue; border: 2px solid red }
Ovim smo kao selektor odabrali tag table i odredili da će svaka tabela u našem dokumentu imati plavu pozadinu i ivicu širine 2 piksela iscrtan punom linijom crvene boje.
Primetite da su atributu border dodate tri vrednosti koje smo odredili bez upotrebe interpunkcija.
Ova osnovna sintaksa je vrlo jednostavna - zapamtite gde idu zagrade, dvotačke i tačka zarezi i ne možete pogrešiti. S vremenom ćete naučiti i koje izraze koristiti kao atribut i vrednost - postoji samo ograničen broj mogućnosti koje se mogu pojaviti na tim mestima. Proširimo sad osnovnu sintaksu CSS-a!
Nizanje selektora
Jedan te isti stil možemo primeniti na nekoliko selektora (HTML tag-ova) odjednom:
h1, h2, h3 { color: green; text-align: right }
Svi naslovi sadržani u heading tag-ovima h1, h2 i h3 biće zeleni i poravnati u desno. Svaki put kad isti skup stilova želite primeniti na nekoliko različitih tag-ova, koristite nizanje selektora. Primetite samo da kod nizanja selektore morate odvojiti zarezom.
Kontekstualni selektori
CSS vam omogućava da određene stilove primenite samo kad se neki HTML tag nalazi u određenom kontekstu, tj. u određenoj okolini. Zamislite da želite sadržaj u italic tagu <i> obojen zelenom bojom, ali samo u naslovu drugog reda. Tada biste napisali sledeći stil:
h2 i { color: green }
Svaki put kad browser naleti na italic tekst unutar h2 naslova, on će taj tekst prikazati zelenom bojom. Italic tekst u ostatku sadržaja neće biti zelen. Na ovaj način možete usloviti prikazivanje stilova. Zapamtite samo da u ovom slučaju ne smete koristiti zareze jer će to browser protumačiti kao nizanje. Kontekstualne selektore možete kombinovati s nizanjem:
h1 i, h3 i { color: blue; font-weight: bold }
Svaki italic tekst unutar h1, i h3 naslova biće plav i podebljan. Dosad smo CSS pravila pisali tako da smo birali HTML tag i odredili koje stilove će on poprimiti. Na taj način smo određeni skup stilova uvek ograničavali na određene tagove. Međutim, CSS stilove možemo koristiti i univerzalno i tada koristimo klase.
Kao što smo videli klasa je skup CSS pravila koji se definiše imenom klase. Da biste videli efekte koje ste u klasi definisali, ime klase trebate pozvati u HTML dokumentu u okviru nekog HTML tag-a pomoću class atributa.
Generičke klase
Generička klasa nije vezana za pojedini HTML tag i može se upotrebljavati na neograničenom broju lokacija unutar HTML dokumenta. Definišemo je proizvoljnim imenom kojem prethodi tačka:
.plavo { color: blue}
Generičku klasu pozivate pomoću class atributa:
<a href="http://www.cnti.info" class="plavo"> Ovo je primer linka </a>
Klase specifične za pojedine HTML tagove
Određenu klasu možete vezati uz pojedini HTML tag. U tom slučaju ispred tačke navodite tag na koji će se klasa primenjivati:
p.zeleno { color: green }
Ovim smo definisali klasu zeleno i dodelili klasu HTML tagu <p>. Svaki put kad želite neki paragraf obojiti zeleno, moraćete unutar HTML dokumenta pozvati klasu na sledeći način:
<p class="zeleno"> Zeleni tekst pasusa </p>
Pseudo-klase
Pseudo-klase mam omogućavaju da definišemo izgled pojedinih HTML tag-ova u određenim stanjima. Najpoznatije i najkorištenije pseudoklase su one koje određuju izgled linkova, tj. izgled <a> tag-a . Pseudo-klase se (umesto tačkom) od HTML tag-a odvajaju dvotačkom. Pseudo-klase su zasad definisane samo za <a> i <p> tagove:
a:link - određuje izgled HREF neposećenog linkaa:active - određuje izgled HREF aktivnog linka a:visited - određuje izgled HREF linka kojeg smo već posetili
p:first-line - kontroliše izgled prve linije paragrafa p:first-letter - kontroliše izgled prvog slova paragrafa
Na primer, možemo odrediti da link ne bude podvučen i da bude crvene boje ali kad se nacilja mišem da postane podvučen
а:link {text-decoration: none; color: red} а:hover {text-decoration: underline;}
Korištenje ID oznaka kao klasa
Kao klasu možemo koristiti ID oznake, ali podsetimo se, postoji jedna velika razlika. Dok istu klasu možete koristiti na više mesta i za više HTML tag-ova, ID oznake ne možemo višestruko koristiti. One se koriste da bi se određenom elementu dodelio specifičan stil koji neće imati nijedan drugi element u HTML dokumentu.
Sintaksa je jednostavna. Na istom mestu gde bismo inače definisali klasu, definišemo ID oznaku:
#crno { color: black }
ID oznaku pozivate pomoću ID atributa unutar raznih HTML tag-ova :
<h2 id="crno">Ovo je naslov drugog reda crne boje.</h2>
Neki browser-i će vam možda dozvoliti da ID oznaku koristite na više mesta, ali to definitivno nije željeno ponašanje i bolje je da u tu svrhu koristimo klase.
Tagovi <div> i <span>
Ova dva HTML tag-a jesu odličan način da bilo kojem HTML elementu ili delu HTML koda dodate CSS stil. Ovi tagovi se koriste <div> i <span>najčešće u svrhu grupisanja određenih HTML elemenata i definisanja CSS stilova za njih. Razlika između ova dva tag-a je u tome što se <span> koristi unutar teksta za primenu stila na određena slova, dok <div> označava početak i kraj određene sekcije (division) dokumenta i uvek umeće prekid unutar teksta, postavljajući sadržaj u novi red.
Da bismo primenili stilove na HTML elemente grupirane u <div> i <span> tagove, koristimo class atribut unutar tih tag-ova:
<p> Tag span možemo primeniti <span class="zeleno"> na tekst </span> bez umetanja prekida. </p>
Hajde da u ovom istom primeru <span> tag zamenimo sa <div> tag-om i da vidimo šta će se dogoditi. Generalno, text će u browser-u biti prikazan s prekidom linije tamo gde je umetnut <div> tag.
Vrednosti atributa stilova
Atributima stila dodeljujemo vrednosti i za to imamo na raspolaganju 4 moguća načina: numeričke vrednosti, boju, URL i rezervisana imena.
Numeričke vrednosti
Numeričke vrednosti zadajemo pomoću brojeva koje kombinujemo s različitim mernim jedinicama: pixel (px) - point (pt) - pica (pc) - Em (em) - Ex (ex) - Inches (in) millimeters (mm) - centimeters (cm) - percentage (%)Primer:
table { border: 2px }
Boja
Boju zadajemo pomoću RGB vrednosti (npr. #000000) ili navođenjem imena boje. Imena poput blue ili green dodeljena su samo osnovnom setu od 16 boja. Koristite Color Picker.Primer:
.table { background-color: white }
daje tabeli belu pozadinu isto kao i
.table { background-color: #FFFFFF }
URL
URL se zadaje drugačije nego u HTML standardu. Primer:
.pozadina { background-image: url(slika.gif) }
URL se poziva navođenjem rezervisane reči url i definisanjem putanje u malim zagradama. Ne smete ostaviti razmak između reči url i otvorene zagrade. Putanja koji se definiše u zagradi može biti apsolutna (u tom slučaju navodi se puna putanjazajedno s http://) ili relativna (s obzirom na URL definisanog CSS-a). Kad zadajemo putanju relativno, relativnost se odnosi na lokaciju definisanja stila. Ako je stil definisan u eksternoj datoteci, putanja će biti relativna u odnosu na tu .css datoteku. Ako pak koristimo embedded ili inline CSS stil, putanja je relativna u odnosu na HTML dokument u kojem je definisan CSS stil.
Rezervisana imena
Često se vrednosti stilova zadaju imenima koja su predefinisana u CSS standardu. Neka od tih imena su imena boja koja smo već spomenuli. Rezervisana imena koja ćete često koristiti su npr. imena za veličinu teksta (large, medium, small), imena raznih efekata (dotted, underline, bold) itd.
Česte upotreba stilova
Postoji nekoliko desetaka različitih stilova koji kontrolišu prikaz vašeg HTML dokumenta. Sve stilove grupišemo prema tome kakav prikaz kontrolišu:
fontovi, tekst i boje pozadina box i stilovi bordera (borders) liste pozicioniranje
Fontovi, tekst i boje
Nećemo ulaziti u popisivanje svih mogućih stilova koji postoje, nego ćemo samo navesti što sve u ovoj kategoriji možete kontrolisati pomoću CSS-a. Sve na šta ste navikli u HTML <font> tagu nalazi se i ovde: određivanje fonta (Arial, Verdana...), zatim efekti poput podebljanog ili kurzivnog teksta, veličina, boja... Tekst se može ulepšati nekim novim efektima kao što je visina reda teksta, razmak između slova, reči i redova, poravnavanje i uvlačenje teksta, zatim efekti poput potcrtavanja, precrtavanja itd.
Primer definisanja stila teksta unutar jednog tag-a :
.sirokitext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #000000; letter-spacing: 6px }
Pozadina
Umesto da izgled pozadine eksplicitno određujete u <body> tagu kao do sada, primenite CSS! Možemo odrediti boju, pozadinsku sliku, način prikaza pozadine (fiksirana ili pokretna slika, ponavljanje samo po x- ili y-osi) čak i poziciju pozadine.
Primer klase koja definiše sliku kao fiksiranu pozadinu:
.pozadina { background-image: url(poz.gif); background-repeat: no-repeat; background-attachment: fixed }
Ovako definisanu klasu jednostavno pozovite iz <body> tag-a li nekog drugog tag-a:
<body class="pozadina"> ... </body>
Liste
Liste su u CSS-u dobile nove efekte, poput mogućnosti određivanja neke gif sličice koja će se prikazivati umesto bullet-a. Primer liste koja umesto kao bullet koristi neku sliku:
ul { list-style-image: url(bullet1.gif) }
CSS Box model
Tematika CSS box modela je malo složenija pa ćemo je obraditi posebno.
Implementacija Box Modela
Box stilovi omogućavaju sasvim nove efekte. Da biste ih razumeli, potrebno je znati da CSS svaki element HTML stranice tretira kao da je oko njega opisan pravougaonik (box). Pogledajmo to na slici:
Svaki od ovih svojstava: width, border, padding i margin mogu se zasebno kontrolisati.
Padding je razmak između sadržaja element a i ivice (border-a).
Margin je vrednost koja određuje razmak između elemenata u HTML dokumentu. Kad nekom elementu odredimo marginu, mi povećavamo prostor koji taj element zauzima tj dodajemo mu nevidljivi prostor do ivice margine (na slici je taj nevidljivi ivica margine izražena većim pravouganikom od isprekidane linije).
Ako su vrednosti margine i padding-a na nuli, element zauzima samo prostor određen njegovom sopstvenom širinom (element width). Povećavamo li njihove vrednosti, element zauzima sve više i više mesta.
Za svaki element može se definisati pozadina i svi stilovi pozadine - naglasimo samo da će se pozadina prostirati i na delu kojeg odredimo s vrednošću za padding.
Do sada smo u standardnom HTML-u kod ivica (borders) mogli odrediti samo širinu i boju. CSS nam omogućava da svaki border (levo, desno, gore i dole) ima sopstvena svojstva poput boje, širine i efekta. Posebno su zanimljivi efekti ivica: osim pune linije, sada možemo imati tačkastu, isprekidanu, dvostruku ivicu, i još neke zgodne efekte.
Sledeće slike (2D,3D) lepo ilustruju hijerarhiju box modela sa naglašenim delovima koji mogu biti transparentni.
Box model je najbolje ilustrovati kratkim primerima. Da bismo sračunali koliko nam je ukupno prostora potrebno za jedan elemenat, računamo to na sledeći način:
Ukupna širina = leva margina + levi border + levi padding + širina elementa + desni padding + desni border + desna margina Ukupna visina = gornja margina + gornji border + gornji padding + visina elementa + donji padding + donji border + donja margina
Pogledajmo primer skupa CSS pravila koja sadrže deklaracije za sva svojstva box modela (širina, visina, padding, border, margina) definisana na jednom klasi koju smo nazvali "box":
.box { width: 300px; height: 200px; padding: 10px; border: 1px solid #000; margin: 15px; }
Ukupna veličina elementa na koji bi bila primenjena gornja klasa se računa na sledeći način:
Ukupna širina = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px Ukupna visina = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
Gornji račun ilustrujemo sledećom slikom
Iz ovog kratkog primera vidim da naš element zauzima najmanje 352px u širinu i 252px u visinu. Ako na stranici nema toliko mesta, naš elemenat će biti pomeren ili će se „preliti“ izvan svog bloka (overflow).
Primer dodavanja plave pozadine, border-a od isprekidane linije i padding-a od 5px tekstu:
.txtpozadina { background-color: blue; padding: 5px; border: 2px dashed }
CSS zaključno
Dreamweaver koji će biti predmet naših budućih izučavanja ima solidno i vrlo jednostavno okruženje za izradu CSS stilova. Stilovi su Vam već navedeni i na nam je da samo odredimo vrednost njihovih atributa izborom iz padajućih menija. Umetanje CSS klasa je takođe vrlo jednostavno i izvodi se sa dva-tri klika mišem. Kao zaključak dovoljno je da samo navedemo da je CSS nešto što ne smemo zaobići jer predstavlja tehnologiju koja će sigurno biti još dugo prisutna u Web dizajnu. Uz brojne prednosti, a mana gotovo da i nema, CSS postaje jedan od najjačih alata web dizajna za čije izučavanje i savlađivanje se neminovno isplati odvojiti i mnogo više vremena nego što smo mu mi posvetili u ove dve kratke lekcije.
Zato Vam toplo preporučujemo da posvetite neko dodatno vreme za izučavanje CSS, sigurni smo da će se isplatiti...
Ponovimo naučeno i naučimo nešto novo o CSS-u
Tri su moguća načina da sačuvamo CSS pravila:
1. izvan HTML dokumenta (external style sheets)
Lepota i snaga CSS-a leži upravo u mogućnosti da se svi stilovi koje ćete koristiti na celom sajtu smeste izvan HTML dokumenta. To nam omogućava da promenom stila na jednom jedinom mestu promenimo prikaz na celom sajtu! Ovom metodom sve stilove smeštamo u zaseban CSS dokument - običan fajl sa .css ekstenzijom kojeg možete napisati u Notepadu i snimiti npr. u root direktorijumu u kojem se nalazi i homepage (index.html). U njemu ćemo definisati sva CSS pravila koja vam trebaju na sajtu i nazvati fajl npr. mojstil.css. Eksterni .css fajl treba povezati s HTML dokumentom. To se radi uglavnom pomoću <LINK> tag-a u <head> sekciji:
<head> <TITLE> Naslov stranice </TITLE><LINK rel="stylesheet" type="text/css" href="http://www.cnti.info/mojstil.css"></head>
Jednom kad povežete HTML dokument sa .css fajlom, stilovi definisani u njemu primenjuju se na tagove pomoću class atributa.
2. unutar <head> tag-a HTML dokumenta (embedded, document-level style sheets)
CSS definišemo unutar specijalnog <style> tag-a:
<head><title> naslov stranice </title><style type="text/css"> p { font-size: large; color: red }</style></head>
Primetite da unutar <style> tag-a obavezno morate definisati tip stila: ovde je to type="text/css". Ova metoda definisanja CSS stilova dobra je ako različitim HTML stranicama želite dodati različite stilove.
3. unutar samog HTML tag-a (inline styles)
Stilove možemo umetati u gotovo svaki HTML tag pomoću atributa style i direktnog specificiranja stila na sledeći način:
<p style="font-size: large; color: red"> neki tekst paragrafa prikazan velikim slovima i crvenom bojom </p>
Napomena! Nemojte pomešati <style> tag koji smo koristili u metodi pod 2) i style atribut koji koristimo ovde. Radi se o dve različite stvari (jedno je tag, a drugo atribut). Inline stilovi mogu biti korisni ako vam određeni stil treba samo na jednom jedinom mestu i nigde više - tada bi bilo glupo taj stil definisati globalno i nepotrebno povećavati veličinu CSS dokumenta. Inline stilovi imaju najviši prioritet od svih metoda za umetanje CSS stilova - specifikacija u inline stilu će pregaziti sve ostale CSS specifikacije. Upravo u tu svrhu se inline stilovi najčešće i koriste.
Ponovimo sintaksu
Svako CSS pravilo pišemo u sledećem obliku (kôd se radi preglednosti obično piše u nekoliko linija):
selektor { ime-stila1: vrednost1; ime-stila2: vrednost1 vrednost2 }
Selektor definiše kojem HTML tagu želite dodati CSS stil i u vitičastoj zagradi određujete kako će taj stil izgledati. Stil određujete tako da naznačite ime stila i dodelite mu vrednost. Ako definišete više stilova, odvajajte ih tačka zarezom. Tačka zarez ne piše
se iza poslednjeg navedenog stila. Jednom stilu možete dodeliti više vrednosti i tada ih samo navodite bez interpunkcija.
Primer:
table { background-color: blue; border: 2px solid red }
Ovim smo kao selektor odabrali tag table i odredili da će svaka tabela u našem dokumentu imati plavu pozadinu i ivicu širine 2 piksela iscrtan punom linijom crvene boje.
Primetite da su atributu border dodate tri vrednosti koje smo odredili bez upotrebe interpunkcija.
Ova osnovna sintaksa je vrlo jednostavna - zapamtite gde idu zagrade, dvotačke i tačka zarezi i ne možete pogrešiti. S vremenom ćete naučiti i koje izraze koristiti kao atribut i vrednost - postoji samo ograničen broj mogućnosti koje se mogu pojaviti na tim mestima. Proširimo sad osnovnu sintaksu CSS-a!
Nizanje selektora
Jedan te isti stil možemo primeniti na nekoliko selektora (HTML tag-ova) odjednom:
h1, h2, h3 { color: green; text-align: right }
Svi naslovi sadržani u heading tag-ovima h1, h2 i h3 biće zeleni i poravnati u desno. Svaki put kad isti skup stilova želite primeniti na nekoliko različitih tag-ova, koristite nizanje selektora. Primetite samo da kod nizanja selektore morate odvojiti zarezom.
Kontekstualni selektori
CSS vam omogućava da određene stilove primenite samo kad se neki HTML tag nalazi u određenom kontekstu, tj. u određenoj okolini. Zamislite da želite sadržaj u italic tagu <i> obojen zelenom bojom, ali samo u naslovu drugog reda. Tada biste napisali sledeći stil:
h2 i { color: green }
Svaki put kad browser naleti na italic tekst unutar h2 naslova, on će taj tekst prikazati zelenom bojom. Italic tekst u ostatku sadržaja neće biti zelen. Na ovaj način možete usloviti prikazivanje stilova. Zapamtite samo da u ovom slučaju ne smete koristiti zareze jer će to browser protumačiti kao nizanje. Kontekstualne selektore možete kombinovati s nizanjem:
h1 i, h3 i { color: blue; font-weight: bold }
Svaki italic tekst unutar h1, i h3 naslova biće plav i podebljan. Dosad smo CSS pravila pisali tako da smo birali HTML tag i odredili koje stilove će on poprimiti. Na taj način smo određeni skup stilova uvek ograničavali na određene tagove. Međutim, CSS stilove možemo koristiti i univerzalno i tada koristimo klase.
Kao što smo videli klasa je skup CSS pravila koji se definiše imenom klase. Da biste videli efekte koje ste u klasi definisali, ime klase trebate pozvati u HTML dokumentu u okviru nekog HTML tag-a pomoću class atributa.
Generičke klase
Generička klasa nije vezana za pojedini HTML tag i može se upotrebljavati na neograničenom broju lokacija unutar HTML dokumenta. Definišemo je proizvoljnim imenom kojem prethodi tačka:
.plavo { color: blue}
Generičku klasu pozivate pomoću class atributa:
<a href="http://www.cnti.info" class="plavo"> Ovo je primer linka </a>
Klase specifične za pojedine HTML tagove
Određenu klasu možete vezati uz pojedini HTML tag. U tom slučaju ispred tačke navodite tag na koji će se klasa primenjivati:
p.zeleno { color: green }
Ovim smo definisali klasu zeleno i dodelili klasu HTML tagu <p>. Svaki put kad želite neki paragraf obojiti zeleno, moraćete unutar HTML dokumenta pozvati klasu na sledeći način:
<p class="zeleno"> Zeleni tekst pasusa </p>
Pseudo-klase
Pseudo-klase mam omogućavaju da definišemo izgled pojedinih HTML tag-ova u određenim stanjima. Najpoznatije i najkorištenije pseudoklase su one koje određuju izgled linkova, tj. izgled <a> tag-a . Pseudo-klase se (umesto tačkom) od HTML tag-a odvajaju dvotačkom. Pseudo-klase su zasad definisane samo za <a> i <p> tagove:
a:link - određuje izgled HREF neposećenog linkaa:active - određuje izgled HREF aktivnog linka a:visited - određuje izgled HREF linka kojeg smo već posetili
p:first-line - kontroliše izgled prve linije paragrafa p:first-letter - kontroliše izgled prvog slova paragrafa
Na primer, možemo odrediti da link ne bude podvučen i da bude crvene boje ali kad se nacilja mišem da postane podvučen
а:link {text-decoration: none; color: red} а:hover {text-decoration: underline;}
Korištenje ID oznaka kao klasa
Kao klasu možemo koristiti ID oznake, ali podsetimo se, postoji jedna velika razlika. Dok istu klasu možete koristiti na više mesta i za više HTML tag-ova, ID oznake ne možemo višestruko koristiti. One se koriste da bi se određenom elementu dodelio specifičan stil koji neće imati nijedan drugi element u HTML dokumentu.
Sintaksa je jednostavna. Na istom mestu gde bismo inače definisali klasu, definišemo ID oznaku:
#crno { color: black }
ID oznaku pozivate pomoću ID atributa unutar raznih HTML tag-ova :
<h2 id="crno">Ovo je naslov drugog reda crne boje.</h2>
Neki browser-i će vam možda dozvoliti da ID oznaku koristite na više mesta, ali to definitivno nije željeno ponašanje i bolje je da u tu svrhu koristimo klase.
Tagovi <div> i <span>
Ova dva HTML tag-a jesu odličan način da bilo kojem HTML elementu ili delu HTML koda dodate CSS stil. Ovi tagovi se koriste <div> i <span>najčešće u svrhu grupisanja određenih HTML elemenata i definisanja CSS stilova za njih. Razlika između ova dva tag-a je u tome što se <span> koristi unutar teksta za primenu stila na određena slova, dok <div> označava početak i kraj određene sekcije (division) dokumenta i uvek umeće prekid unutar teksta, postavljajući sadržaj u novi red.
Da bismo primenili stilove na HTML elemente grupirane u <div> i <span> tagove, koristimo class atribut unutar tih tag-ova:
<p> Tag span možemo primeniti <span class="zeleno"> na tekst </span> bez umetanja prekida. </p>
Hajde da u ovom istom primeru <span> tag zamenimo sa <div> tag-om i da vidimo šta će se dogoditi. Generalno, text će u browser-u biti prikazan s prekidom linije tamo gde je umetnut <div> tag.
Vrednosti atributa stilova
Atributima stila dodeljujemo vrednosti i za to imamo na raspolaganju 4 moguća načina: numeričke vrednosti, boju, URL i rezervisana imena.
Numeričke vrednosti
Numeričke vrednosti zadajemo pomoću brojeva koje kombinujemo s različitim mernim jedinicama: pixel (px) - point (pt) - pica (pc) - Em (em) - Ex (ex) - Inches (in) millimeters (mm) - centimeters (cm) - percentage (%)Primer:
table { border: 2px }
Boja
Boju zadajemo pomoću RGB vrednosti (npr. #000000) ili navođenjem imena boje. Imena poput blue ili green dodeljena su samo osnovnom setu od 16 boja. Koristite Color Picker.Primer:
.table { background-color: white }
daje tabeli belu pozadinu isto kao i
.table { background-color: #FFFFFF }
URL
URL se zadaje drugačije nego u HTML standardu. Primer:
.pozadina { background-image: url(slika.gif) }
URL se poziva navođenjem rezervisane reči url i definisanjem putanje u malim zagradama. Ne smete ostaviti razmak između reči url i otvorene zagrade. Putanja koji se definiše u zagradi može biti apsolutna (u tom slučaju navodi se puna putanjazajedno s http://) ili relativna (s obzirom na URL definisanog CSS-a). Kad zadajemo putanju relativno, relativnost se odnosi na lokaciju definisanja stila. Ako je stil definisan u eksternoj datoteci, putanja će biti relativna u odnosu na tu .css datoteku. Ako pak koristimo embedded ili inline CSS stil, putanja je relativna u odnosu na HTML dokument u kojem je definisan CSS stil.
Rezervisana imena
Često se vrednosti stilova zadaju imenima koja su predefinisana u CSS standardu. Neka od tih imena su imena boja koja smo već spomenuli. Rezervisana imena koja ćete često koristiti su npr. imena za veličinu teksta (large, medium, small), imena raznih efekata (dotted, underline, bold) itd.
Česte upotreba stilova
Postoji nekoliko desetaka različitih stilova koji kontrolišu prikaz vašeg HTML dokumenta. Sve stilove grupišemo prema tome kakav prikaz kontrolišu:
fontovi, tekst i boje pozadina box i stilovi bordera (borders) liste pozicioniranje
Fontovi, tekst i boje
Nećemo ulaziti u popisivanje svih mogućih stilova koji postoje, nego ćemo samo navesti što sve u ovoj kategoriji možete kontrolisati pomoću CSS-a. Sve na šta ste navikli u HTML <font> tagu nalazi se i ovde: određivanje fonta (Arial, Verdana...), zatim efekti poput podebljanog ili kurzivnog teksta, veličina, boja... Tekst se može ulepšati nekim novim efektima kao što je visina reda teksta, razmak između slova, reči i redova, poravnavanje i uvlačenje teksta, zatim efekti poput potcrtavanja, precrtavanja itd.
Primer definisanja stila teksta unutar jednog tag-a :
.sirokitext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; color: #000000; letter-spacing: 6px }
Pozadina
Umesto da izgled pozadine eksplicitno određujete u <body> tagu kao do sada, primenite CSS! Možemo odrediti boju, pozadinsku sliku, način prikaza pozadine (fiksirana ili pokretna slika, ponavljanje samo po x- ili y-osi) čak i poziciju pozadine.
Primer klase koja definiše sliku kao fiksiranu pozadinu:
.pozadina { background-image: url(poz.gif);
background-repeat: no-repeat; background-attachment: fixed }
Ovako definisanu klasu jednostavno pozovite iz <body> tag-a li nekog drugog tag-a:
<body class="pozadina"> ... </body>
Liste
Liste su u CSS-u dobile nove efekte, poput mogućnosti određivanja neke gif sličice koja će se prikazivati umesto bullet-a. Primer liste koja umesto kao bullet koristi neku sliku:
ul { list-style-image: url(bullet1.gif) }
CSS Box model
Tematika CSS box modela je malo složenija pa ćemo je obraditi posebno.
Implementacija Box Modela
Box stilovi omogućavaju sasvim nove efekte. Da biste ih razumeli, potrebno je znati da CSS svaki element HTML stranice tretira kao da je oko njega opisan pravougaonik (box). Pogledajmo to na slici:
Svaki od ovih svojstava: width, border, padding i margin mogu se zasebno kontrolisati.
Padding je razmak između sadržaja element a i ivice (border-a).
Margin je vrednost koja određuje razmak između elemenata u HTML dokumentu. Kad nekom elementu odredimo marginu, mi povećavamo prostor koji taj element zauzima tj dodajemo mu nevidljivi prostor do ivice margine (na slici je taj nevidljivi ivica margine izražena većim pravouganikom od isprekidane linije).
Ako su vrednosti margine i padding-a na nuli, element zauzima samo prostor određen njegovom sopstvenom širinom (element width). Povećavamo li njihove vrednosti, element zauzima sve više i više mesta.
Za svaki element može se definisati pozadina i svi stilovi pozadine - naglasimo samo da će se pozadina prostirati i na delu kojeg odredimo s vrednošću za padding.
Do sada smo u standardnom HTML-u kod ivica (borders) mogli odrediti samo širinu i boju. CSS nam omogućava da svaki border (levo, desno, gore i dole) ima sopstvena
svojstva poput boje, širine i efekta. Posebno su zanimljivi efekti ivica: osim pune linije, sada možemo imati tačkastu, isprekidanu, dvostruku ivicu, i još neke zgodne efekte.
Sledeće slike (2D,3D) lepo ilustruju hijerarhiju box modela sa naglašenim delovima koji mogu biti transparentni.
Box model je najbolje ilustrovati kratkim primerima. Da bismo sračunali koliko nam je ukupno prostora potrebno za jedan elemenat, računamo to na sledeći način:
Ukupna širina = leva margina + levi border + levi padding + širina elementa + desni padding + desni border + desna margina Ukupna visina = gornja margina + gornji border + gornji padding + visina elementa + donji padding + donji border + donja margina
Pogledajmo primer skupa CSS pravila koja sadrže deklaracije za sva svojstva box modela (širina, visina, padding, border, margina) definisana na jednom klasi koju smo nazvali "box":
.box { width: 300px; height: 200px; padding: 10px; border: 1px solid #000; margin: 15px; }
Ukupna veličina elementa na koji bi bila primenjena gornja klasa se računa na sledeći način:
Ukupna širina = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px Ukupna visina = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
Gornji račun ilustrujemo sledećom slikom
Iz ovog kratkog primera vidim da naš element zauzima najmanje 352px u širinu i 252px u visinu. Ako na stranici nema toliko mesta, naš elemenat će biti pomeren ili će se „preliti“ izvan svog bloka (overflow).
Primer dodavanja plave pozadine, border-a od isprekidane linije i padding-a od 5px tekstu:
.txtpozadina { background-color: blue; padding: 5px; border: 2px dashed }
CSS zaključno
Dreamweaver koji će biti predmet naših budućih izučavanja ima solidno i vrlo jednostavno okruženje za izradu CSS stilova. Stilovi su Vam već navedeni i na nam je da samo odredimo vrednost njihovih atributa izborom iz padajućih menija. Umetanje CSS klasa je takođe vrlo jednostavno i izvodi se sa dva-tri klika mišem. Kao zaključak dovoljno je da samo navedemo da je CSS nešto što ne smemo zaobići jer predstavlja tehnologiju koja će sigurno biti još dugo prisutna u Web dizajnu. Uz brojne prednosti, a mana gotovo da i nema, CSS postaje jedan od najjačih alata web dizajna za čije izučavanje i savlađivanje se neminovno isplati odvojiti i mnogo više vremena nego što smo mu mi posvetili u ove dve kratke lekcije.
Zato Vam toplo preporučujemo da posvetite neko dodatno vreme za izučavanje CSS, sigurni smo da će se isplatiti...