Tot ce ați învățat în lecțiile anterioare puteți utiliza pentru linkuri / linkuri (de exemplu, schimbarea fontului, culoare, subliniere etc.). Va fi nou ca, in CSS, aceste proprietati pot fi definite diferit, in functie de daca ati vizitat deja linkul, indiferent daca acesta este activ, daca indicatorul mouse-ului este peste link. Acest lucru vă permite să adăugați efecte interesante pe site-ul dvs. Pentru aceasta, se folosesc așa-numitele pseudo-clase.
Ce este o pseudo-clasă?
O pseudo-clasă vă permite să luați în considerare diverse condiții sau evenimente atunci când definiți proprietățile unei etichete HTM.
Să luăm în considerare un exemplu. După cum știți, referințele sunt specificate în eticheta HTML . În CSS, putem folosi și un selector:
Utilizați | a: link | și | a: vizitat | pentru legăturile vizitate și vizitate, respectiv. Link-urile active au pseudo-clasa a: active. și a: hover. când indicatorul este deasupra liniei.
Vom examina fiecare dintre aceste patru pseudo-clase cu exemple și explicații.
Pseudo-clasă: link
Pseudo-class: link este folosit pentru a se referi la paginile pe care utilizatorul nu le-a vizitat încă.
În exemplul codului, link-urile nevisite sunt albastre.
Pseudo-clasă: vizitat
Clasa pseudo-vizită este utilizată pentru a se referi la paginile pe care le-a vizitat utilizatorul. În exemplul de cod, legăturile vizitate sunt violete.
Pseudo-clasă: activă
Pseudo-clasa: activă este utilizată pentru legături active.
În exemplu, legăturile active au un fundal galben.
Pseudo-clasa: hover
Pseudo-clasa: hover este folosit pentru legături deasupra indicatorul mouse-ului.
Acest lucru poate fi folosit pentru a crea efecte interesante. De exemplu, dacă vrem ca link-urile să devină portocalii și italice în timp ce trec pointerul peste ele, CSS-ul nostru ar trebui să arate astfel:
Exemplul 1: Efectul de a găsi un pointer peste o legătură
Efectele pentru poziția cursorului mouse-ului asupra legăturii au devenit un loc comun. Vom analiza câteva exemple suplimentare pentru pseudo-clasa: hover.
Exemplul 1a: Spațierea între litere
După cum vă amintiți din Lecția 5, puteți seta distanța dintre caractere cu proprietatea de spațiere a literelor. Acest lucru poate fi aplicat pentru referință:
Exemplul 1b: LUCRĂRI SUPERIOARE și litere mici
În Lecția 5, am analizat proprietatea de transformare a textului. care poate comuta caractere de la litere mari la litere mici. Acest lucru poate fi, de asemenea, utilizat pentru a crea efecte pe un link:
Aceste două exemple prezintă posibilități aproape nelimitate de combinare a diferitelor proprietăți. Puteți crea propriile efecte - încercați!
Exemplul 2: Înlăturarea legăturilor de subliniere
Întrebarea obișnuită este cum să ștergeți linkurile de subliniere?
Trebuie să stabiliți cu exactitate dacă trebuie să eliminați linkurile de subliniere, deoarece acest lucru poate reduce foarte mult utilizarea site-ului dvs. Web. Oamenii sunt obișnuiți să vadă link-uri albastre subliniate pe paginile web și știu că trebuie să facă clic pe ele. Chiar și mama știe asta! Dacă anulați sublinierea și schimbați culoarea legăturilor, este foarte probabil că acest lucru va confunda utilizatorii și nu vor avea acces la întregul conținut al site-ului web al site-ului dvs. web.
De fapt, eliminarea sublinierii legăturilor este foarte simplă. După cum puteți aminti din lecția 5, proprietatea de decorare a textului poate fi utilizată pentru a determina sublinierea textului. Pentru a șterge o subliniere, nu trebuie decât să setați decorarea textului.
Alternativ, puteți seta și decorarea textului. împreună cu alte proprietăți, pentru toate cele patru pseudo-clase.
În această lecție ați aflat despre ce sunt pseudo-clasele, utilizând câteva proprietăți din lecțiile anterioare. Acest lucru ar trebui să vă arate ce caracteristici sunt prezentate în CSS.
În următoarea lecție vă vom învăța să definiți proprietățile anumitor elemente și grupuri de elemente.
Articole similare
Trimiteți-le prietenilor: