CSS – Kreiranje stila za linkove (I deo)

Ako vas je zainteresovao ovaj naslov, onda sigurno želite da saznate kako se kreiraju CSS link stilovi (pseudoklase). Upravo o ovoj temi ćemo detaljno pisati u ovom i sledećim prilozima. Samo kreiranje stilova je vrlo lako, a temu smo radi lakšeg praćenja podelili u tri dela:

  • upoznavanje i razumevanje CSS link stilova
  • kreiranje podrazumevanih link selektora
  • kreiranje višestrukih CSS link stilova

Da krenemo od prvog dela i upoznavanja sa stilovima koji će se upotrebiti za stilizaciju linkova na HTML stranicama. Vaš podrazumevani stil za linkove može da izgleda ovako:


a:link { color: #333333}
a:visited { color: #FFFFFF}
a:hover { color: #CCCCCC; background-color: #333333; text-decoration: none}
a:active { color: #333333}

Kod stilova, u CSS žargonu, ova definicija naziva se i norma ili pravilo (rule). Svaka norma se sastoji iz nekoliko komponenti. Pa, da krenemo od pregleda delova prvog podrazumevanog link stila:


a:link {color: #333333}

Prvi deo ovog pravila (a:link) naziva se selektor, a on govori browser-u na koji element stranice će se odnositi ovo pravilo (na koji element će biti primenjeno). Unutar para vitičastih zagrada nalazi se deklaracija, koja je sastavljena od osobina (u ovom slučaju boja – color) i vrednosti (#333333). Evo i same sintakse jednog pravila:


Selektor { osobina: vrednost }

U našem slučaju selektor a:link možemo slobodno prevesti u značenje: „Browser-u, sve linkove na stranici oboji u #333333 (nijansa sive) boju“. Zapazite da za naša četiri stila linkova (link, visited, hover, i active) nisu deklarisani fontovi, niti veličina fontova. Ovo deklarisanje se odnosi na ono što nazivamo efikasnost i nasleđivanje. Vaše stranice će mnogo bolje izgledati ukoliko za linkove (hiperlinkove) koristite isti font i veličinu fonta kao što je kod okružujućeg teksta. Izostavljanjem ovih osobina (font-family i font-size) iz deklaracije, osiguravamo da su sve nedeklarisane osobine nasleđene po normi koja je postavljena u elementu u kojem se nalazi sam link. Znači link će preuzeti svojstva stila definisanog za element u kome se nalazi link.

Pratite Krstaricu na www.krstarica.com