IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

CSS link

Linkovi 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 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&#263;a dekoracija</a><br><br>
<a class="cetri" href="#">&#268;etvrata dekoracija</a><br><br>
<a class="pet" href="#">Peta dekoracija</a><br><br>
<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.

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display