La tecnología de hoja de estilo tiene dos funcionesal hacer páginas HTML. En primer lugar, con su ayuda, se forma la posición de los elementos individuales del sitio. En segundo lugar, hace que los bloques sean visualmente atractivos para el usuario. La segunda función se implementa de varias maneras. Uno de ellos es subrayado. CSS proporciona un atributo para esto. texto-decoración.
Especificación de registro de atributo
Aprovecha la propiedad texto-decoración sólo. Es suficiente escribir la siguiente línea para el elemento en el código de la hoja de estilo:
texto-decoración: valor_atributo;
En vez de "valor de atributoLa especificación CSS ofrece una serie de opciones:
- subrayar - la línea se encuentra estrictamente debajo del texto;
- overline - la línea corre sobre el texto;
- ninguna - eliminación de todos los efectos decorativos;
- heredar - toma el valor del elemento padre.
No todas las formas posibles de escritura se dan arriba, ya que este atributo define no solo el subrayado CSS, sino también otros efectos, por ejemplo, "parpadeo" del texto o su tachado.
Ejemplos de diseño de hipervínculos
Principiantes en diseño web y programaciónsurge la pregunta: ¿por qué hacer la línea de fondo del texto? En los albores de la era de las tecnologías de Internet, este método de resaltado indicaba al usuario que había un hipervínculo frente a él, un texto que, al hacer clic, cambiará a una nueva página.
Por defecto, los hipervínculos tienen la propiedad subrayar. En la práctica, la tarea surge de eliminar la línea de los elementos inactivos y hacerla visible cuando el usuario pasa el puntero del mouse. Aquí hay un ejemplo de código que deshabilita el subrayado de enlaces CSS:
a {text-decoration: none;}
Para los enlaces activos, se usa la siguiente entrada:
a: hover {text-decoration: underline;}
Subrayado decorativo para avanzado
Atributo estándar texto-decoración tiene varias limitaciones:
- el color de la línea no difiere del color del texto del enlace, no se puede distinguir entre su "color";
- solo se utiliza una línea continua como subrayado. CSS no implica el uso de otros estilos de dibujo.
Pero las técnicas especiales ayudan a sortear el diseño clásico del texto. En el primer caso, una etiqueta adicional <lapso>.
Por ejemplo:
<a href="#" style="text-decoration: underline; color: red">
hipervínculos
a>. n>
Como resultado, la palabra del hipervínculo se escribirá en azul en la página y el color de la línea será rojo.
Otra forma avanzada que le permite implementar el subrayado CSS, - borde inferior... El siguiente ejemplo explica su uso:
un {border-bottom: 1px rojo sólido;}
El resultado será el mismo que en el ejemplo anterior. Pero este método tiene una ventaja importante. Además de cambiar el color de la línea (ahora en rojo, rojo), es posible transformar la forma en que se dibuja:
- punteado - hace un subrayado punteado;
- desvanecido - la línea consta de trazos;
- doble - dibuja una línea doble.
Entonces el atributo frontera-fondo más funcional. Además de mostrar una línea decorativa debajo del texto, permite personalizar su apariencia.
