Cómo hacer subrayado en CSS. ¿Cómo agregar subrayado al título? Nuevas propiedades de decoración de texto
Saludos a todos los que tienen sed de nuevos conocimientos y leen mi blog. Publicación hoy quiero dedicar bastante tema ligero, que, sin embargo, plantea periódicamente una serie de preguntas a los principiantes: "Cómo eliminar o añadir un guión bajo en HTML".
Como ya sabe, el guión bajo se puede configurar manualmente, pero para los enlaces se configura de forma predeterminada. Es por eso que en este artículo le recordaré cómo configurar el subrayado en los títulos, le diré cómo configurar la línea inferior en todo el ancho del bloque y también cómo lidiar con formato estándar Enlaces. Bueno, ¡comencemos!
¡Enfaticemos esto!
Hay un especial etiqueta emparejada para subrayar texto: palabra.
Sin embargo, los maquetadores profesionales utilizan mecanismos de estilo. mesas en cascada, es decir. CSS para diseñar apariencia Total . Y es correcto. Este enfoque separa el marcado del estilo y hace que el formato sea flexible y conveniente. Además, es más fácil detectar errores en el código.
Las siguientes propiedades se utilizan principalmente para enfatizar el contenido del texto: borde Y decoracion-de-texto.
Elemento borde es responsable de establecer un marco alrededor del bloque especificado y también le permite establecer el grosor de la línea y su estilo.
Esta unidad de lenguaje es bastante flexible, ya que puede especificar el formato para partes individuales fronteras. Esto se logra usando propiedades:
- borde-bien(a la derecha)
- borde-arriba(arriba)
- borde-izquierda(izquierda)
- borde-abajo(abajo)
- punto ( punteado)
- punteado ( discontinuo)
- lineal ( sólido)
- doble ( doble)
- estructura volumétrica de bloques ( ranura,recuadrocresta ycomienzo)
No olvides que siempre puedes repetir la configuración de estilo del bloque principal usando palabra clave heredar.
Ahora hablemos de la propiedad. lenguaje css decoracion-de-texto. Éste ítem es responsable de decoraciones adicionales texto.
Éstas incluyen:
- parpadeando ( parpadear)
- línea encima del texto ( sobrelínea)
- objetos tachados ( línea directa)
- herencia de estilo ( heredar)
- cancelación de todas las decoraciones adicionales ( ninguno)
- el subrayado que necesitamos ( subrayar)
es hora de practicar
Ahora quiero que consolides los conocimientos adquiridos y pruebes prácticamente el ejemplo que te di. código de programa. Para aquellos familiarizados con este tema, esto también será útil. Como todos sabemos: “¡La repetición es la madre del aprendizaje!”
Este código implementa una estilización modificada de los enlaces y también establece el subrayado del título en todo el ancho del bloque.
Titulemos el texto con un título subrayado.
Con esto finalizo esta publicación educativa. Cubre todo herramientas necesarias para enfatizar 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 mis suscriptores, porque todavía hay muchos interesantes y temas útiles y también comparte el enlace del blog con tus amigos. ¡Adiós!
Saludos cordiales, Roman Chueshov
Mediante el uso texto HTML se puede dar bonito diseño. El elemento subrayado es muy popular, pero no todos. usuarios habituales Sé como usarlo.
Subrayado en HTML
Entonces, ¿cómo se subraya? en html está formateado usando una etiqueta . Se utiliza en todas las especificaciones html y xhtml, pero solo bajo la condición de transición.
Etiqueta cierre, debe ir acompañado. Debes agregarlo al marcado de esta manera:
Titular número uno
Nuestro texto en un párrafo
La palabra "texto" estará subrayada.
También puedes enfatizar carta separada en una palabra:
Título número dos
los nuestros A st en el párrafo
Tradicionalmente en marcado html Los enlaces subrayados se muestran cuando se pasa el mouse o incluso cuando está estacionario, y esto sucede de forma predeterminada en todos los navegadores. Por lo tanto, pon la etiqueta. en base permanente Altamente no recomendado.
Además, escribir estilos en CSS hace que el código sea más compacto, lo que significa que la página se cargará más rápido.
La mayoría de las veces, los diseñadores de diseño aplican estilos agregando bordes o subrayando a HTML o colocándolos en un archivo CSS separado.
Subrayado en CSS
Decorar texto cuando ayuda css- conveniente y manera practica. lo mas maneras simples dicha selección: use decoración de texto o borde inferior.
Para resaltar texto con decoración de texto, la propiedad debe agregarse a la clase deseada.
- clase deseada (
- decoración de texto: subrayado;
Cabe recordar que los nombres de las clases siempre se escriben en latín.
La decoración también se puede realizar mediante cenefas. Los bordes le permiten hacer un subrayado regular (sólido) y uno de puntos. Para ello se registran propiedades necesarias bordes, pero se elimina la propiedad de decoración del texto.
- clase deseada (
- decoración de texto: ninguna;
Luego, el texto se decora utilizando la siguiente propiedad:
- .clase deseada (
- decoración de texto: ninguna;
- borde inferior: 2px discontinuo negro;
Así queda la decoración: para que quede sólida, en lugar de “discontinua”, se utiliza “sólida”. Para aquellos a quienes les gusta decorar el texto con subrayado de puntos, pueden intentar usar "punteado".
Los estilos de marco se escriben en una línea. Además del tipo de subrayado, también debe especificar el grosor y el color del subrayado. Puedes experimentar con el tamaño, pero normalmente 1 o 2 píxeles son suficientes. El color del texto también se puede establecer en el color de subrayado:
- clase deseada (
- decoración de texto: ninguna;
- borde inferior: 1 px con puntos azules;
- color azul;
Funcionará de esa manera texto azul con diseño azul. Para adjuntar un estilo a html, debe agregar una clase al marcado.
Tercer título
Nuestro texto en un párrafo.
Eso es todo, estos son los conceptos básicos del subrayado en html.
Probablemente haya notado el subrayado animado de los enlaces en muchos recursos y haya querido saber cómo implementarlo en su sitio web. Para hacer algo hermoso subrayado css elementos que no necesitamos grandes conocimientos, ni conexión guiones adicionales, todo lo que necesitamos es HTML estándar y CSS.
Variaciones de subrayado
Subrayando enlaces o cualquier otro elemento, puedes pensar en lo que quieras. El subrayado puede flotar desde abajo, moverse hacia la izquierda o hacia la derecha, etc. veremos más ejemplo interesante, en el que el subrayado se extenderá desde el centro hacia los bordes, como en la demostración siguiente.
demostración de subrayado
HTML
Primero, creemos algún elemento, por ejemplo, tomemos la etiqueta A. Su atributo no es importante para nosotros, porque La mayoría de El trabajo estará dedicado a los estilos.
CSS
La implementación constará de dos líneas que se extenderán desde la mitad de la parte inferior del elemento hasta sus bordes.
La propiedad text-decoration es responsable del subrayado, pero no tiene sentido usarla aquí, porque implementar nuestros planes de animación en este caso no es del todo relevante. No olvidemos que a cada elemento se le puede asignar un pseudoelemento::before o::after . Por lo tanto, les estableceremos todas las propiedades e inmediatamente estableceremos los siguientes parámetros para nuestro enlace:
A(pantalla: bloque en línea; posición: relativa; decoración de texto: ninguna;)
Por lo tanto, configuramos la racionalización y el posicionamiento de bloques en relación con lugar original. Todo esto se hace para que el subrayado no se extienda más allá del elemento cuando asignamos el pseudoelemento ::before posicionamiento absoluto. Después de esto, debemos establecer su ubicación y tamaño claros. Y aquí creamos inmediatamente la primera mitad del guión bajo.
A::antes( pantalla: bloque; posición: absoluta; contenido: ""; altura: 2px; ancho: 0; color de fondo: rojo; transición: ancho .5s fácil de entrar y salir, izquierda .5s fácil de entrar fuera; izquierda: 50%; abajo: 0;
Aquellos. la altura del subrayado será 2px, longitud 0, rojo y es responsable de la animación. propiedad de transición. Y, por supuesto, la sangría izquierda es del 50%, es decir. punto central. Realizamos casi las mismas acciones con el pseudoelemento ::after:
A::después( pantalla: bloque; posición: absoluta; contenido: ""; altura: 2px; ancho: 0; color de fondo: rojo; transición: ancho .5s de entrada y salida fácil; izquierda: 50%; abajo: 0; )
A:hover::antes( ancho: 50%; izquierda: 0; ) a:hover::después( ancho: 50%; )
Vale la pena señalar que esta es sólo una forma de implementar esta idea. Puedes hacer lo mismo usando solo un pseudoelemento::before . Suscríbase a materiales y sugiera temas para artículos.
