Elimina ligazóns subliñados ou crea ligazóns pontuadas dobres ou dobres
Por defecto, os navegadores web teñen certos estilos CSS que se aplican a elementos HTML específicos. Se non sobrescribe estes valores por defecto coas follas de estilo do seu sitio, aplicaranse os valores predeterminados. Para os hipervínculos, o estilo de visualización predeterminado é que calquera texto vinculado será azul e subliñado. O navegador fai isto para que os visitantes dun sitio poidan ver facilmente que texto está ligado. Moitos diseñadores web non se preocupan por estes estilos predeterminados, especialmente os subliñados. Afortunadamente, CSS fai que sexa fácil cambiar o aspecto destes subliñados ou eliminalos por completo.
Eliminar o subliñado nas ligazóns de texto
O texto subliñado pode ser máis retador para ler ese texto non subliñado. Ademais, moitos deseñadores simplemente non se preocupan polo aspecto das ligazóns de texto subliñadas. Nestes casos, probabelmente quererá eliminar estes subliñados completamente.
Para eliminar os subliñados das ligazóns de texto, usarás a decoración de texto da propiedade CSS. Aquí tes a CSS que escribirías para facelo:
a {text-decoration: none; }
Con aquela liña de CSS, eliminarías o subliñado de todas as ligazóns de texto. Aínda que este sexa un estilo moi xeral (usa un selector de elementos), aínda ten máis especificidade que os estilos de navegadores predeterminados. Porque eses estilos predeterminados son os que crean as subratinas para comezar, isto é o que precisa sobrescribir.
Unha precaución na eliminación de subliñados
Visualmente, a eliminación de subliñados pode ser exactamente o que desexa realizar, pero tamén debes ter coidado ao facelo tamén. Se che gusta o aspecto das ligazóns subliñadas ou non, non podes argumentar que o fan obvio en canto a que texto está ligado e que non. Se eliminas subliñadas ou cambias a cor da ligazón azul predeterminada, debes asegurarte de substituílas por estilos que aínda permiten destacar o texto ligado. Isto permitirá unha experiencia máis intuitiva para os visitantes do seu sitio.
Non subliñar non ligazóns
Outra precaución sobre enlaces e subliñados non subliña texto que non sexa un enlace como unha forma de enfatizar. A xente chegou a esperar que o texto subliñado sexa unha ligazón, polo que se subliña o contido para engadir o énfasis (en lugar de en negra ou en cursiva), envía a mensaxe incorrecta e confundirá aos usuarios do sitio.
Cambia o subliñado a puntos ou guións
Se queres manter a subliña a ligazón do teu texto, pero cambia o estilo desta subliñada desde o aspecto predeterminado, que é unha liña "soldi", podes facelo tamén. En vez de esa liña sólida, podes usar puntos para subliñar as túas ligazóns. Para facelo, aínda eliminarás o subliñado, pero o reemplazarás pola propiedade do estilo de bordo inferior:
a {text-decoration: none; fronteira inferior: 1px punteado; }Xa eliminou o subliñado estándar, o punteiro é o único que aparece.
Podes facer o mesmo para obter guións. Só cambia o estilo de bordo inferior para cortar:
a {text-decoration: none; bordo inferior: 1px trazado; }Cambia a cor subliñada
Outra forma de chamar a atención sobre as túas ligazóns é cambiar a cor do subliñado. Só asegúrese de que a cor encaixa co esquema de cores .
a {text-decoration: none; fronteira inferior: 1px vermello sólido; }Dous subliñados
O truco para usar subliñados dobres é que ten que cambiar o ancho do bordo. Se creas un bordo ancho de 1 píxel, acabarás cunha subvaloración dobre que semella un subliñado.
a {text-decoration: none; borde inferior: 3px dobre; }Tamén pode usar o subliñado existente para facer un subliñado dobre con outras funcións, como unha das liñas que se estenden:
a {fronteira inferior: 1px dobre; }Non esqueza os estados da conexión
Pode engadir o estilo inferior ao borde ás súas ligazóns en diferentes estados, como por exemplo: desprazamento, activo ou: visitado. Isto pode crear unha agradable experiencia de estilo "rollover" para os visitantes cando usa esa pseudo clase "hover". Para facer un segundo subliñado punteado aparece cando pasa o rato sobre a ligazón:
a {text-decoration: none; } a: hover {border-bottom: 1px punteado; }Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard