Sangría

"CSS sangría es propiedad de CSS utilizada en el bloque DIV o en cualquier contenedor para mostrar la sangría de la primera línea del texto. Cuando el sangría CSS no se menciona con ninguna línea, entonces, por defecto, es para la primera línea del texto. Toma los valores con signos positivos y negativos también.

Esta propiedad de sangría se puede aplicar a cualquier contenido HTML, pero en este artículo, hemos usado texto para sangrar el texto en la primera línea del párrafo."

Trabajar en la propiedad de texto de sangría CSS

Se utiliza para mostrar la cantidad de espacios en blanco que discriminan entre los párrafos que comienzan desde el izquierdo o los márgenes derecho del contenido externo que es principalmente Div. La propiedad de sangría de CSS facilita el texto de los programas y es comprensible manteniendo el texto en una longitud específica. Esto hace un efecto pegadizo para el texto para el usuario.

La sintaxis básica utilizada para la propiedad de texto de texto es:

INDENT DE TEXTO: longitud;

Ejemplo 1

En este ejemplo, crearemos una página web utilizando solo contenido de texto HTML en forma de encabezados o párrafos. Así que primero, dentro de la sección del cuerpo, usa el encabezado

Etiqueta para introducir un encabezado. Después de un descanso
, De nuevo, se usa un encabezado. La etiqueta de descanso crea una línea en blanco y salta a la siguiente línea para crear un nuevo contenido. Después de declarar los encabezados, se crea un DIV. Un DIV es un contenedor HTML importante, ya que es un contenedor que mantiene el contenido HTML en el lugar especificado. Cualesquiera que sean los elementos que usamos dentro del DIV, se requieren con un tamaño específico para mantener todos los elementos en ese tamaño respectivamente. En este caso, hemos mencionado el nombre de la clase, que se declarará en la sección principal del código HTML. Todas las propiedades de estilo CSS se escriben dentro de la clase mencionada que se aplicarán al DIV y al contenido dentro de él.

Dentro del div, simplemente usaremos el texto. El contenido de texto simple se puede usar con o sin las etiquetas de párrafo.

Después de que se cierra la etiqueta Div, se usa nuevamente un nombre de encabezado en

. Se declarará nuevamente un DIV con el nuevo nombre de clase que contendrá el CSS para esta clase por separado. Cierre todas las etiquetas y el cuerpo HTML también. Ahora considere las etiquetas CSS declaradas en la parte de la cabeza, lo que lo convierte en un CSS interno. En el CSS, dos clases se declaran por separado; La primera clase contiene una sangría de texto de 50px con un ancho Div de 650px de longitud, esto mantendrá el texto en esta longitud del DIV, y la primera línea del texto se verá afectada por este valor de sangría.

.mi texto
INDENT DE TEXTO: 50px;

Del mismo modo, para la segunda clase declarada para el segundo div, un indente de texto aplicado al texto está en valor negativo. Una longitud de ancho similar también se aplica al div.

Ahora guarde el código con la extensión HTML para que se abra tanto como un código HTML en el editor y como una página web en el navegador.

Verá que el primer div que tiene el indente de texto de 50px tiene la primera línea del texto que ha movido la indención de 50 px desde el punto inicial izquierdo. Mientras que el segundo div tiene 10em, el texto se moverá hacia el lado izquierdo sangrado por el valor especificado, haciendo que las palabras de la primera línea se oculten.

Ejemplo 2

La unidad utilizada para el sangría no siempre está en píxeles; También se puede usar en porcentajes. En este ejemplo, el código de cuerpo HTML es casi el mismo; Solo el nombre del encabezado es diferente ya que especifican los nuevos valores en porcentaje. También se utilizarán las mismas dos clases para el CSS en el código.

Avanzando hacia la parte de la cabeza de CSS, la etiqueta de estilo tiene la clase para contener una sangría del valor y ancho del 20 por ciento, como hemos dado en el primer ejemplo.

.mi texto
INDENT DE TEXTO: 20%;

Del mismo modo, se declara que la segunda clase myText1 aplica un estilo al segundo div, esto tendrá el mismo ancho, pero la sangría del texto es del 40%. Este aumento en el indio de texto hará que la primera línea del texto se mueva en la dirección correcta con un cambio.

Puede ver que cuando ejecutemos el archivo HTML en el navegador, se formará una página web con dos párrafos de texto. El primero comienza cerca de la izquierda, mientras que el segundo párrafo comienza desde el centro del div.

Ejemplo 3

El tercer y el último ejemplo es sobre el texto de texto colgante. En este ejemplo, la primera oración se mueve en una dirección hacia atrás, mientras que el resto del párrafo todavía está en su posición; El desplazamiento está principalmente en un valor negativo en este caso, para mover la primera sección de texto en una dirección izquierda. Teniendo en cuenta el cuerpo HTML, hay un solo rumbo y un div contiene el texto. El contenedor Div tiene una clase para diseñar el texto dentro de él usando CSS interno.

< div class = mytext >

Dentro de la etiqueta de estilo en la cabeza HTML, la clase declarada en la etiqueta Div se declara con especificaciones. Tiene un indente de texto de -28px. Esto significa que la primera línea comenzará con una sangría de un valor número 28 negativo, moviendo el texto al lado izquierdo. Como el valor negativo de texto-indente hace que el texto se mueva hacia el lado negativo, lo hemos explicado en el primer ejemplo, pero a diferencia de ese ejemplo, donde la parte móvil de la primera línea no era visible, aquí, toda la primera oración apareció dentro el Div.

.mi texto
Text -indent: -28px;
RODING-LEFT: 28px;

A diferencia del indio de texto, ya que se toma en un valor negativo, el valor de la izquierda de relleno se toma en positivo porque todo el párrafo encajará dentro de este tamaño Div; Esto hará que el texto de la primera línea sea más prominente hacia la dirección izquierda.

El resto del código corporal HTML es el mismo, tener un encabezado y un div con una clase.

Después de guardar el código, ejecutarlo en el navegador. Verá que la primera fila del texto es hacia la dirección izquierda, y el resto del párrafo desde la segunda línea es hacia la derecha.

Conclusión

El artículo explica el trabajo y el uso de la propiedad CSS de texto en las páginas web. Cada vez que estamos dispuestos a describir cualquier cosa a través de un texto en el sitio web, ya sea sobre el sitio web o cualquier otra información, utilizamos esta propiedad de sangría para desplazar el texto de la primera línea en una dirección derecha o izquierda. En este artículo, hemos utilizado diferentes ejemplos que explican el funcionamiento de esta propiedad de sangría en la propiedad de texto de una página web, formada utilizando HTML y CSS juntos.