CSS nuorodos

Lukas

Kiekviename puslapyje yra nemažai nuorodų. Nuorodos turi būti kitokios išvaizdos nei paprastas tekstas, tada vartotojui bus paprasta suprasti, kad tai yra nuoroda ir ant jos galima paspausti. Kuriant nuorodas yra naudojami įvairūs hover efektai, t.y. efektas užvedus pelės žymeklį ant nuorodos. Žemiau pateikiu lentelę su keliomis stilių taisyklėmis, kurios keičia nuorodų stilius.

Reikšmių lentelė

Parametras	Reikšmė
text-align	Nurodo teksto horizontalų lygiavimą
text-decoration	Nurodo papildomas nuorodos dekoracijas
text-transform	Nurodo papildomas nuorodos transormacijas
line-height	Nurodo nuorodos teksto eilutės aukštį
color	Nurodo nuorodos teksto spalvą
direction	Nurodo nuorodos teksto kryptį
letter-spacing	Nurodo nuorodos tarpų tarp raidžių plotį
word-spacing	Nurodo tarpų tarp žodžių dydžius
border	Nurodo rėmelį aplink nuorodą
margin	Nurodo erdvę aplink nuorodos rėmelį
padding	Nurodo erdvę tarp nuorodos teksto ir rėmelio
outline	Nurodo erdvę tarp border ir margin

Pseudo klasės

Su nuorodomis yra naudojamos jų stilių pseudo klasės:

a:link - paprasta nuoroda, dar ant jos nebuvo paspausta
a:visited - nuoroda, kurioje vartotojas jau buvo
a:hover - nuoroda ant kurios vartotojas užėjo su pele
a:active - dabar aktyvi nuoroda

Jei norit, kad nuorodų pseudo klasės gerai veiktų, ja aprašyti reikia būtent šia tvarka: a:link, a:visited, a:hover, a:active. Kitu atveju gali kilti netikslumų.

Pavyzdys

<style type="text/css">
a:link, a:active, a:visited {
	padding:10px;
	line-height:25px;
	font-size:15px;
	font-weight:bold;
	background-color:#0CC;	
	text-decoration:none;
	font-family:Verdana, Geneva, sans-serif;
}
a:hover {
	background-color:#0F6;
	font-style:italic;
	text-decoration:overline underline;
}
</style>
 
<a href="#">Pradžia</a>
<a href="#">Antras</a>
<a href="#">Trečias</a>