Cum să stilați linkurile folosind CSS: un tutorial detaliat pentru începători

În acest tutorial, vom vorbi despre cum să stilăm link-urile web prin CSS. Link-urile sunt o parte centrală a oricărui site web. Vă permit să mutați vizitatorii în alte părți ale acestuia, să faceți referire la surse pentru a sublinia punctele pe care le faceți, să îi ajute pe cititori să descopere postări de blog mai relevante și multe altele.

Învățarea cum să le schimbați designul vă permite să vă asigurați că acestea sunt recunoscute ca link-uri și se potrivesc cu restul site-ului dvs. CSS oferă multe moduri și proprietăți diferite pentru asta, așa că haideți să le trecem unul câte unul.

Standarde de link și stil implicit de link

Înainte de a înțelege cum să aducem modificări designului link-urilor, să înțelegem mai întâi structura acestora. Iată cum arată un element de legătură în HTML:

 <a href="https://torquemag.io/">TorqueMag</a>

După cum puteți vedea, este format din mai multe părți:

• <a> – Acesta este operatorul pentru crearea unui element de legătură. De ce a ? Deoarece în HTML, linkurile sunt numite și etichete de ancorare .
• href="" – Orice lucru cuprins între ghilimele duble este locul în care indică acest link. Este adresa pe care va ajunge cineva care face clic pe ea.
• TorqueMag – Acesta este textul link-ului care apare pe pagină, de exemplu, așa (nu faceți clic pe el, acest link nu duce nicăieri).
• </a> – Părțile care închid elementul link și spune browserului că textul linkului se termină aici.

Până acum, atât de ușor.

Cum arată linkul implicit

Unde devine interesant este când te uiți la cum arată acest tip de link pe pagină. Probabil ați mai văzut-o.

Dacă declarați orice link vechi într-un document HTML și nu furnizați nicio informație de stil, acesta va prelua stilul implicit:

1. Textul linkului este albastru, iar linkul în sine este subliniat.
2. Când treceți cu mouse-ul peste el, cursorul se schimbă într-o pictogramă de mână.
3. Când faceți clic pe el, acesta devine roșu pentru o secundă.
4. După ce ați vizitat linkul, culoarea acestuia se va schimba în violet.
5. Când navigați la link prin tastatura tabulatorului de pe tastatură, acesta va avea un contur albastru în jurul său.

Aceste standarde au fost stabilite în primele zile ale internetului și nu s-au schimbat prea mult din anii 90. Lucrul amuzant este, chiar dacă nu te-ai gândit niciodată la asta în mod conștient, probabil că la un anumit nivel ai fost conștient de majoritatea celor de mai sus doar din navigarea pe web.

Aflați despre statele de legături

Ceva care devine evident și din cele de mai sus este că link-urile au stări diferite care influențează cum arată. Le puteți viza cu diferite pseudoclase CSS care vă permit să influențați stilul lor individual. Acestea sunt:

• a – Aceasta este eticheta de ancorare menționată mai sus. Vizează toate legăturile în toate etapele.
• a:link – Pentru legătura normală, nevizitată. În termeni tehnici, :link vizează toate etichetele de ancorare care au un atribut href . De fapt, nu este folosit atât de mult. Mulți oameni folosesc pur și simplu a , deoarece etichetele de ancorare fără un atribut href sunt destul de rare, așa că adesea nu este nevoie de acest tip de diferențiere.
• a:visited – Descrie un link pe care utilizatorul actual l-a vizitat înainte, adică există în istoricul browserului.
• a:hover – Vizează stilul care apare atunci când un utilizator plasează cursorul mouse-ului peste un link.
• a:active – Stil vizibil pentru scurt timp în momentul clicului pe link.
• a:focus – O legătură care este focalizată, de exemplu către care un utilizator a navigat folosind tasta Tab. hover și focus sunt adesea stilate împreună.

Ceea ce este important de reținut este că, atunci când schimbați stilul pentru mai multe stări de legături simultan, trebuie să faceți acest lucru în următoarea ordine.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

Stilul pentru stările de legături se construiește unul pe celălalt și se derulează în cascadă. Prin urmare, comanda contează pentru a vă asigura că funcționează conform intenției.

Îndeplinirea așteptărilor utilizatorilor

Ultima parte înainte de a intra în modul în care puteți face modificări stilului de link prin CSS, este să vorbim despre așteptările utilizatorilor. Motivul pentru care cel mai probabil ați recunoscut cu ușurință link-urile implicite ca link-uri este că anumite valori implicite au fost înrădăcinate în noi ca utilizatori de foarte mult timp.

În consecință, noi – și toți ceilalți – avem așteptări foarte clare pentru cum arată legăturile. Așteptări care, dacă nu sunt îndeplinite, pot îngreuna oamenii să recunoască legăturile pentru ceea ce sunt. Din acest motiv, atunci când lucrați la designul site-ului dvs. web, ați face bine să rămâneți aproape de aceste așteptări.

În termeni practici, asta înseamnă:

• Asigurați-vă că linkurile sunt evidențiate într-un fel. Culorile sau sublinierea sunt bune atâta timp cât faceți ca linkurile să iasă în evidență pe pagină. Evitați lucruri precum cursive sau aldine .
• Oferiți feedback prin modificarea linkurilor atunci când treceți cu mouse-ul și, într-o măsură mai mică, făcând clic ( a:active , vă amintiți?). De asemenea, nu ar trebui să vă încurcați cu cursorul care se transformă într-un simbol de mână pentru a semnifica un element interactiv.

În cele ce urmează, vă vom spune cum să schimbați toate cele de mai sus. Cu toate acestea, rețineți că ar trebui să faceți acest lucru cu moderație pentru a evita frustrarea utilizatorilor.

Cum să schimbați stilul textului linkului prin CSS

Să vorbim mai întâi despre cum să schimbați partea de text a link-ului, deoarece aceasta este ceea ce alcătuiește carnea acestuia.

Modificarea culorii textului linkului

Lucrurile pe care le acoperim în această secțiune sunt relativ similare cu articolul nostru despre cum să declarăm culorile prin CSS. Așadar, dacă doriți să intrați cu adevărat în detalii, vă sfătuiesc să aruncați o privire și pe acea postare.

Puteți schimba culoarea textului linkului în mai multe moduri diferite: cuvinte de culoare și diferite sisteme de notare a culorilor, cum ar fi codul HEX, rgb() / rgba() , hsl() / hsla() etc.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Iată cum arată cele de mai sus pe pagină:

Cel mai frecvent, veți folosi ceva de genul HEX sau rgb() . Utilizarea numelor de culori este extrem de rară în afara cazurilor de testare simple.

Sistemul de culori pe care îl utilizați depinde de diferiți factori, cum ar fi compatibilitatea browserului sau dacă aveți sau nu nevoie de transparență. Cu toate acestea, după cum puteți vedea, alocarea de culori către legături este destul de simplă prin intermediul proprietății de color și funcționează în același mod pentru toate celelalte stări de legătură. În consecință, puteți schimba cu ușurință culoarea textului și pentru :hover sau :focus .

Ajustați culoarea de fundal

Pe lângă schimbarea culorii textului, puteți modifica și culoarea de fundal a link-urilor și diferitele stări ale acestora. Acest lucru este la fel de ușor ca și utilizarea proprietății background-color .

Iată marcajul pentru exemplul de mai sus:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Alte opțiuni de stil de text

Deoarece linkurile nu sunt altceva decât text, toate celelalte moduri de stilare a textului în CSS se aplică și acestora. Aceasta înseamnă că puteți atribui alte proprietăți link-urilor și diferitelor lor stări și le puteți modifica dimensiunea fonturilor, familiile de fonturi sau alte lucruri atunci când utilizatorii trec cu mouse-ul peste ele.

Acest lucru poate avea sens pentru anumite modele, cu toate acestea, acestea sunt modalități mai puțin obișnuite de a crea link-uri prin CSS.

Iată marcajul pentru a obține efectele de mai sus:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Lucrați cu subliniere

După cum am aflat la început, linkurile sunt subliniate în mod implicit. Dacă vrei să scapi de asta, poți folosi text-decoration: none; (care este cea mai comună utilizare a proprietății text-decoration ).

 a { text-decoration: none; }

Unii oameni preferă, de asemenea, să adauge o subliniere numai la trecerea cursorului, dar nu pentru linkul normal. Acest lucru este, de asemenea, ușor de făcut.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

În plus, puteți folosi border: bottom; în loc de text-decoration: underline; pentru a adăuga o linie sub link-urile dvs. Oamenii obișnuiau să folosească acest lucru pentru că oferea opțiuni de stil mai bune. Cu toate acestea, în aceste zile avem noi proprietăți pentru metoda standard de underline care permit mai multe personalizări.

De exemplu, text-underline-offset vă permite să controlați distanța dintre text și linia de dedesubt atunci când utilizați text-decoration . text-decoration-thickness vă permite să setați o lățime de linie personalizată. Deci, mersul pe ruta de border nu mai este atât de necesar ca înainte.

În afară de asta, există într-adevăr o mulțime de moduri în care poți lucra cu linia de sub linkuri, inclusiv animația. Probabil ai putea scrie un alt articol doar despre asta.

Schimbarea stilului cursorului la trecerea cursorului

După cum am vorbit deja, atunci când treceți cu mouse-ul peste un link, cursorul mouse-ului se schimbă de la o săgeată mică la o mână mică care arată.

Până acum, acesta este semnul universal că aveți de-a face cu un element HTML pe care se poate face clic. Cu toate acestea, s-ar putea să nu știți că puteți schimba cursorul și pe alte lucruri, de la o reticulă peste săgeți de redimensionare la un indicator de încărcare.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Dacă sunteți curios, încercați cele de mai sus într-un mediu de dezvoltare locală pentru a vedea efectul lor. Există mult mai multe opțiuni, pe care le puteți găsi aici.

Cu toate acestea, deoarece indicatorul este atât de universal, acest lucru este cu siguranță ceea ce se așteaptă utilizatorii și, de obicei, ar trebui să rămâneți cu el. Dacă, dintr-un motiv oarecare, nu funcționează pentru link-urile dvs., îl puteți corecta cu următorul cod:

 a { cursor: pointer; }

Este chiar posibil să utilizați imagini personalizate dacă doriți să folosiți propriile cursoare pe site-ul dvs. web. De exemplu, un magazin online german pentru produse muzicale folosește propriul cursor tematic.

Dacă examinați cum o fac prin instrumentele de dezvoltare ale browserului, veți găsi următorul cod:

 a { cursor: url(../images/hand.cur),pointer; }

După cum puteți vedea, puteți utiliza pur și simplu un cursor personalizat furnizând adresa unui fișier imagine.

Efectuați modificări la a:focus

Stilizarea pentru focus este un ajutor important pentru accesibilitate, așa că asigurați-vă că rămâne în preajmă. În mod implicit, evidențierea are loc prin proprietatea outline , ceea ce face să apară o casetă în jurul acesteia.

De ce outline și nu border întrebi?

Pentru că outline nu ocupă spațiu pe pagină. În schimb, se află deasupra fundalului elementului. În acest fel, focalizarea unui link nu schimbă salturile de aspect al paginii sau similare.

Deci, ce alte opțiuni de stil aveți pentru un link concentrat?

O mulțime. Este nevoie de totul, de la culoarea de background-color la color , font-size , box-shadow , cum ar fi.

Iată cum să realizați cele de mai sus:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

Folosind a:focus , puteți face practic orice doriți. Una dintre cele mai interesante aplicații, totuși, ar putea fi că puteți, de asemenea, să personalizați pur și simplu configurația implicită a browserului folosind proprietatea outline .

 a:focus { outline: 3px dotted green; }

Iată cum arată cele de mai sus pe pagină:

Link butoane și casete

Desigur, link-urile nu sunt doar link-uri text. În unele locuri, acestea apar adesea ca casete, cum ar fi meniurile de navigare, ca părți ale formularelor sau îndemnuri.

Acest lucru nu este prea greu de realizat. Practic, trebuie doar să găsești modalități de a adăuga spațiu în jurul textului linkului și de a oferi un fundal sau chenar/contur pentru ca acesta să apară ca buton sau casetă. În afară de asta, sunt încă același element de legătură pe care îl folosim înainte.

Există mai multe modalități de a realiza acest lucru, de la simpla adăugare de căptușeală la sisteme precum flexbox sau grid. Mai jos este doar un exemplu de cum o puteți face, există multe mai multe opțiuni.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

În acest caz, CSS conține atât stilul pentru link, cât și containerul în care se află. Desigur, puteți utiliza aceleași stări de link ca înainte pentru a include comportamente diferite pentru diferite scenarii.

Includeți pictograme în linkurile dvs

Un lucru rapid care merită explicație este că aveți și posibilitatea de a include pictograme în link-urile dvs. Este ceea ce fac unii oameni pentru a face și mai clar că ceva este un outlink care îi va îndepărta pe utilizatori de pagina curentă.

Iată cum să faci asta. Mai întâi HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Apoi, CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

A a[href^="http"] vizează numai etichetele de ancorare care au o adresă care începe cu http în href="" . La acestea, marcajul adaugă o imagine de fundal, care este pictograma, o setează să nu se repete, o mută complet spre dreapta și o centrează pe verticală. Restul marcajului definește dimensiunea pictogramei și creează un pic de spațiu între aceasta și text.

Gânduri finale: stil CSS pentru linkuri

Schimbarea stilului de link-uri prin CSS nu este atât de dificilă odată ce aveți elementele de bază jos. Cea mai importantă parte este înțelegerea faptului că aceștia iau stări diferite care sunt vizate de diferiți operatori și pseudo-clase. După aceea, este pur și simplu o chestiune de a folosi proprietățile comune CSS pentru a le schimba designul la orice doriți. Acum aveți toate informațiile de care aveți nevoie pentru a începe.

Care este modalitatea ta preferată de a stila link-urile prin CSS? Alte sfaturi de împărtășit? Vă rugăm să faceți acest lucru în comentarii!