Câteva sfaturi despre cum să eliminați link-urile de subliniere în HTML utilizând CSS

Structura oricărui text informativ implică includerea de hyperlink-uri sau ancore semnificative. Aceste elemente sunt adăugate utilizând eticheta "a" (ancora). În mod implicit, browserele moderne afișează un element similar cu un subliniere inferioară. Deseori, designerii web sau designerii web preferă fie să schimbe acest stil, fie să îl ștergeți cu totul.

În unele cazuri, acest lucru este cu adevărat necesar. De exemplu, într-un bloc de referință dens, unde excesul de design va supraîncărca percepția și va face dificilă citirea documentului. Cu toate acestea, în unele cazuri este recomandabil să păstrați distincția între text și referințe. Dacă designul site-ului exclude complet această formatare, atunci merită să aplicați orice alt tip de selecție a unor astfel de elemente. Cel mai frecvent tip de demarcație de astăzi este contrastul de culoare al ancorelor din text. Este eficient. Singurul dezavantaj mic al acestei opțiuni va fi problema evidențierii textului de către persoane care nu pot percepe diferite culori (orbirea colorată). Dar acest lucru este atât de scăzut un procent din utilizatori încât pot fi neglijați.

Dacă, la urma urmei, sa decis eliminarea sublinierilor legăturilor, vor fi necesare cunoștințe despre structura creării paginii web, și anume CSS.

Îndepărtați sublinierea legăturilor pe întreg site-ul

Pentru o persoană cu o experiență foarte bună în designul web și, în special, în CSS, eliminarea sublinierilor de link-uri nu va fi foarte dificilă. Pentru a face acest lucru, trebuie doar să găsiți și să deschideți un fișier în fișierele site-ului responsabile pentru designul de stil. De obicei se află în directorul rădăcină și are extensia .css. Eliminați legăturile de subliniere se poate face cu un cod simplu:

a {

text-decoration: nici unul;

}

Această linie mică va elimina întregul site subliniind toate elementele înregistrate cu eticheta "a".

Dar dacă nu aveți acces la un fișier CSS?

În acest caz, este recomandabil să aplicați eticheta Style la începutul documentului. Funcționează la fel ca fișierul CSS. Pentru a aplica stiluri, este necesar chiar la începutul documentului (sau paginii HTML) să se finalizeze proiectul în care se aplică regulile de stil obișnuite CSS.

Aceste stiluri se aplică numai unei anumite pagini. În alte secțiuni sau documente ale site-ului nu vor acționa.

Eliminați sublinierea legăturilor atunci când plasați cursorul

Dar cum să fii, dacă trebuie să elimini linia de subliniere a link-ului atunci când se mișcă? CSS în acest caz ne poate ajuta. Codul va arăta astfel:

a: hover {

text-decoration: nici unul;

}

Este pseudo-clasa ": hover", care este responsabilă pentru decorarea elementelor atunci când se deplasează peste cursor.

Prin asamblarea acestor două opțiuni, putem face ca sublinierea link-ului să se afișeze numai atunci când se hovering, altfel totul va arăta ca un text simplu:

și {

text-decoration: nici unul;

}

a: hover {

text-decorare: subliniere;

}

Utilizând identificatori și clase

După cum puteți vedea din cele de mai sus, modificarea stilului unui element pe un site sau pe un document html este destul de ușoară. Dezavantajele acestor opțiuni sunt incapacitatea de a aplica selectiv stiluri: nu întregului site sau document, ci unui anumit link.

Există mai multe soluții la această problemă.

Puteți elimina linkurile de subliniere în linie. Deși acest lucru nu este strict recomandat în ceea ce privește optimizarea site-ului.

Pentru a face acest lucru, trebuie să specificați parametrul Style direct în eticheta de referință:

A doua opțiune este mai acceptabilă.

Introducem o clasă sau id adițional în element și atribuim aceste stiluri selectorilor deja selectați:

Apoi, toate s-au rostogolit. În fișierul CSS, putem elimina sublinierea legăturilor, aplicând stilul cunoscut clasei sau identificatorului, în funcție de alegerea dvs.

Clasa este înregistrată cu un punct înaintea numelui ei:

.none_ decoration {

text-decoration: nici unul;

}

Identificatorul este indicat prin #:

#none_ decoration {

text-decoration: nici unul;

}

Această regulă se aplică atât fișierului CSS, cât și etichetei de stil

Modificați stilul de afișare a legăturii în text

Pe lângă eliminarea sublinierii link-ului, CSS permite și alte tipuri de stil. Deseori, designerii web sau designerii de web folosesc o schimbare de culoare față de textul principal pentru a evidenția textul de referință.

Pentru a face acest lucru este, de asemenea, destul de simplu:

și {

culoare: * specificați culoarea dorită în orice format (* roșu, # c2c2c2, rgb (132, 33, 65) *) *;

}

Această stilizare este aplicată prin aceleași reguli ca cele descrise pentru anularea linkului. Regulile CSS sunt identice în acest caz. Modificați culoarea linkului și anulați anularea pot fi aplicate ca un stil separat (atunci linkul va rămâne subliniat, dar va schimba culoarea de la albastrul standard la cel de care aveți nevoie).

Înlocuirea stilului standard

O altă remarcă în cele din urmă. În loc să anulați sublinierea legăturii CSS, aceasta face posibilă înlocuirea valorilor standard de proiectare. Pentru a face acest lucru, înlocuiți următoarele valori în designul de decorațiuni text:

text-decorare-stil:

• Dacă aveți nevoie de o linie solidă, specificați valoarea solidă.
• Pentru linii ondulate - ondulate.
• Dublă linie - respectiv dublă.
• Linia poate fi înlocuită de o secvență de puncte - punctată.
• Subliniați cuvântul ca o linie punctată - întreruptă

De asemenea, puteți modifica poziția liniei relative la text:

Linia-text-decor-linia de proiectare poate lua valori:

• Standard (subliniază de jos) - subliniază.
• Transcrieți cuvântul - prin.
• Linia este pe partea de sus - peste.
• Nu știm nimic - fără stil.

Și culoarea (pentru a nu fi confundată cu culoarea textului!):

text-decoration-line: (orice culoare în orice format *roșu, # c2c2c2, rgb (132, 33, 65) *).

Pentru confort, toate cele trei poziții pot fi scrise împreună în desen:

text-decorare: roșu, line-through, ondulat.