Hiperai yra pagrindinis elementas internete. Kiekviena svetainė juos naudoja, kad sujungtų skirtingus turinius ir palengvintų naršymą. Tačiau standartinis nuorodų dizainas dažnai yra nepatrauklus. Vis dėlto, hiperaitus galima lengvai pagražinti ir padaryti patrauklesniais naudojant CSS. Šioje instrukcijoje parodysiu, kaip galite stilingai suformatuoti įvairius nuorodų būsenas su CSS.
Pagrindiniai atradimai
- Yra trys pagrindinės nuorodų būsenos: normalus, hover ir aplankytas.
- CSS leidžia individualiai formuoti šių būsenų išvaizdą.
- Pseudoklasių:hover,:visited ir:active naudojimas yra būtinas norint suteikti patrauklų dizainą.
Žingsnis po žingsnio instrukcija
Nuorodų būsenų pagrindai
Pirmiausia svarbu suprasti tris pagrindines hiperaitų būsenas:
- Normalus (neaplankytas)
- Hover (kai pelė yra virš nuorodos)
- Aplankytas (jau aplankytos nuorodos)
Norėdamas tai pademonstruoti, apsilankyk bet kurioje svetainėje, pvz., w3.org, ir stebėk nuorodų elgesį. Standartinėje būsenoje jos pasirodo mėlynai. Paspaudus, jų spalva dažnai pasikeičia į violetinę arba purpūrinę, nurodant, kad jau aplankei tą nuorodą.
CSS selektoriai nuorodoms
Norėdamas suformatuoti nuorodų būsenas su CSS, naudok selektorius a, a:hover ir a:visited.
- a selektorius tikslina normalų būseną.
- a:hover selektorius rūpinasi išvaizda, kai vartotojas pelę laiko virš nuorodos.
- a:visited selektorius naudojamas nuorodoms, kurios jau buvo aplankytos.
Hover efektų pridėjimas
Norint pagerinti vartotojo patirtį, turėtum pridėti hover efektą. Čia gali pavyzdžiui pažaisti su padding ir pakeisti fono spalvą, kai nuoroda yra pažymėta. Tai suteikia vartotojui vizualinį grįžtamąjį ryšį apie pelės žymeklio buvimo vietą.
Teksto dekoravimo pritaikymas
Dar vienas būdas pagerinti nuorodų dizainą yra teksto dekoravimo pritaikymas. Vietoj to, kad nuorodą visada parodome pošviestu, gali ją akivai perkelti tik tada, kai vartotojas perkelia pelę virš nuorodos. Tai suteikia modernų ir tvarkingą išvaizdą.
a:hover { text-decoration: underline; }
Aktivinės būsenos pridėjimas
Būsena, kai nuoroda šiuo metu paspaudžiama, yra apibrėžta a:active selektoriumi. Ši būsena rodo, kad vartotojas aktyviai pasirenka nuorodą.
Visų būsenų suderinimas
Dabar aptarėte visas būtinas nuorodų dizaino būsenas.
a:visited { color: green; }
a:hover { background-color: #aaa; padding: 5px 15px; text-decoration: underline; }
a:active { background-color: lightgrey; }
Santrauka – Hiperai papuošiami su CSS
Šioje instrukcijoje išmokote, kaip efektyviai suformatuoti įvairias hiperaitų būsenas naudojant CSS. Dabar žinote, kad svarbu tinkamai naudoti:hover,:visited ir:active būsenas, kad sukurtumėte patrauklią ir patogią naudoti interneto sąsają. Paprastais pakeitimais, tokiais kaip spalvų keitimas ir padding, galite padaryti nuorodas patrauklesnėmis ir intuityvesnėmis.
Dažnai užduodami klausimai
Kokie yra svarbiausi nuorodų būsenų privalumai CSS?Svarbiausios būsenos yra normalus, hover ir aplankytas.
Kaip galiu pritaikyti hover būseną nuorodoms?Naudokite selektorių a:hover CSS, kad pakeistumėte išvaizdą, kai pelė yra virš nuorodos.
Kaip stilingai pritaikyti aplankytas nuorodas CSS?Naudokite selektorių a:visited, kad pritaikytumėte jau aplankytų nuorodų dizainą.
Koks skirtumas tarp a:active ir a:hover?a:hover apima nuorodas, virš kurių yra pelė, o a:active atspindi būseną, kai nuoroda yra paspaudžiama.
Kaip galiu pritaikyti nuorodų pošviestumą?Naudodami text-decoration: none galite pašalinti pošviestumą ir po a:hover vėl pridėti pošviestumą.
