IT TUTORIJALI | jQuery

CSS - Linkovi

Stilizovanje linkova sa CSS-om

Linkovi ili hiperveze su važan dio web stranice. Omogućava posjetiteljima da se kreću po web mjestu. Zbog toga je pravilno oblikovanje linka važan aspekt izgradnje web stranice prilagođene korisnicima. Pogledajte lekciju o HTML linkovima da biste saznali više o linkovima i kako ih stvoriti. Linkovi imaju četiri različita stanja - link, visited, active i hover. Ova četiri stanja link mogu se različito oblikovati korištenjem sljedećih pseudo-klase.

a:link - definiše stilove za normalne ili neposjeći link.
a:visited - definiše stilove linka koje je korisnik već posjetio.
a:hover - definiše stilove za vezu kada korisnik postavi pokazivač miša iznad nje.
a:active - odrediti stil linka na koje se kliknu.

Možete odrediti bilo koji CSS entitet koji želite, npr. color, font, background, border itd. svakom od tih odabira prilagodite stil linka, baš kao što je to slučaj sa uobičajenim tekstom.

a:link {    /* neposjećen link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* posjećen link */
    color: #ff00ff;
}
a:hover {    /* nanošenje mišom na link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* aktivan (kliknut) link */
    color: #00ffff;
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stilizovanje različitih stanja linka pomoću CSS-a</title>
<style>
    /* neposjećen link */            
    a:link {
        color: #ff0000;
        text-decoration: none;
        border-bottom: 1px solid;
    }
    /* posjećen link */
    a:visited {
        color: #ff00ff;
    }
    /* nanošenje mišom na link */
    a:hover {
        color: #00ff00;
        border-bottom: none;
    }
    /* activan link */
    a:active {
        color: #00ffff;
    }
</style>
</head>
<body>
    <p><a href="https://www.ittutorijali.net/" target="_blank">Posjeti sajt IT TUTORIJALI</a></p>
</body>
</html>

Redosljed postavljanja stila za različita stanja linka je važan, jer ono što definše posljednje ima prednost nad prethodno definisanim stilskim pravilima.

Izmjena standardnih stilova linka

U svim glavnim web pretraživačima kao što su Chrome, Firefox, Safari itd. link na web stranicama je podvučen i koriste zadane boje veza pretraživača ako ne postavite stilove isključivo za njih. U većini pretraživača tekstualne veze (link) će se prema zadanom pojaviti na sledeći način:

Nevidjeni link unvisited link kao podvučeni plavi tekst.
Posećeni link visited link kao podvučen ljubičasti tekst.
Aktivni link active link kao podvučen crveni tekst.

Međutim, ne postoji promjena u izgledu linka u slučaju stanja hover. Ostaje plava, ljubičasta ili crvena zavisno o tome u kojem su stanju (tj. unvisited, visited ili active) u kojem se nalazi. Sada ćemo vidjeti kako prilagoditi link nadjačavanjem zadanog stila.

Postavljanje prilagođene boje linka

Jednostavno koristite svojstvo boje CSS (CSS color) da odredite boju po vašem izboru za različito stanje linke. Ali kad birate boje, vodite računa da korisnik može jasno razlikovati normalan tekst od linkova. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše:

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavite boje linka pomoću CSS-a</title>
<style>            
    a:link {
        color: #1ebba3;
    }
    a:visited {
        color: #ff00f4;
    }
    a:hover {
        color: #a766ff;
    }
    a:active {
        color: #ff9800;
    }
</style>
</head>
<body>
    <p><a href="https://www.ittutorijali.net/" target="_blank">Posjeti sajt IT TUTORIJALI</a></p>
</body>
</html>

Uklanjanje zadane podvučene linije iz linka

Ako vam se ne sviđa zadana podvučene linija na linku, jednostavno možete koristiti CSS svojstvo text-decoration da biste je se riješili. Alternativno, možete primijeniti ostale stilove na link kao što su: background color, bottom border, bold font, itd. kako biste linkove istakli od uobičajenog teksta. Sljedeći primjer prikazuje kako ukloniti ili postaviti podvučenu liniju za različita stanja linka.

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Uklonjanje zadanog podcrtavanja s linka pomoću CSS-a</title>
<style>            
    a:link, a:visited {
        text-decoration: none;
    }
    a:hover, a:active {
        text-decoration: underline;
    }
</style>
</head>
<body>
    <p><a href="#">Postavi kursor miša preko mene</a></p>
</body>
</html>

Izrada tekstualnih linkova da izgledaju kao dugme

Takođe možete napraviti da vaši uobičajeni tekstualni linkovi izgledaju kao dugme pomoću CSS-a. Da bismo to učinili, potrebno je upotrijebiti još nekoliko CSS svojstava kao što su: background-color, border, display, padding itd. O tim ćete svojstvima detaljno saznati u narednim lekcijama. Progledajmo sljedeći primjer i pogledajte kako to stvarno funkcioniše:

a:link, a:visited {
    color: white;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prilagošavanje linka kao dugme pomoću CSS-a</title>
<style>            
        a:link, a:visited {
        color: white;
        background-color: #1ebba3;
        display: inline-block;
        padding: 10px 20px;
        border: 2px solid #099983;
        text-decoration: none;
        text-align: center;
        font: 14px Arial, sans-serif;
    }
    a:hover, a:active {
        background-color: #9c6ae1;
        border-color: #7443b6;
    }
</style>
</head>
<body>
    <p><a href="#">CSS Link Dugme</a></p>
</body>
</html>