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ća dekoracija</a><br><br>
<a class="cetri" href="#">Č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>
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.
