RSS feed

Recenzije vaših stranica. Stručna recenzija, kritike, savjeti i pomoć. Prve tri recenzije besplatno!

CSS linkovi

Objavljeno: 01.12.2007. 13:01

Ovo je sasvim sigurno jedno od najčešćih pitanja koje postavljaju početnici.

Za početak, linkovi imaju nekoliko svojstava:

Redosljed bi trebao biti kao što je navedeno u primjeru - ako je drugačiji, neka svojstva možda neće biti primjenjena u određenim preglednicima.

Što dalje?

Našim linkovima možemo promijeniti boju, odrediti da li će biti podcrtani ili ne, i još mnogo toga. Međutim, prije nego što se počnemo igrati s tim svojstvima, potrebno je ubaciti naš CSS kod u (X)HTML dokument.

CSS unutar (X)HTML datoteke

Iako sam u prethodnom tutorialu objasnio da ovo nije najbolji način za dodavanje CSS-a na vaše web stranice, ipak ćemo ga koristiti u ovom tutorialu.

Kopirajte sljedeći kod u Notepad (ili neki drugi uređivač koji koristite) i spremite daoteku pod nazivom linkovi.htm (može i neki drugi, a ekstenzija može biti i .html)

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Promijenite linkove pomoću CSS-a</title>
<style type="text/css">

a:link { 
   color: blue;
   text-decoration: underline
   }
a:visited { 
   color: purple;
   text-decoration: underline
   }
a:hover { 
   color: blue;
   text-decoration: none
   }
a:active { 
   color: red;
   text-decoration: none
   }
</style>

</head>
<body>
Primjer <a href="http://www.web-coderz.com">linka</a>
</body>
</html>

Ostala svojstva

Linkovi imaju još neka svojstva, poput veličine i vrste slova, pozadine, boje slova i sl. Ovdje ću dati kratki pregled samo nekih, najčešće korištenih - više u CSS referencama (slijedi uskoro).

Text-decoration

Određuje da li će linkovi biti podcrtani, precrtani, i sl. U tablici su dane vrijednosti svojstva text-decoration, kao i kratki opis.

Vrijednost Opis
none Link nije podcrtan
underline Podcrtani link
overline Linija iznad linka
line-through Precrtani link
blink Trepereći link (radi samo u Firefoxu)
Primjeri korištenja

Primjer korištenja možete vidjeti ispod, a umjesto uglatih zagrada upišete vrijednost koju želite (vidi tablicu).

a:link {
text-decoration: [vrijednost];

Primjer za link koji će biti podcrtan kad se preko njega pređe mišem.

a:hover{
text-decoration: underline;
}

Boja linkova

Da bi definirali boju linkova, potrebno je koristiti svojstvo color. Sintaksa je sljedeća:

a:hover{
text-decoration: underline;
color: [boja];
}

Umjesto uglate zagrade, možete koristiti jednu od 16 dozvoljenih naziva boja, hexadecimalni ili rgb zapis.

nikola on 27.05.2008. 15:36

dobar blog! samo nastavi! ako tražite puno kvalitetnih linkova vezanih uz web development posjetite http://3kolone.org/bookmarks.php

wrz on 01.03.2008. 17:10

ok blog !

Delicious
digg
Ma.gnolia
NewsVine
Reddit
Shadows
YahooMyWeb
 

Komentiraj

:

:


7 + 9 =