Hiperlinku formatēšana – CSS stili saitēm

Hipersaites ir centrālais elements tīmeklī. Katra vietne tās izmanto, lai savienotu dažādus saturus un atvieglotu navigāciju. Tomēr standarta saišu dizains bieži vien ir maz pievilcīgs. Taču hipersaites ar CSS ir viegli uzlabot un padarīt lietotājam draudzīgākas. Šajā rokasgrāmatā es tev parādīšu, kā dažādus saišu stāvokļus ar CSS var pievilcīgi noformēt.

Galvenie secinājumi

• Ir trīs galvenie saišu stāvokļi: normāls, hover un apmeklēts.
• CSS ļauj individuāli veidot šo stāvokļu izskatu.
• Pseido-klasēm:hover,:visited un:active ir būtiska nozīme pievilcīgas noformēšanas nodrošināšanā.

Sol pa solim rokasgrāmata

Saišu stāvokļu pamati

Pirmkārt, ir svarīgi saprast trīs galvenos hipersaišu stāvokļus:

1. Normāls (neapmeklēts)
2. Hover (kad pele ir virs saites)
3. Apmeklēts (jau apmeklētas saites)

Lai to ilustrētu, apmeklē kādu vietni, piemēram, w3.org, un novēro saišu uzvedību. Standarta stāvoklī tās parādās zilā krāsā. Pēc noklikšķināšanas to krāsa bieži vien mainās uz violetu vai purpursarkanu, kas norāda, ka tu jau esi apmeklējis šo saiti.

CSS selektori saišu vērtībām

Lai noformētu saišu stāvokļus ar CSS, izmanto selektorus a, a:hover un a:visited.

• a selektors attiecas uz normālo stāvokli.
• a:hover selektors rūpējas par izskatu, kad lietotājs ar peli pārvietojas pār saiti.
• a:visited selektors tiek izmantots saites, kas jau ir apmeklētas.

Pievienot hover efektus

Lai uzlabotu lietotāja pieredzi, tev būtu jāievieš hover efekts. Šeit tu vari, piemēram, spēlēt ar padding un mainīt fona krāsu, kad saite tiek pārsvītrota. Tas sniedz lietotājam vizuālu atgriezenisko saiti par to, kur atrodas pele.

Teksta dekorācijas pielāgošana

Vēl viena iespēja, kā uzlabot saišu dizainu, ir teksta dekorācijas pielāgošana. Tā vietā, lai vienmēr parādītu saiti ar apakšsvītru, tu vari aktivizēt šo apakšsvītru tikai tad, kad lietotājs ar peli pārvietojas pār saiti. Tas nodrošinās modernu un sakārtotu izskatu.

a:hover { text-decoration: underline; }

Pievienot aktīvā stāvokli

Stāvokli, kad saite tiek klikšķināta, nosaka a:active selektors. Šis stāvoklis norāda, ka lietotājs aktīvi izvēlas saiti.

Visu stāvokļu apvienošana

Tagad tu esi apskatījis visus nepieciešamos stāvokļus saišu dizainēšanai.

a:visited { color: green; }

a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }

a:active { background-color: lightgrey; }

Kopsavilkums – hipersaišu uzlabošana ar CSS

Šajā rokasgrāmatā tu uzzināji, kā efektīvi noformēt dažādos hipersaišu stāvokļus ar CSS. Tu zini, ka ir svarīgi pareizi izmantot stāvokļus:hover,:visited un:active, lai izveidotu pievilcīgu un lietotājam draudzīgu tīmekļa saskarni. Veicot vienkāršas izmaiņas, piemēram, krāsu maiņas un padding, tu vari padarīt saites pievilcīgākas un intuitīvākas.