Site hosted by Angelfire.com: Build your free website today!

CSS Lingid

CSS

Kui sa kirjutad Html linki siis lisab brauser automaatselt allajoonduse. Seda selleks, et vaataja saaks aru, et vastav tekstiosa on lingitav. CSS'i abil on võimalik muuta lingi välimust kuid nii, et on siiski arusaadav, et tegemist on lingiga. Allpool tuleb juttu sellistest meetoditest.

Allajoonduse eemaldamine

Selleks, et üdse mingeid muudatusi teha lingi välimuses, tuleb kõigepealt eemaldada allajoondus. Selleks kirjutame järgneva koodi:

a { text-decoration: none; }

Allajoonduse muutmine punktiiriks

Allajoonduse asemel saab kasutada ka punktiirjoont. Selleks kirjutame järgneva koodi:

a { text-decoration: none; border-bottom:2px dotted; }

Tulemus peaks olema selline:

Punktiiriga allajoonitud link

Samamoodi saab ka kasutada kriipse. Selleks tuleb kasutada CSS omadust, "dashed". Tulemus on siis selline:

Kriipsudega allajoonitud link

Allajoonduse värvi muutmine

Linki saab kujundada ka allajoonduse värvi muumisega. Valida tuleks selline värv mis sobiks saidi kujundusega. kirjutame sellise koodi:

a { text-decoration: none; border-bottom:2px solid red; }

Tulemus peaks olema selline:

Värvilise joonega allajoonitud link

Kahekordne allajoondus

Kahekordse allajoonduse nipp seisneb selles, et tuleb muuta joone paksust. (Juhul kui jätta joone paksuseks 1px siis kuvatakse see ühtse joonena.)

Kood ise on selline:

a { text-decoration: none; border-bottom:5px double; }

ja tulemus on selline

Kahekordse joonega allajoonitud link

Samuti on võimalik ära kasutada olemasolevat allajoondust ning lisada sellele näiteks punktiirjoon.

Kombineeritud allajoondusega link

Ära unusta ka lingi seisundeid

Allajoondust saab kujundada ka lingi seisundite ("hover", "active", "visited") juures. Kirjutame näiteks lingi millele kursoriga liikudes lisandub punktiirne allajoondus.
Kirjutame sellise koodi:

a { text-decoration: none; }
  a:hover { border-bottom:1px dotted; }

Vaata näidet