Elimineu els subratllats d'enllaç o creeu punts arrodonits o punts subratllats
De manera predeterminada, els navegadors web tenen certs estils CSS que s'apliquen a elements HTML específics. Si no sobreescriu aquests valors per defecte amb els fulls d'estil del vostre lloc, els valors predeterminats s'aplicaran. Per als hipervincles, l'estil de visualització predeterminat és que qualsevol text vinculat serà blau i subratllat. El navegador fa això perquè els visitants d'un lloc puguin veure fàcilment el text que està enllaçat. Molts dissenyadors web no els preocupen aquests estils per defecte, especialment els subratllats. Afortunadament, CSS fa que sigui fàcil canviar l'aspecte d'aquests subratllats o eliminar-los completament.
S'està eliminant el subratllat en enllaços de text
El text subratllat pot ser més difícil de llegir que el text no subratllat. A més, molts dissenyadors simplement no els importa l'aspecte dels enllaços de text subratllats. En aquests casos, és probable que vulgueu eliminar aquests subratllats per complet.
Per eliminar les subratllades dels enllaços de text, utilitzaràs la decoració de text de la propietat CSS. Aquest és el CSS que escriviu per fer-ho:
a {text-decoration: none; }
Amb aquesta línia de CSS, eliminaríeu el subratllat de tots els enllaços de text. Tot i que aquest és un estil molt general (utilitza un selector d'elements), encara té més especificitat que els estils de navegadors predeterminats. Com que aquests estils per defecte són el que crea les subratllades per començar, això és el que necessiteu sobreescriure.
Una precaució per eliminar subratllats
Visualment, l'eliminació de les subratllades pot ser exactament el que vulgueu aconseguir, però també heu de tenir cura quan feu això. Tant si t'agrada l'aparença d'enllaços subratllats com si no, no pots argumentar que fan que sigui obvi sobre quin text està enllaçat i quina no. Si traieu subratllats o canvieu aquest color d'enllaç blau predeterminat, heu d'assegurar-vos de reemplaçar-los per estils que encara permeten destacar el text enllaçat. Això farà una experiència més intuïtiva per als visitants del vostre lloc.
No subratllar enllaços no enllaçats
Una altra precaució sobre els enllaços i subratllats, no subratllen text que no sigui un enllaç com a forma de fer-ho ressaltar. La gent ha arribat a esperar que el text subratllat sigui un enllaç, de manera que si subratlla el contingut per afegir èmfasi (en lloc de fer-lo en negreta o en cursiva), envia el missatge equivocat i confondre els usuaris del lloc.
Canvieu el subratllat a punts o taulers
Si voleu mantenir l'enllaç del text subratllat, però canvieu l'estil d'aquest subratllat des de l'aspecte predeterminat, que és una línia "diners", podeu fer-ho també. En lloc d'aquesta línia sòlida, podeu utilitzar punts per subratllar els vostres enllaços. Per fer-ho, encara eliminaràs el subratllat, però el reemplacareu amb la propietat d'estil de vora inferior:
a {text-decoration: none; frontera inferior: 1px puntejada; }Com que heu suprimit el subratllat estàndard, el puntejat és l'únic que apareix.
Vostè pot fer el mateix per obtenir guions. Només heu de canviar l'estil de la vora inferior per reduir:
a {text-decoration: none; frontera inferior: 1px traçat; }Canvieu el color subratllat
Una altra manera de cridar l'atenció sobre els vostres enllaços és canviar el color del subratllat. Només assegureu-vos que el color s'adapti a l' esquema de colors .
a {text-decoration: none; frontera inferior: 1px vermell sòlid; }Subratllats dobles
El truc per utilitzar subratllats dobles és que heu de canviar l'amplada de la vora. Si creeu un límit d'amplada d'1 píxel, acabareu amb un subratllat doble que s'assembla a un subratllat únic.
a {text-decoration: none; frontera inferior: 3px doble; }També podeu utilitzar el subratllat existent per fer un subratllat doble amb altres funcions, com una de les línies que es puntean:
A {border-bottom: 1px double; }No oblideu els estats d'enllaç
Podeu afegir l'estil de vora inferior als vostres enllaços en diferents estats, com ara: desplaçar-se,: actiu o: visitat. Això pot crear una bonica experiència d'estil "perllongat" per als visitants quan feu servir aquesta seqüència pseudònim "desplaçar". Per fer que un segon subratllat puntejat aparegui quan passis el cursor per sobre de l'enllaç:
a {text-decoration: none; } a: hover {border-bottom: 1px puntejat; }Article original de Jennifer Krynin. Editat per Jeremy Girard