CSS – Kreiranje stila za linkove (II deo)

Šta su zapravo linkovi? Linkovi (tekst, slike…) predstavljaju veze ka drugim sadržajima zato što su ubačeni unutar anchor (sidro) taga – <a>. Da biste videli primer, napravićemo link ka home strani Krstarice: Internet Krstarica. A za ovo bi izvorni HTML kod za ovaj link bio:


napravicemo link ka <I>home</I> stranici Krstarice:
<A HREF="https://www.krstarica.com">Internet Krstarica</A>.

Zapazite da se aktuelne hiperlinkovane reči, Internet Krstarica, nalaze između otvarajućeg i zatvarajućeg anchor taga. Ostatak rečenice se nalazi sa obe strane ova dva taga, a cela stvar je smeštena unutar paragraf taga. Bilo koji tekst (ili slike) koji se nalazi između ova dva para tagova postaće hiperlink. Browser će ceo svet informisati da je ovo baš link, time što će se kurzor promeniti u „šaku sa ispruženim kažiprstom“ kada se pokazivačem miša pređe iznad ovakvog sadržaja. Svi browser-i dobro poznaju tagove i njihovo značenje, a svi dolaze sa podrazumevanim uputstvima kako „izrenderovati“ (formirati prikaz) stranicu u nedostatku detaljnijih instrukcija (kao što su CSS stilovi). Nestilizovani linkovi su podrazumevano obojeni u plavu boju, a već posećeni linkovi su ljubičasti. Aktivni link se predstavlja crvenom bojom. Upravo nam kaskadni stilovi (CSS) dozvoljavaju da preskočimo i unapredimo prikaz browser-ovih podrazumevanih link stilova u nešto veoma kreativno i estetski istančano.

CSS specifikacija definiše link stilove kao tzv. pseudoklase, tj. specijalne klase koje opisuju stilove za elemente koji se primenjuju samo pod određenim uslovima: Možda vam ovo na prvi pogled izgleda komplikovano, ali je u stvari veoma jednostavno:

  • a:link opisuje bilo koji link koji nije posećen od strane korisnikovog browser-a. Drugim rečima, sadržaj koji je linkovan još se ne nalazi u browser-ovoj lokalnoj memoriji.
  • a:visited opisuje bilo koji link koji je posećen i koji se nalazi u browser-ovoj lokalnoj memoriji.
  • a:hover opisuje izgled hiperlinkova kada korisnik pređe pokazivačem miša iznad njih. Svi browser-i od verzije 4, prepoznaju i interpretiraju ovu klasu.
  • a:active opisuje izgled linka na koji je kliknuto, ali još nije otpušten taster miša.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.

programiranje
Komentari (0)
Dodaj komentar