Vylepšení odkazů pomocí CSS

Pomocí kaskádových stylů lze velice efektivně upravit vzhled odkazů, můžete měnit barvu, barvu po přejetí myší, barvu pozadí odkazu, podtržení a spoustu dalších užitečných vlastností.

Tento jednoduchý stylopis pro nastavení odkazů zaručí změnu barvy po přejetí myší.

a{
text-decoration: underline
color: #6A87A7
}
a:link {
text-decoration: underline;
color: #6A87A7
}
a:visited {
text-decoration: underline;
color: #92A7BE
}
a:hover {
text-decoration: underline;
color: red
}

Další vylepšení

V následujícím příkladu jsou upraveny všechny odkazy s třídou "tlacitko" (class="tlacitko").

Selektor a určuje vzhled odkazu, selektor a:link určuje vzhled nenavštíveného odkazu, selektor a:visited určuje vzhled navštíveného odkazu a selektor a:hover určuje vzhled odkazu při přechodu myší. Takto si lze jednoduše udělat menu.

Zdrojový kód

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<TITLE>dokonalé odkazy</TITLE>
<style>
a.tlacitko{
border-bottom : 1px solid #D1D1D1;
background-color : transparent;
font-size : 10pt;
font-family : Arial, Helvetica, sans-serif;
width : 160px;
padding : 0px 5px 0px 5px;
color : #666666;
margin : 0px 10px 0px 10px;
display : block;
}
a.tlacitko:link{
text-decoration: none;
color : #666666;
}
a.tlacitko:visited{
text-decoration: none;
color : #666666;
}
a.tlacitko:hover{
text-decoration: none;
border-bottom : 1px solid orange;
color : orange;
}
</style>
</HEAD>

<BODY>

<a class="tlacitko" href="../">CSS kaskádové styly</a>
<a class="tlacitko" href="../../">Tvorba www stránek</a>
<a class="tlacitko" href="../../html/">HTML přehled</a>
<a class="tlacitko" href="../../javascript/">Skripty ke stažení</a>
<a class="tlacitko" href="../../zaklady/">Tipy a triky pro web</a>

</BODY>
</HTML>

zobrazit výsledek

Odkaz skoro jako tlačítko

Pokud nastavíte šířku odkazu na určitý rozměr a display na hodnotu block vytvoříte s odkazu blokový element, pomocí background-color nastavíte barvu pozadí, odkaz se bude podobat tlačítku.

Zdrojový kód

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<TITLE>dokonalé odkazy</TITLE>
<style>
a.tlacitko{
border-bottom : 1px solid #D1D1D1;
background-color : transparent;
font-size : 10pt;
font-family : Arial, Helvetica, sans-serif;
width : 160px;
padding : 0px 5px 0px 5px;
color : #666666;
margin : 0px 10px 0px 10px;
display : block;
}

a.tlacitko:link{
text-decoration: none;
color : #666666;
}

a.tlacitko:visited{
text-decoration: none;
color : #666666;
}

a.tlacitko:hover{
text-decoration: none;
border-bottom : 1px solid #D1D1D1;
background-color : #E9E9E9;
color : #666666;
}
</style>
</HEAD>

<BODY>

<a class="tlacitko" href="../">CSS kaskádové styly</a>
<a class="tlacitko" href="../../">Tvorba www stránek</a>
<a class="tlacitko" href="../../php/">php scripty</a>
<a class="tlacitko" href="../../html/">HTML přehled</a>
<a class="tlacitko" href="../../tipy/">Tipy a triky pro web</a>

</BODY>
</HTML>

zobrazit výsledek

Vylepšení odkazů pomocí CSS

Další vylepšení

Zdrojový kód

Odkaz skoro jako tlačítko

Zdrojový kód

Reklama

Nejoblíbenější stránky

CSS kaskádové styly

Tipy a triky v CSS