Cómo hacer que el subrayado de enlaces sea fino y bonito. Hermosos elementos css subrayados Etiquetas HTML subrayadas

Subrayado para elementos de bloque como etiqueta

se puede hacer de dos maneras. Por ejemplo, establezca la línea debajo del texto en todo el ancho del bloque, independientemente de la cantidad de texto. Y también subrayando para hacer solo en el texto. Veamos ambas opciones a continuación.

Línea debajo del texto para todo el ancho del bloque

Para crear una línea debajo del texto, agregue la propiedad de estilo de borde inferior al elemento, su valor es el ancho de la línea, el estilo y el color al mismo tiempo (ejemplo 1).

Ejemplo 1: línea de ancho completo

HTML5 CSS 2.1 IE Cr Op Sa Fx

Texto de ejemplo

La distancia desde la línea hasta el texto se puede ajustar con la propiedad padding-bottom añadiéndola al selector H1. El resultado de este ejemplo se muestra en la Fig. una.

Subrayado de texto

Para subrayar solo el texto, debe usar la propiedad text-decoration con un valor de subrayado, agregándolo nuevamente al selector H1 (ejemplo 2).

Ejemplo 2: ancho de línea a texto

HTML5 CSS 2.1 IE Cr Op Sa Fx

Texto de ejemplo

El titular negro llama la atención a pesar de ser negro en lugar de blanco.

El resultado de este ejemplo se muestra en la Fig. 2.

En el caso de usar la propiedad de decoración de texto, la línea está conectada al texto, por lo que no se puede determinar su posición y estilo.

Saludos a todos los que tienen hambre de nuevos conocimientos y leen mi blog. Quiero dedicar la publicación de hoy a un tema muy sencillo, que, sin embargo, genera regularmente una serie de preguntas de los principiantes: "Cómo eliminar o agregar un guión bajo en html".

Como ya sabe, el guión bajo en sí se puede configurar manualmente, pero los enlaces los tienen configurados de forma predeterminada. Es por eso que en este artículo le recordaré cómo subrayar los encabezados, cómo establecer la línea inferior en todo el ancho del bloque y también cómo lidiar con el formato de enlace estándar. Bueno, ¡comencemos!

¡Resaltemos esto!

Hay una etiqueta de par especial para subrayar texto: palabra.

Sin embargo, los diseñadores de maquetación profesionales utilizan los mecanismos de las tablas en cascada de estilos, es decir, css para diseñar el aspecto de todo el archivo . Y es correcto. Este enfoque separa el marcado del estilo, lo que hace que el formato sea flexible y conveniente. Además, es más fácil detectar errores (bugs) en el código.

Las siguientes propiedades se utilizan principalmente para subrayar el contenido del texto: frontera y decoración de texto.

Elemento frontera es responsable de establecer un marco alrededor del bloque especificado y también le permite establecer el grosor y el estilo de la línea.

Esta unidad de idioma es bastante flexible, ya que puede especificar el formato para lados individuales del borde. Esto se logra usando propiedades:

1. frontera-derecho(a la derecha)
2. frontera-cima(sobre)
3. frontera-izquierda(izquierda)
4. frontera-fondo(fondo)

También con la ayuda frontera puedes configurar:

• punto ( punteado)
• punteado ( punteado)
• lineal ( sólido)
• doble ( doble)
• bloques de encuadre volumétricos ( ranura,recuadro,cresta yprincipio)

No olvide que siempre puede repetir la configuración de estilo del bloque principal usando la palabra clave heredar.

Ahora analicemos la propiedad del lenguaje css decoración de texto. Este elemento es responsable de la decoración adicional del texto.

Éstas incluyen:

1. intermitente ( parpadear)
2. línea encima del texto ( superposición)
3. objetos tachados ( línea a través)
4. herencia de estilo ( heredar)
5. cancelar todas las decoraciones adicionales ( ninguna)
6. el subrayado que necesitamos ( subrayar)

es hora de practicar

Ahora quiero que consolides los conocimientos adquiridos y pruebes prácticamente el código de ejemplo que te he dado. Para aquellos que están familiarizados con este tema, también será útil. Como todos sabemos: "¡La repetición es la madre del aprendizaje!".

Este código implementa un estilo modificado de enlaces y también establece el subrayado del título en todo el ancho del bloque.

Título del texto con un título subrayado

En esta nota, doy por finalizado el post del tutorial. Cubre todas las herramientas necesarias para subrayar el contenido del texto, sabiendo que puede crear sus propias opciones de diseño para las páginas del sitio web.

No olvides unirte a las filas de mis suscriptores, porque aún quedan muchos temas interesantes y útiles por delante, y también comparte el enlace del blog con tus amigos. ¡Adiós!

Atentamente, Roman Chueshov

Descripción

Añade decoración de texto en forma de subrayado, tachado, líneas encima del texto y parpadeo. Se puede aplicar más de un estilo al mismo tiempo listando valores separados por espacios.

Sintaxis

decoración de texto: [parpadeo || línea directa || superposición || subrayado] | ninguno | heredar

Valores

parpadear Establece el texto parpadeante. Dicho texto periódicamente, aproximadamente una vez por segundo, desaparece y luego reaparece en el mismo lugar. Actualmente, este valor no es compatible con los navegadores y está obsoleto en CSS3; en su lugar, se recomienda la animación. line-through Crea texto tachado (ejemplo ). overline La línea pasa sobre el texto (ejemplo ). subrayar Establece el texto subrayado (ejemplo ). none Cancela todos los efectos, incluido el subrayado en los enlaces, que está configurado de forma predeterminada. heredar El valor se hereda del padre.

HTML5 CSS2.1 IE Cr Op Sa Fx

ataque estratégico

modelo de objeto

documento.getElementById("elementID").style.textDecoration

document.getElementById("elementID").style.textDecorationBlink

document.getElementById("elementID").style.textDecorationLineThrough

document.getElementById("elementID").style.textDecorationNone

documento.getElementById("elementID").style.textDecorationOverLine

document.getElementById("elementID").style.textDecorationUnderline

navegadores

Internet Explorer hasta la versión 7.0 no admite el valor heredado. La línea obtenida con el valor line-through es mayor en IE7 que en otros navegadores; IE8 ha corregido este error.

Presento fragmentos cortos de código (fragmento) CSS, para la implementación de resaltado de anclajes de enlaces con subrayado suave al pasar el mouse.
¿Por qué es necesario resaltar el texto del desorden general? Esto es obvio. Existe una gran variedad de formas y tipos de diseño de enlaces, todo está limitado solo por la imaginación del maestro.
Con la ayuda de la pseudoclase :hover y la magia, puede pasar el cursor sobre enlaces azulados de apariencia opaca con casi cualquier efecto.
Las soluciones que se discutirán hoy no son nada particularmente sorprendente o inusual. Todo es simple, sin campanas ni silbatos, solo resaltando el enlace con la animación de color y luz del subrayado.

Escribiré en detalle solo el código CSS, ya que no hay necesidad de cambiar y agregar nada en el lado Html.

CSS

Primero, usando la propiedad line-height: establezca el espacio entre líneas dependiendo de la línea de base de la fuente, su valor puede ser diferente. Hagamos que el enlace sea un bloque en línea, incrustado en la estructura del texto, configurando su propiedad de visualización en bloque en línea. Deshazte del subrayado estándar escribiendo text-decoration:none; y rellene el enlace con el color que necesitamos.

a (altura de línea: 1; pantalla: bloque en línea; color: #ffeb3b; decoración de texto: ninguno; cursor: puntero;)

a ( altura de línea: 1; pantalla: bloque en línea; color: # ffeb3b; decoración de texto: ninguna; cursor: puntero; )

Luego usamos el pseudo-elemento :after para poder agregar un elemento extra, en nuestro caso una línea, y definir un efecto de transición simple en la propiedad Transition:. Establezca inicialmente el ancho de línea en ancho cero: 0%; , definimos la altura en 2 píxeles. El color de la línea puede ser cualquiera, en el ejemplo no fantaseé demasiado y configuré el color del texto del enlace de acuerdo.

a: después (pantalla: bloque; contenido: ""; altura: 2px; ancho: 0 %; color de fondo: #ffeb3b; transición: ancho. 3 s de entrada y salida lentas; )

a:después (pantalla: bloque; contenido: ""; altura: 2px; ancho: 0%; color de fondo: #ffeb3b; transición: ancho .3s facilidad de entrada; )

Lo único que queda es agregar algo de movimiento a nuestro enlace. Para hacer esto, usamos un par de pseudoclases: hover y: focus . El primero determinará el estilo del enlace al pasar el mouse por encima, el segundo funcionará cuando el cursor esté "apretado" sobre el enlace. Aquí cambiaremos el valor del ancho, configúralo al 100%.
Ahora, al pasar el cursor por encima o enfocarse en el enlace, el subrayado estilizado se mostrará a la mirada del usuario, suavemente con un retraso apenas perceptible, cuyo tiempo, determinamos prudentemente antes en la transición: propiedad.

a: pasar el mouse: después, a: enfocar: después (ancho: 100%;)

a: pasar el mouse: después, a: enfocar: después ( ancho: 100%; )

Como resultado, obtenemos la siguiente imagen:

Todo el ensamblaje del código se verá así:

a (pantalla: bloque en línea; color: #ffeb3b; altura de línea: 1; decoración de texto: ninguno; cursor: puntero;) a: después (color de fondo: #ffeb3b; pantalla: bloque; contenido: ""; alto: 2px; ancho: 0%; -webkit-transition: ancho .3s facilidad de entrada y salida; -moz--transition: ancho .3s facilidad de entrada y salida; transición: ancho .3s facilidad de entrada y salida;) a: pasar el mouse: después, a: enfocar: después (ancho: 100%;)

a ( pantalla: bloque en línea; color: # ffeb3b; altura de línea: 1; decoración de texto: ninguna; cursor: puntero; ) a: después ( color de fondo: # ffeb3b; pantalla: bloque; contenido: ""; alto: 2px; ancho: 0%; -webkit-transition: ancho .3s facilidad de entrada y salida; -moz--transition: ancho .3s facilidad de entrada y salida; transición: ancho .3s facilidad de entrada y salida; ) a: pasar el mouse: después, a: enfocar: después ( ancho: 100%; )

Por supuesto, esta es solo una de las opciones más simples y modestas para el diseño de enlaces. Experimente más, agregue colores, use animación, muévase a la derecha oa la izquierda, haga enlaces como flippers, etc., etc., lo principal es no exagerar, todo debe ser con sentimiento, sentido y disposición.

Actualización y adiciones del 22/10/2017

Hubo preguntas en los comentarios sobre cómo hacer un subrayado desde el centro del texto del enlace, con un estiramiento suave hacia los lados. Si hay demanda, entonces habrá oferta.

Todo es bastante simple, solo necesita agregar un par de propiedades nuevas, es decir, para que el elemento principal a determine el posicionamiento de la posición relativa: relativo; , y para el pseudo-elemento a:after, position:absolute; con una distancia desde el borde izquierdo del elemento padre left:50%; , además de usar la propiedad transform para determinar el desplazamiento horizontal del elemento por el valor especificado transform:translateX(-50%) .

Como resultado, obtenemos el siguiente resultado:

En la colección, todo el código css, para subrayar suavemente el enlace desde el centro, debería verse así:

a (pantalla: bloque en línea; color: #ffeb3b; altura de línea: 1; decoración de texto: ninguna; cursor: puntero; posición: relativa;) a: después (color de fondo: #ffeb3b; pantalla: bloque; contenido : "" ; alto : 2px ; ancho : 0 % ; izquierda : 50 % ; posición : absoluta ; -webkit-transition: ancho .3s facilidad de entrada y salida; -moz--transition : ancho .3s facilidad de entrada y salida ; transición : ancho .3s entrada fácil ; -webkit-transform: translateX(-50% ) ; -moz-transform: translateX(-50% ) ; transform : translateX(-50% ) ; ) a: hover : después, a: foco: después (ancho: 100%;)

a ( pantalla: bloque en línea; color: # ffeb3b; altura de línea: 1; decoración de texto: ninguno; cursor: puntero; posición: relativa; ) a: después ( color de fondo: # ffeb3b; pantalla: bloque; contenido : ""; alto: 2px; ancho: 0%; izquierda: 50%; posición: absoluta; -webkit-transition: ancho .3s facilidad de entrada y salida; -moz--transition: ancho .3s facilidad de entrada y salida ; transición: ancho .3s facilidad de entrada y salida; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); ) a:hover: después, a:foco:después ( ancho: 100%; )

Hoy en día, dado que todos los navegadores modernos admiten cada vez con más confianza las propiedades del clip CSS3, prácticamente no hay restricciones para el diseño original de los enlaces, en general, todo depende de sus fantasías, y hay muchas soluciones listas para usar. en internet, si lo desea encontrado, como dicen, para todos los gustos y colores.

Con todo respeto Andrés

La maquetación de cualquier texto informativo implica la inclusión de hipervínculos semánticos o anclas. Estos elementos se agregan usando la etiqueta "a" (anclaje). Los navegadores modernos muestran un elemento similar de forma predeterminada con los diseñadores de diseño o los diseñadores web que a menudo eligen cambiar este estilo o eliminarlo por completo.

En algunos casos esto es realmente necesario. Por ejemplo, en un bloque de referencia denso, donde el diseño adicional solo sobrecargará la percepción y dificultará la lectura del documento. Sin embargo, en algunos casos es recomendable mantener la distinción entre texto y enlaces. Si el diseño del sitio excluye por completo dicho formato, entonces vale la pena usar cualquier otro tipo de selección de dichos elementos. El tipo de demarcación más común hoy en día es el contraste de color del texto de anclaje. es eficiente La única pequeña desventaja de esta opción será el problema de resaltar el texto por parte de personas que no pueden percibir diferentes colores (daltonismo). Pero este es un porcentaje tan bajo de usuarios que puede pasarse por alto.

Sin embargo, si se decidió eliminar el subrayado de los enlaces, aquí se necesitará cierto conocimiento de la estructura de la formación de la página web, es decir, CSS.

Quitar enlace subrayado de todo el sitio

Para una persona versada en diseño web y en particular en CSS, eliminar el subrayado de los enlaces no será difícil. Para hacer esto, solo necesita buscar y abrir el archivo responsable del estilo en los archivos del sitio. Por lo general, se encuentra en el directorio raíz y tiene una extensión .css. Puede eliminar el subrayado de los enlaces usando un código simple:

texto-decoración: ninguno;

Esta pequeña línea eliminará por completo el subrayado de todos los elementos escritos con la etiqueta "a" en todo el sitio.

Pero, ¿qué sucede si no tiene acceso al archivo CSS?

En este caso, es recomendable utilizar la etiqueta Estilo al principio del documento. Funciona como un archivo CSS. Para aplicar estilos, es necesario agregar una construcción al principio del documento (o página HTML), en la que se aplican las reglas de estilo CSS habituales.

Estos estilos se aplican solo a una página específica. No funcionarán en otras secciones o documentos del sitio.

Eliminar enlace subrayado al pasar el mouse

Pero, ¿qué sucede si desea eliminar el subrayado en los enlaces flotantes? CSS también puede ayudarnos en este caso. El código se verá así:

texto-decoración: ninguno;

Es la pseudoclase “:hover” la responsable de decorar los elementos al pasar el mouse por encima.

Al combinar estas dos opciones, podemos hacer que el subrayado del enlace solo se muestre al pasar el mouse, de lo contrario, todo se verá como texto sin formato:

texto-decoración: ninguno;

decoración de texto: subrayado;

Aplicar identificadores y clases

Como puede ver en lo anterior, es bastante fácil cambiar el estilo de un elemento en un sitio web o documento html. Las desventajas de tales opciones son la imposibilidad de aplicar estilos de forma selectiva: no a todo el sitio o documento, sino a un enlace específico.

Hay varias soluciones a este problema.

Puede eliminar el subrayado de los enlaces en línea. Aunque categóricamente no se recomienda hacer esto en términos de optimización del sitio.

Para hacer esto, debe especificar el parámetro Estilo directamente en la etiqueta del enlace:

La segunda opción es más aceptable.

Introducimos una clase o id adicional en el elemento y ya asignamos los estilos que necesitamos a estos selectores:

La clase se escribe con un punto antes de su nombre:

Ninguno_decoración(

texto-decoración: ninguno;

El identificador se indica con el signo #:

#ninguna_decoración(

texto-decoración: ninguno;

Esta regla se aplica tanto al archivo CSS como a la etiqueta Style.

Cambiar el estilo de visualización de los enlaces en el texto

Además de la posibilidad, te permite aplicar otros tipos de estilismo. A menudo, los diseñadores web o los diseñadores de diseño usan un cambio en su color en relación con el texto principal para resaltar el texto del enlace.

Hacer esto también es bastante simple:

color :*especifique el color deseado en cualquier formato (*rojo, #c2c2c2, rgb (132, 33, 65)*)*;

Se aplica un estilo similar de acuerdo con las mismas reglas que se describen para eliminar el subrayado del enlace. Las reglas CSS en este caso son idénticas. Cambiar el color del enlace y eliminar el subrayado se puede aplicar como un estilo separado (entonces el enlace permanecerá subrayado pero cambiará del azul predeterminado al que desee).

Sustitución del estilo predeterminado

Una última observación. En lugar de restar énfasis a los enlaces, CSS le brinda la posibilidad de anular los valores de estilo predeterminados. Para hacer esto, simplemente sustituya los siguientes valores en la construcción de decoración de texto:

texto-decoración-estilo:

• Si necesita una línea sólida, especifique el valor sólido.
• Para una línea ondulada, ondulada.
• La línea doble - en consecuencia doble.
• La línea se puede reemplazar por una secuencia de puntos: punteada.
• Subraya la palabra como una línea punteada - discontinua

Y también puede cambiar la posición de la línea en relación con el texto:

La construcción line-text-decoration-line puede tomar los siguientes valores:

Y el color (¡no confundir con el color del texto!):

text-decoration-line: (cualquier color en cualquier formato * rojo, #c2c2c2, rgb(132, 33, 65)*).

Por conveniencia, las tres posiciones se pueden escribir juntas en la construcción:

decoración de texto: rojo, línea a través, ondulado.