Legăturile sunt foarte frecvente pe paginile web, însă mulți designeri web nu își dau seama de puterea pe care o au cu CSS pentru a manipula și gestiona eficient legăturile lor. Puteți defini legăturile cu stările vizitate, hover și active. Puteți, de asemenea, să lucrați cu granițe și fundaluri pentru a vă oferi link-uri mai mult pizzaz sau pentru a le face să arate ca butoane sau chiar imagini.
Majoritatea web designerilor încep prin definirea unui stil pe eticheta "a":
a {culoare: roșu; }Acest lucru va structura toate aspectele legate de link (hover, visited și active). Pentru a modela fiecare parte separat, trebuie să utilizați pseudo-clase de legătură.
Link Pseudo-Classes
Există patru tipuri de bază de pseudo-clase de legătură pe care le puteți defini:
- : link - acesta este stilul implicit pentru link
- : vizitat - după ce a fost făcut clic pe o legătură
- : hover - ca mouse-ul este pus pe un link (pre-clic)
- : activă - dreapta în momentul în care faceți clic pe link
Pentru a defini o pseudo-clasă a unui link, utilizați-o cu eticheta în selectorul CSS . Deci, pentru a schimba culoarea vizitată a tuturor legăturilor dvs. în gri, scrieți:
a: vizitat {culoare: gri; }Dacă stilul unei pseudo-clase de legătură este o idee bună să le inscripționați pe toate. În acest fel nu veți fi surprinși de rezultatele străine. Deci, dacă doriți doar să schimbați culoarea vizită la gri, în timp ce toate celelalte pseudo-proprietăți ale legăturilor dvs. rămân negre, ați scrie:
a: link, a: hover, a: activ {culoare: negru; } a: vizitat {culoare: gri; }Modificați culorile de legătură
Cea mai populară modalitate de a lega stilul este de a schimba culoarea atunci când mouse-ul se deplasează peste ea:
a {culoare: # 00f; } a: hover {culoare: # 0f0; }Dar nu uitați că puteți afecta modul în care arată legătura pe care o fac clic pe ea cu: proprietatea activă:
a {culoare: # 00f; } a: activ {culoare: # f00; }Sau cum privește link-ul după ce l-ați vizitat cu: proprietatea vizitată:
a {culoare: # 00f; } a: a vizitat {color: # f0f; }Pentru a pune totul împreună:
a {culoare: # 00f; } a: a vizitat {color: # f0f; } a: hover {culoare: # 0f0; } a: activ {culoare: # f00; }Puneți fundaluri pe link-uri pentru a adăuga pictograme sau gloanțe
Puteți pune un fundal pe un link ca și în articolul Stylish Backgrounds, dar dacă jucați cu fundal puțin, puteți crea un link care are o pictogramă asociată. Alegeți o pictogramă care este mică, în jur de 15px cu 15px, cu excepția cazului în care textul dvs. este mai mare. Plasați fundalul pe o parte a legăturii și setați opțiunea de repetare la nr. Repetare. Apoi, inserați legătura astfel încât textul din cadrul linkului să fie mutat suficient de departe spre stânga sau spre dreapta pentru a vedea pictograma.
o {padding: 0 2px 1px 15px; fundal: #fff url (ball.gif) centru stânga no-repeat; culoare: # c00; }Odată ce ați primit pictograma dvs., puteți seta o imagine diferită ca pictogramele dvs. de hover, activ și vizitate pentru a schimba linkul:
o {padding: 0 2px 1px 15px; fundal: #fff url (ball.gif) centru stânga no-repeat; culoare: # c00; } a: hover {background: #fff url (ball2.gif) centru stânga no-repeat; } a: activ {background: #fff url (ball3.gif) centru stânga no-repeat; }Asigurați-vă că legăturile dvs. arată ca niște butoane
Butoanele sunt foarte populare, dar până când CSS a venit de-a lungul, a trebuit să creați butoane folosind imagini , ceea ce face ca paginile dvs. să dureze mai mult timp pentru încărcare. Din fericire, există un stil de frontieră care vă poate ajuta să creați un efect asemănător butonului cu CSS.
o {frontieră: 4px începutul; padding: 2px; text-decoration: nici unul; } a: activa {border: 4px inset; }Rețineți, atunci când puneți culorile la începutul și stilurile de inset, browserele nu sunt la fel de susceptibile de a le face așa cum v-ați aștepta. Deci, iată un buton mai fancy cu frontiere colorate:
un {stil de frontieră: solid; lățimea frontală: 1px 4px 4px 1px; text-decoration: nici unul; padding: 4px; culoare frontală: # 69f # 00f # 00f # 69f; }Și puteți afecta stilurile de hover și cele active ale unei legături de buton, utilizați doar acele pseudo-clase:
a: link {stil de frontieră: solid; lățimea frontală: 1px 4px 4px 1px; text-decoration: nici unul; padding: 4px; culoare frontală: # 69f # 00f # 00f # 69f; } a: mutați {border-color: #ccc; }