¿Qué valores puede tomar la propiedad de alineación del texto? Propiedades CSS text-decoration, vertical-align, text-align, text-indent para decorar texto en Html

Hola queridos lectores del sitio del blog. En este artículo, continuamos explorando los conceptos básicos del estilo CSS y echamos un vistazo a las propiedades de alineación vertical, alineación de texto, sangría de texto y algunas otras para aplicar estilo al texto html.

Alinear texto con CSS

Comencemos con los atributos de estilo que controlan la representación del texto en elementos de bloque. Comencemos con la propiedad text-align, que en realidad es un reemplazo del atributo align (usado para alinear el contenido de elementos html como p párrafos).

Propiedad de estilo texto alineado pregunta alineación de texto horizontaly tiene solo cuatro valores posibles:

Los valores disponibles para esta regla determinan la alineación, respectivamente: izquierda - a la izquierda, derecha - a la derecha, centro - al centro y justificar - al ancho de la página (tanto a la izquierda como a la derecha aumentando la distancia entre palabras). Por ejemplo, el texto de este artículo se alinea con el ancho de la página (si nota que tiene bordes uniformes tanto a la izquierda como a la derecha) usando la regla text-align: justify.

De forma predeterminada, la alineación horizontal está alineada a la izquierda, por lo que no es necesario especificar específicamente text-align: left si no se ha especificado ninguna otra alineación en los elementos principales.

Ejemplos de uso de la propiedad:

Siguiente propiedad CSS ident de texto pregunta sangría para la línea roja, por ejemplo, para el texto de la etiqueta de párrafo p. Esta regla, como la alineación de texto, solo se aplica a los elementos del bloque. Sintaxis:

Aquí se permiten valores de sangría absolutos y relativos. Los valores absolutos (px - píxeles, em, ex, etc.) se pueden especificar con un signo más o menos. El valor relativo se suele dar como porcentaje (%). El valor relativo se calcula a partir del ancho del área de texto. Entonces, la regla css text-indent: 50% establecerá la línea roja igual a la mitad de la longitud de esta línea. De forma predeterminada, la sangría de la "línea roja" es cero. Ejemplo:

A continuación, veamos la alineación vertical: la propiedad alineación vertical... Esta propiedad ya es aplicable para todos los elementos html y para casi todos los medios la alineación de elementos en línea con el texto en relación con su línea de base. A excepción de las etiquetas de tabla td y th, en las que todo el contenido se alineará verticalmente. Sintaxis:

Consideremos cada valor con más detalle:

  • línea de base: alineación de un fragmento de texto con la línea de base del elemento principal. Este es el predeterminado;
  • sub - un fragmento de texto se muestra como un subíndice o subíndice para el elemento principal;
  • super - un fragmento de texto se muestra como superíndice o superíndice para el elemento principal;
  • top: alinea un fragmento de texto con la parte superior del elemento principal;
  • text-top: alinea el fragmento con el borde superior del texto del elemento principal;
  • medio: alinea el centro del fragmento de texto con el centro del elemento principal;
  • bottom: alinea un fragmento de texto con la parte inferior del elemento principal;
  • text-bottom: alineación del fragmento con el borde inferior del texto del elemento principal;

La siguiente figura muestra el comportamiento de los fragmentos de prueba con diferentes valores de la propiedad de alineación vertical en Internet Explorer 11:

Además de los valores anteriores, puede especificar valores numéricos. Por ejemplo, la regla CSS vertical-align: 0 significaría lo mismo que escribir vertical-align: baseline. Y la regla de alineación vertical: 10px moverá el texto hacia arriba 10 píxeles desde la línea de base. Para mover el texto hacia abajo, el valor debe especificarse con un signo menos.

El desplazamiento también se puede especificar en unidades relativas, como em y ex, o como un porcentaje.

Para alinear verticalmente el contenido de las celdas de la tabla en alineación vertical, use los siguientes valores:

  • top: para alinear el contenido con la parte superior de la celda;
  • parte inferior: para alinear el contenido con la parte inferior de la celda;
  • medio - para alinear con el centro de la celda (usado por defecto).

Para lograr el resultado deseado, generalmente debe experimentar con diferentes valores para la propiedad de estilo de alineación vertical. Numerosos valores posibles dan resultados demasiado diferentes en diferentes casos.

Opciones de espacio en blanco y ajuste de palabras para controlar los saltos de línea

El siguiente en la línea es el parámetro de espacio en blanco, que es responsable de mostrar los caracteres de espacio en blanco en la página html.

Como sabemos, de forma predeterminada, el navegador concatena todos los caracteres de espacios en blanco consecutivos: espacios, saltos de línea y tabulaciones, en un solo espacio. Una excepción etiqueta previa, el texto colocado en él se muestra tal cual, con todos los espacios.

La propiedad de espacio en blanco tiene la siguiente sintaxis:

Está claro que el valor normal se usa por defecto y deja todo como se describió anteriormente, todos los espacios consecutivos se combinan en uno y los saltos de línea se configuran automáticamente.

Usar el valor "pre" será lo mismo que usar la etiqueta "pre". El navegador representará la página, incluidos los espacios y guiones adicionales, según lo haya agregado el desarrollador. Si una línea de texto es demasiado larga, se agregará una barra de desplazamiento horizontal.

El valor de nowrap evita que el navegador ajuste las líneas y el texto se muestra en una línea. La única cosa, agregar la etiqueta "br" le permitirá ajustar el texto en una nueva línea.

El valor de ajuste previo conserva todas las secuencias de espacios y saltos de línea, pero si la línea no encaja en el área especificada, el navegador ajusta automáticamente el texto en una nueva línea.

Bueno, el valor de prelínea convierte los espacios en un espacio, los avances de línea se guardan y el navegador puede romper líneas que son demasiado largas para evitar el desplazamiento horizontal.

Ejemplo de uso:

A continuación, considere parámetro de ajuste de palabra, que le dirá si debe ajustar o no palabras largas que no encajan en el área dada. Esta propiedad no se usa con frecuencia, pero a veces no puede prescindir de ella:

ajuste de palabra: normal | salto de palabra

El valor normal le dice al navegador que el texto solo se puede dividir en espacios, y este es el comportamiento normal del navegador. Y el valor de la palabra de ruptura permite al navegador insertar saltos de línea dentro de las palabras. Ejemplo:

Parámetros de sombra de texto: propiedad de sombra de texto

Para los fanáticos de varios adornos en el estándar CSS3, se hizo posible establecer una sombra para el texto. El uso adecuado de la propiedad text-shadow puede animar visiblemente una página web. Sintaxis:

El valor none cancela el sombreado del texto y se establece de forma predeterminada.

Color de sombra se establece en cualquier formato CSS disponible y es un parámetro opcional. Por defecto, el color de la sombra es el mismo que el del texto.

Desplazamiento horizontal de la sombra se puede especificar en cualquier unidad de medida compatible con CSS. Un valor positivo colocará la sombra a la derecha del texto y un valor negativo a la izquierda. Un valor de cero colocará la sombra directamente debajo del texto y solo es significativo si la sombra está borrosa.

Desplazamiento vertical de la sombra también se puede configurar en cualquier unidad de medida compatible con CSS. Un valor positivo moverá la sombra debajo del texto; un valor negativo la moverá arriba. Un valor de cero colocará la sombra directamente debajo del texto.

En cualquier unidad de medida, y radio de desenfoque de sombra... Cuanto mayor sea el valor, más ancha se vuelve la sombra y más se suaviza. Si no se establece este parámetro, se supone que el valor de desenfoque es cero. Dado que el algoritmo anti-aliasing suele ser diferente para diferentes navegadores, la apariencia de la sombra puede diferir ligeramente según el navegador.

Módulo Texto CSS describe las funciones CSS que controlan la traducción del texto fuente en texto formateado y ajuste de línea. Varias propiedades de CSS proporcionan control sobre la conversión de mayúsculas y minúsculas, el manejo de espacios en blanco, el texto y las reglas de ajuste y ajuste de líneas, la alineación, el espaciado y la sangría.

La unidad básica de texto es un símbolo. Sin embargo, dado que los sistemas de escritura no siempre son tan simples como el alfabeto inglés convencional, lo que realmente es un símbolo depende del contexto en el que se usa el término. Por ejemplo, en el sistema de escritura coreano, cada representación cuadrada de una sílaba (por ejemplo, 한 \u003d han) puede considerarse un símbolo. Sin embargo, un símbolo cuadrado consta de varias letras, cada una de las cuales representa un fonema (por ejemplo, ㅎ \u003d h, ㅏ \u003d a, ㄴ \u003d n), y cada una de ellas también puede considerarse un símbolo.

1. Transformar texto: la propiedad de transformación de texto

La propiedad text-transform aplicará estilo al texto. No afecta el contenido subyacente y no debería afectar el contenido de una operación de copiar y pegar texto sin formato.

La propiedad se hereda.

Sintaxis

Transformación de texto: ninguna; text-transform: capitalizar; transformación de texto: mayúsculas; transformación de texto: minúsculas; text-transform: heredar; transformación de texto: inicial;

2. Manejo de espacios y saltos de línea: la propiedad de espacio en blanco

La propiedad de espacio en blanco maneja espacios entre palabras y saltos de línea dentro de un elemento.

La propiedad se hereda.

espacio en blanco
Valores:
normal Valor por defecto. Solo se inserta un espacio entre palabras, los espacios adicionales se descartan. El texto se ajusta solo si es necesario.
Nowrap Evita los saltos de línea excepto cuando se aplica
.
pre Los espacios en el texto no se ignoran, el navegador muestra espacios adicionales y saltos de línea.
preenvolver Conserva espacios en el texto haciendo saltos de línea cuando sea necesario.
prelínea Elimina espacios adicionales excepto en casos
.
espacios de descanso El comportamiento es idéntico al pre-ajuste, excepto que: cualquier secuencia de espacios en blanco no removibles siempre ocupa espacio, incluso al final de una línea; El salto de línea existe después de cada espacio no removible, incluso entre espacios.
inicial
heredar

Sintaxis

Espacio en blanco: normal; espacio en blanco: nowrap; espacio en blanco: pre; espacio en blanco: preenvío; espacio en blanco: prelínea; espacio en blanco: espacios de descanso; espacio en blanco: heredar; espacio en blanco: inicial;

3. Configuración de pestañas: la propiedad de tamaño de pestaña

La propiedad tab-size se usa para cambiar la cantidad de sangría obtenida con la tecla Tab. Los valores de propiedad se ignoran cuando se establece uno de los tres valores de prelínea, normal o nowrap de la propiedad de espacio en blanco.

Solo funciona para elementos