CSS en sí no proporciona directamente la función de cambiar el subrayado de los enlaces HTML, pero siempre que usemos algunas técnicas, aún podemos hacer que el monótono subrayado de los enlaces web se vuelva colorido.
1. Principios básicos
En primer lugar, el primer paso para personalizar el subrayado de los enlaces HTML es crear un gráfico. Repita este gráfico en dirección horizontal para formar un efecto de subrayado. Si desea mostrar el fondo de la página web detrás del subrayado, puede utilizar un gráfico .gif transparente.
En segundo lugar, si la altura del gráfico subrayado es grande, la altura del texto debe aumentarse adecuadamente para que haya un espacio mayor entre la parte inferior de una línea de texto y la parte superior de la siguiente línea de texto, como p { altura de línea: 1,5;
Ejemplo de subrayado de enlace personalizadoEn tercer lugar, para mostrar un subrayado personalizado, el subrayado predeterminado debe estar oculto, es decir, {text-decoration: none}.
Cuarto, establezca el gráfico subrayado para el elemento de enlace y cree un subrayado personalizado. Suponiendo que el gráfico subrayado es underline.gif, el código CSS para configurar el gráfico subrayado es { background-image: url(underline.gif );
Quinto, debemos hacer que el gráfico subrayado se repita en dirección horizontal, pero no en dirección vertical, de lo contrario quedará oculto detrás del texto. El código que requiere que el subrayado se repita solo en dirección horizontal es: a { background-repeat: repetir-x }.
Sexto, para garantizar que el gráfico aparezca debajo del texto del enlace (independientemente del tamaño de fuente), utilice el atributo de posición de fondo para colocar el gráfico en la parte inferior del elemento del enlace. Para gráficos subrayados como flechas, es posible que también desee considerar la alineación horizontal de los gráficos. Supongamos que desea colocar el gráfico subrayado en la esquina inferior derecha, el código CSS es: a { background-position: 100% 100% }.
En séptimo lugar, se debe agregar un espacio en blanco apropiado para permitir espacio para gráficos personalizados debajo del texto del enlace. La posición específica del gráfico subrayado en relación con el texto del enlace está relacionada con el tamaño del texto, pero en términos generales, primero puede hacer que el margen inferior sea igual a la altura del gráfico subrayado y luego ajustarlo si es necesario. Por ejemplo: a { padding-bottom: 4px }.
En octavo lugar, dado que el gráfico subrayado se coloca en la parte inferior del elemento del vínculo, se debe garantizar que el vínculo no se rompa (si se permite que el vínculo abarque varias líneas, solo el texto del vínculo en la siguiente línea tendrá un subrayado personalizado). ). Utilice el atributo de espacio en blanco de CSS para evitar que el texto del enlace se ajuste, es decir, un {espacio en blanco: nowrap}.
En resumen, un ejemplo completo de definición de propiedades de estilo CSS para un elemento de enlace sería:
a {
decoración de texto: ninguna;
fondo: url(underline.gif) repetir-x 100% 100%;
fondo de relleno: 4px;
espacio en blanco: nowrap;
}
Si desea que el subrayado personalizado aparezca solo cuando el mouse está sobre el cursor , simplemente cambie la propiedad de fondo CSS originalmente establecida directamente en el elemento de enlace a: hover, por ejemplo:
a {
decoración de texto: ninguna;
fondo de relleno: 4px;
espacio en blanco: nowrap;
}
a: flotar {
fondo: url(underline.gif) repetir-x 100% 100%;
}
2. Apreciación de ejemplos
Supongamos que hay dos gráficos subrayados diagonal.gif (línea corrugada) y flower.gif (flor). La altura y el ancho del primero son 3 y 9, y la altura y el ancho del segundo son 11 y 15. Aquí hay un ejemplo completo de cómo configurar dos tipos de subrayado:
Ejemplo de subrayado de enlace personalizadoEl código fuente de la página web es el siguiente:
Nota: diagonal.gif y flower.gif se han copiado en el mismo directorio donde se encuentra la página web.
<html>
<cabeza>
<título>ex</título>
<tipo de estilo=texto/css>
a#ejemplo1a {
decoración de texto: ninguna;
fondo: url(diagonal.gif) repetir-x 100% 100%;
espacio en blanco: nowrap;
relleno inferior: 2px;
}
a#ejemplo1b {
decoración de texto: ninguna;
espacio en blanco: nowrap;
relleno inferior: 2px;
}
a#ejemplo1b:desplazar el cursor {
fondo: url(diagonal.gif) repetir-x 100% 100%;
}
a#ejemplo2a {
decoración de texto: ninguna;
fondo: url(flor.gif) repetir-x 100% 100%;
espacio en blanco: nowrap;
fondo de relleno: 10px;
}
a#ejemplo2b {
decoración de texto: ninguna;
espacio en blanco: nowrap;
fondo de relleno: 10px;
}
a#ejemplo2b:desplazar el cursor {
fondo: url(flor.gif) repetir-x 100% 100%;
}
-->
</estilo>
</cabeza>
<cuerpo>
<p>Ejemplo:</p>
<p> <a href=# id=example1a>subrayado estático ondulado</a>,
<a href=# id=example1b>La línea ondulada que aparece cuando pasa el mouse</a>. </p>
<p> <a href=# id=example2a>Subrayado estático de flor</a>,
<a href=# id=example2b>El subrayado de flor que aparece cuando se pasa el mouse</a>. </p>
</cuerpo>
</html>