CSS Lingid
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; }
