Hüperlingid on veebis keskne element. Iga veebileht kasutab neid, et siduda erinevat sisu omavahel ja lihtsustada navigeerimist. Kuid linkide vaikekujundus on sageli vähe meeldiv. Hüperlinke on CSS abil lihtne kaunistada ja kasutajasõbralikumaks muuta. Selles juhendis näitan sulle, kuidas saad linkide erinevaid olekuid CSS-iga atraktiivselt kujundada.
Olulisemad järeldused
- Linkide kolm peamist olekut on: normaalne, hover ja külastatud.
- CSS võimaldab neid olekuid individuaalselt kujundada.
- Pseudoklasside:hover,:visited ja:active kasutamine on atraktiivse kujunduse jaoks hädavajalik.
Samm-sammult juhend
Linkide olekute alused
Esialgu on oluline mõista kolme peamist olekut hüperlinkide puhul:
- Normaalne (külastamata)
- Hover (kui hiir on lingil)
- Külastatud (juba külastatud lingid)
Et seda illustreerida, külasta mõnda veebilehte, näiteks w3.org, ja jälgi linkide käitumist. Vaikeolekus kuvatakse need sinisena. Pärast klõpsamist muutub nende värv sageli violetseks või lillaks, mis näitab, et oled lingi juba külastanud.
CSS selektorid linkide jaoks
Linkide olekute kujundamiseks CSS-is kasuta selektorit a, a:hover ja a:visited.
- a selektor puudutab normaalset olekut.
- a:hover selektor hoolitseb selle välimuse eest, kui kasutaja liigub hiirega lingi kohale.
- a:visited selektorit kasutatakse lingi jaoks, mida on juba külastatud.
Hover-efektide lisamine
Kasutajakogemuse parandamiseks peaksid lisama hover-efekti. Siin saad näiteks mängida padding’uga ja muuta taustavärvi, kui lingile hiirega peale liigutatakse. See annab kasutajale visuaalse tagasiside selle kohta, kus hiirekursor asub.
Teksti kaunistuse kohandamine
Teine võimalus linkide kujunduse parandamiseks on teksti kaunistuse kohandamine. Selle asemel, et link oleks alati allajoonitud, saad selle allajoonimise aktiveerida ainult siis, kui kasutaja liigutab hiire lingile. See tagab kaasaegse ja korrastatud välimuse.
a:hover { text-decoration: underline; }
Aktiivne olek
Olek, kus linki hetkel klõpsatakse, määratletakse a:active selektoriga. See olek näitab, et kasutaja valib aktiivselt lingi.
Olekute ühendamine
Nüüd oled käsitlenud kõiki vajalikke olekuid linkide kujundamiseks.
a:visited { color: green; }
a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }
a:active { background-color: lightgrey; }
Kokkuvõte – hüperlinkide kaunistamine CSS-iga
Selles juhendis oled õppinud, kuidas erinevaid hüperlinkide olekuid CSS-iga tõhusalt kujundada. Nüüd tead, kui oluline on õigesti kasutada olekuid:hover,:visited ja:active, et luua atraktiivne ja kasutajasõbralik veebiliides. Lihtsate kohandustega nagu värvimuutused ja padding saad linke atraktiivsemaks ja intuitiivsemaks muuta.
Sageli esitatavad küsimused
Millised on CSS-i peamised linkide olekud?Peamised olekud on normaalne, hover ja külastatud.
Kuidas saan linkide hover-olekut kohandada?Kasutage selektorit a:hover CSS-is, et muuta välimust hiire peale viimise ajal.
Kuidas ma stiilin külastatud linke CSS-is?Kasutage selektorit a:visited, et kohandada juba külastatud linkide kujundust.
Mis vahe on a:active ja a:hover?a:hover puudutab lingid, mille kohal on hiir, samas kui a:active kajastab olekut, kui linki klõpsatakse.
Kuidas saan linkide allajoonimist kohandada?Kasutades text-decoration: none, saad allajoonimise eemaldada ja lisada allajoonimise a:hover all.
