Fuente subrayada CSS. Texto subrayado en CSS

Descripción

Agrega decoración de texto en forma de subrayado, tachado, línea sobre el texto y parpadeo. Se puede aplicar más de un estilo al mismo tiempo enumerando los valores separados por espacios.

Sintaxis

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

Los valores

parpadear Establece el texto parpadeante. Este texto desaparece periódicamente, aproximadamente una vez por segundo, y luego reaparece en el mismo lugar. Este valor está desaprobado actualmente por los navegadores y está desaprobado en CSS3; en su lugar, se recomienda la animación. line-through Crea texto tachado (ejemplo). overline La línea pasa por encima del texto (ejemplo). subrayado Establece el texto subrayado (ejemplo). ninguno Cancela todos los efectos, incluido el subrayado predeterminado para los enlaces. heredar El valor se hereda del padre.

HTML5 CSS2.1 IE Cr Op Sa Fx

Ataque estratégico

Modelo de objeto

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

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

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

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

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

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

Navegadores

Internet Explorer hasta 7.0 inclusive no admite el valor heredado. La línea obtenida utilizando el valor de línea directa es más alta en IE7 que en otros navegadores; IE8 ha solucionado este error.

Tarea

Solución

El subrayado con puntos en los enlaces se ha convertido recientemente en el estándar para el diseño de enlaces, al hacer clic en el que no abre el enlace, pero realiza alguna acción en el documento actual. El uso activo de la tecnología AJAX, cuando se actualiza la página sin recargarla, ha dado lugar a un nuevo tipo de enlaces que se diferencian de los enlaces normales con una línea de puntos.

Para crear la línea, use la propiedad border-bottom con un valor punteado y agréguelo al selector A. Para evitar que se aplique el subrayado a todos los enlaces, debe especificar una clase única, llamémosla, por ejemplo, punto. También debe eliminar el subrayado original de los enlaces utilizando la propiedad text-decoration establecida en none (ejemplo 1).

Ejemplo 1. Subrayado punteado

HTML5 CSS 2.1 IE Cr Op Sa Fx

El resultado del ejemplo se muestra en la Fig. 1.

El ancho de línea y el color de subrayado de los enlaces también se establecen mediante la propiedad border-bottom.

La maquetación de cualquier texto informativo implica la inclusión de hipervínculos semánticos o anclas. Estos elementos se agregan mediante la etiqueta "a" (ancla). Los navegadores modernos muestran dicho elemento de forma predeterminada. A menudo, los diseñadores de diseño o los diseñadores web prefieren cambiar este estilo o eliminarlo por completo.

En algunos casos, esto es realmente necesario. Por ejemplo, en un bloque de enlaces denso, donde un diseño innecesario solo sobrecargará la percepción y dificultará la lectura del documento. Sin embargo, en algunos casos es aconsejable mantener la distinción entre texto y enlaces. Si el diseño del sitio excluye completamente dicho formato, entonces se debe aplicar cualquier otro tipo de resaltado de dichos elementos. El tipo de diferenciación más común hoy en día es el contraste de color de las anclas en el texto. Es efectivo. El único pequeño inconveniente de esta opción será el problema de la selección de 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, se necesitará algún conocimiento de la estructura de la formación de la página de Internet, a saber, CSS.

Eliminar el subrayado de los enlaces en todo el sitio

Para alguien que esté bien versado 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 la extensión .css. Puede eliminar el subrayado de los enlaces utilizando un código simple:

decoración de texto: ninguna;

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

Pero, ¿y si no tiene acceso al archivo CSS?

En este caso, es recomendable utilizar la etiqueta Estilo al principio del documento. Funciona igual que un archivo CSS. Para aplicar estilos, es necesario al principio del documento (o Páginas HTML) agregan una estructura en la que se aplican las reglas de estilo CSS habituales.

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

Eliminar los enlaces subrayados al pasar el mouse

Pero, ¿qué sucede si necesita eliminar el subrayado de un enlace al pasar el mouse? CSS también puede ayudarnos en este caso. El código se verá así:

decoración de texto: ninguna;

Es la pseudoclase ": hover" la responsable de decorar los elementos al pasar el mouse.

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

decoración de texto: ninguna;

decoración de texto: subrayado;

Usando 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 selectivamente: 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 esto se desaconseja enfáticamente desde el punto de vista de la optimización del sitio.

Para hacer esto, necesita 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 asignamos los estilos que necesitamos a estos selectores:

La clase está escrita con un punto delante de su nombre:

Ninguno_ decoración (

decoración de texto: ninguna;

El identificador se indica con un signo #:

#none_ decoration (

decoración de texto: ninguna;

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

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 maquetación utilizan el cambio de color en relación con el texto principal para resaltar el texto de referencia.

Esto también es bastante sencillo de hacer:

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 descritas para cancelar el subrayado de un enlace. Las reglas de CSS son idénticas en este caso. Cambiar el color del enlace y cancelar el subrayado se puede aplicar como un estilo separado (luego el enlace permanecerá subrayado, pero cambiará el color del azul estándar al color deseado).

Reemplazo del estilo estándar

Un comentario más al final. En lugar de cancelar el subrayado Enlaces CSS hace posible reemplazar valores estándar autorización. Para hacer esto, basta con sustituir los siguientes valores en la construcción de decoración de texto:

estilo-decoración-de-texto:

• Si necesita una línea sólida, especifique el valor sólido.
• Para una línea ondulada, ondulada.
• Línea doble - respectivamente doble.
• La línea se puede reemplazar con una secuencia de puntos: punteada.
• Subrayar una palabra con una línea de puntos: discontinua

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

La construcción de línea-texto-decoración-línea puede tomar los siguientes valores:

Y 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 una construcción:

decoración de texto: rojo, lineal, ondulado.

o explorando etiquetas que dan formato a texto HTML

Su atención se presenta a una de las lecciones clave y más simples del tutorial.

• Texto HTML es el componente principal de la mayoría de las páginas de Internet.
• Por frases clave en el cuerpo de la página HTML los usuarios pueden encontrar su sitio.
• Texto HTML puede ser de cualquier tamaño y color a su discreción. También puede definir el tipo de fuente y su volumen.
• Tamaño HTML fuente generalmente se establece en píxeles.
• Formato HTML texto Se utilizan etiquetas de formato generalizadas.

Vea abajo etiquetas que dan formato al texto HTML:

• Etiquetas → negrita Texto HTML(negrita).
• Etiquetas → negrita Texto HTML(negrita).
• Etiquetas → monoespaciado Texto HTML(fuente monoespaciada).
• Etiquetas → monoespaciado Texto HTML(fuente monoespaciada).
• Etiquetas → monoespaciado Texto HTML(fuente monoespaciada).
• Etiquetas → Texto HTML, el tamaño es más grande de lo habitual (letra grande).
• Etiquetas → Texto HTML, el tamaño es más pequeño de lo habitual (letra pequeña).
• Etiquetas → oblicuo Texto HTML(fuente en cursiva).
• Etiquetas → oblicuo Texto HTML(fuente en cursiva).
• Etiquetas → oblicuo Texto HTML(fuente en cursiva).
• Etiquetas → subrayado Texto HTML(fuente subrayada).
• Etiquetas → tachado Texto HTML(fuente tachada).
• Etiquetas → Texto HTML(fuente) en subíndice.
• Etiquetas → Texto HTML(fuente) superíndice.

Formato de texto HTML: tachado, texto subrayado

Resultado: ... fuente monoespaciada

Resultado: ... tamaño de fuente mayor de lo normal

Resultado: ... fuente cursiva

Resultado: texto tachado (fuente tachada)

Resultado: superíndice

C El formato proporcionado anteriormente solo debe aplicarse a pequeñas secciones de texto. Usar CSS si desea establecer una fuente específica para toda la página o para varias líneas, por ejemplo.

Con la ayuda de html, el texto puede tener un hermoso diseño. El elemento subrayado es muy popular, pero no todos los usuarios habituales saben cómo utilizarlo.

Subrayado en HTML

Entonces, ¿cómo se hace un subrayado? en html se formatea usando la etiqueta ... Se usa en todas las especificaciones html y xhtml, pero solo bajo la condición de un transitorio ya que se debe especificar la versión del navegador del marcado. En este caso, el documento pasa con éxito la validación. El elemento debe especificarse de forma estándar, es decir, en la parte superior de la página.

Etiqueta cierre, debe ir acompañado de... Debe agregarse al marcado de esta manera:

1. Titular número uno

Nuestro texto en el párrafo

La palabra "texto" estará subrayada.

También puede subrayar una sola letra en una palabra:

1. Título número dos

Nuestros esos Para artículo en párrafo

Tradicionalmente en marcado html Los enlaces subrayados se muestran cuando se desplaza con el mouse o incluso cuando está parado, y este es el caso por defecto en todos los navegadores. Por lo tanto, pon la etiqueta de forma continua se desaconseja mucho.

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.

Muy a menudo, los diseñadores de diseño aplican estilos agregando bordes o subrayados en html, o moviéndolos a un archivo css separado.

Subrayado en CSS

Decorar texto con CSS es una forma cómoda y práctica. El mas formas simples tal punto culminante: usar text-decoration o border-bottom.

Para subrayar texto con decoración de texto, la propiedad debe agregarse a la clase deseada.

• clase deseada
• decoración de texto: subrayado;

Debe recordarse que los nombres de las clases siempre se escriben en latín.

La decoración también se puede hacer con bordes. Los bordes le permiten hacer un subrayado regular (sólido) y uno punteado. Para esto, se prescriben las propiedades de borde necesarias, pero se elimina la propiedad de decoración del texto.

• clase deseada
• decoración de texto: ninguna;

Luego, el texto se decora con la siguiente propiedad:

• .clase requerida (
• decoración de texto: ninguna;
• borde inferior: 2px negro punteado;

Así es como sale la decoración: para que sea sólida, en lugar de "discontinua" usa "sólida". Para aquellos a los que les gusta decorar el texto con subrayado con puntos, puede intentar usar "punteado".

Los estilos de fotograma se escriben en una línea. Además del tipo de subrayado, también debe especificar el grosor del subrayado y el color. Puede experimentar para determinar el tamaño, pero normalmente 1 o 2 píxeles son suficientes. El color del texto también se puede establecer en el color del subrayado:

• clase deseada
• decoración de texto: ninguna;
• borde inferior: 1 px punteado en azul;
• color azul;

Esto creará texto azul con tipografía 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.