Nuorodos yra labai dažnos tinklalapiuose, tačiau daugelis interneto dizainerių nesupranta galios, kurią jie turi su CSS, kad veiksmingai manipuliuoti ir valdyti jų nuorodas. Galite nustatyti nuorodas su aplankytais, rodyklėmis ir aktyviosiomis būsenomis. Taip pat galite dirbti su sienomis ir aplinka, kad jūsų nuorodos būtų labiau pizzazos arba kad jie atrodytų kaip mygtukai ar net vaizdai.
Dauguma interneto dizainerių pradeda apibrėžti stilių "a" žymą:
a {spalva: raudona; }Tai supaprastins visus nuorodos aspektus (užveskite, aplankysite ir aktyvus). Kad kiekviena dalis būtų atskirta atskirai, turite naudoti pseudoklasių nuorodas.
Susieti pseudoklases
Yra keturi pagrindiniai pseudoklasių tipų tipai, kuriuos galite apibrėžti:
- : nuoroda - tai numatytasis nuorodos stilius
- : aplankė - po nuorodos paspaudimo
- : užveskite pelę - kaip pelė pasiruošusi per nuorodą (iš anksto spustelėkite)
- : aktyvus - tiesiai, kai spustelėta nuoroda
Norėdami nustatyti pseudo klasės nuorodą, naudokite jį su žymelę savo CSS parinktyje . Taigi, norėdami pakeisti visų nuorodų spalvą į pilką, įrašykite:
a: aplankė {color: gray; }Jei sukursite vieną pseudo klasės nuorodą, tai yra gera idėja juos visus stiliaus. Tokiu būdu jūs nebūsite nustebinti dėl pašalinių rezultatų. Taigi, jei jūs tiesiog norite pakeisti aplankytą spalvą į pilką, o visos kitos jūsų nuorodų pseudo savybės lieka juodos, rašykite:
a: nuoroda, a: hover, a: aktyvus {color: black; } a: aplankė {color: gray; }Pakeiskite nuorodų spalvas
Populiariausias stilių nuorodų būdas yra keisti spalvą, kai pele nuveda ant jo:
a {color: # 00f; } a: hover {color: # 0f0; }Tačiau nepamirškite, kad galite paveikti tai, kaip ji atrodo, kai ji spustelėja jį naudodami aktyviąją nuosavybę:
a {color: # 00f; } a: aktyvus {color: # f00; }Arba kaip nuoroda saugo po to, kai lankėtės, naudodamas: aplankytą turtą:
a {color: # 00f; } a: visited {color: # f0f; }Viską sudėjus:
a {color: # 00f; } a: visited {color: # f0f; } a: hover {color: # 0f0; } a: aktyvus {color: # f00; }Įdėkite fonus nuorodose, kuriose norite pridėti piktogramų ar kulka
Galite įdėti fono nuorodą, kaip parodyta "Stilių fonų" straipsnyje, tačiau truputį žaisdami su fone galite sukurti nuorodą su susijusia piktograma. Pasirinkite mažą piktogramą, maždaug 15px iki 15px, nebent jūsų tekstas yra didesnis. Įdėkite fono į vienos nuorodos pusę ir nustatykite pakartojimo parinktį ne kartoti. Tada padėkite nuorodą, kad saitos tekstas būtų perkeltas pakankamai toli į kairę arba į dešinę, kad pamatytumėte piktogramą.
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) kairysis centras no-repeat; spalva: # c00; }Kai turėsite savo piktogramą, galite nustatyti kitą vaizdą kaip nukreipimo, aktyvios ir aplankytos piktogramos, kad pakeistų nuorodą:
a {padding: 0 2px 1px 15px; background: #fff url (ball.gif) kairysis centras no-repeat; spalva: # c00; } a: hover (background: #fff url (ball2.gif) left center no-repeat; } a: active {background: #fff url (ball3.gif) left centre no-repeat; }Padarykite savo nuorodas atrodyti kaip mygtukai
Mygtukai yra labai populiarus, tačiau kol CSS nepateko, turėjote kurti mygtukus naudojant vaizdus , todėl jūsų puslapiai užstrigo ilgiau. Laimei, yra sienų stiliaus, kuris gali padėti lengvai sukurti mygtuko efektą naudojant CSS.
{border: 4px pradžia; padding: 2px; teksto apdaila: nėra; } a: active {border: 4px inset; }Atkreipkite dėmesį, kad kai įterpiate spalvas iš pradžių ir įterpimo stilių, naršyklės nėra tokios tikėtina, kad pateiktų juos kaip tikėtumėte. Taigi, čia yra mėgstamiausias mygtukas su spalvotomis sienomis:
a {border-style: solid; pasienio plotis: 1px 4px 4px 1px; teksto apdaila: nėra; padding: 4px; pasienio spalva: # 69f # 00f # 00f # 69f; }Taip pat galite paveikti mygtuko nuorodą ir aktyvius stilius, tiesiog naudokite tas pseudo klases:
a: nuoroda {border-style: solid; pasienio plotis: 1px 4px 4px 1px; teksto apdaila: nėra; padding: 4px; pasienio spalva: # 69f # 00f # 00f # 69f; } a: hover (border-color: #ccc; }