Sangría de texto CSS

La sangría se define como el espacio adicional al comienzo de la línea. En CSS, la sangría del texto se define como un espacio adicional al comienzo de la primera línea. Usamos la propiedad text-indent para sangrar la primera línea del párrafo. Establecemos su valor en "px", "em" o también en "%". También establecemos un valor negativo para esta propiedad de texto de sangría. Cuando usamos esta propiedad CSS "text-indent", la primera línea del bloque o párrafo hará algo de espacio al principio de la línea. Solo pone algo de espacio al principio de la primera línea y no afecta otras líneas del párrafo o bloque. No libera espacio en las otras líneas excepto en la primera línea. En este tutorial, usaremos esta propiedad "text-indent" y estableceremos los valores negativos y positivos para la sangría.

Ejemplo n.º 1: para usar esta propiedad "text-indent" en CSS, necesitamos tener s

Algunos bloques de datos o párrafos. Para hacer esto, primero debemos crear el archivo HTML. En este tutorial usaremos Visual Studio Code. Yocreate puede usar cualquier editor de texto o bloc de notas para esto. Cuando usamos este software tenemos que elegir el idioma en el que vamos a escribir el código. Aquí seleccionamos "HTML" como idioma. Después de eso, comenzamos a codificar en este archivo. También ponemos "!" y luego presionando "Enter" obtenemos las etiquetas HTML básicas que necesitamos en todos los códigos HTML. En el cuerpo crearemos algunas clases "div" con diferentes nombres. Dentro de cada div tenemos con el "

La etiqueta ' crea un párrafo. Creamos tres divs con diferentes nombres como "a", "b" y "c". Dentro de estos divs tenemos un párrafo. Así es como hemos creado tres párrafos aquí. Usaremos estos tres párrafos en todos los ejemplos de este tutorial. Ahora vamos al archivo CSS donde usamos la propiedad "text-indent" y aplicamos sangría a todos estos párrafos. También vinculamos el archivo CSS a este archivo HTML en la etiqueta "head" del código HTML.

Usamos el nombre "div" "a" y luego usamos la propiedad "text-indent". Entonces se crea una sangría en la primera línea del párrafo div "a". La primera línea de este párrafo crea un espacio al principio de la línea del párrafo. Usamos los valores en "px" en este código. Establecemos el valor "80px" para el primer párrafo div. Por lo tanto, creará espacio libre en la primera línea "80 píxeles" y administrará el texto en consecuencia. Luego aplicaremos una sangría al segundo párrafo div y usaremos "b" con "div". Luego usamos el valor negativo en la propiedad "text-indent". Para el segundo párrafo, aplicaremos sangría negativa para colocar el texto en el lado izquierdo. Después de eso, usamos el último párrafo y le aplicamos la propiedad "text-indent". Establecemos "30px" para el tercer párrafo del div. Entonces, el texto de la primera línea del párrafo cambia a "30px" en el lado derecho, creando un relleno de "30px" al comienzo de la primera línea. Después de terminar este código, guárdelo con la extensión de archivo ".css" y también con el nombre que usamos en la etiqueta de enlace de "HTML". Luego verifique la salida.

En esta captura de pantalla, puede ver que el primer párrafo deja espacio solo al comienzo de la primera línea. Aquí se crea un espacio en blanco "80px" porque usamos "80px" como el valor de la propiedad "text-indent". Ahora mire el segundo párrafo, parte del texto desaparece de la pantalla cuando se mueve hacia el lado izquierdo debido a la propiedad "text-indent". Sangría este párrafo "-70px" y esto solo se aplica a la primera línea del párrafo. Luego viene el último párrafo donde usamos el valor "30px" de esta propiedad. En este párrafo, se crea un espacio de "30px" en la primera línea.

Ejemplo #2:

Establecemos la "Familia de fuentes" del encabezado en "Argelina" y también en la alineación "Centro". Establecemos su "color" en "granate". Luego tenemos el Título 2. Para este Título, usaremos "Times New Roman" como la "Familia de fuentes" y "púrpura" como el "Color" de la fuente. Ahora usaremos la propiedad "text-align" para cada div por separado. Primero tenemos el "div.a" y establecemos los valores de la propiedad "text-indent" en "em". Aquí se establece "10em" para el primer párrafo div y para el segundo div usamos un valor negativo como "-5em". Y para el último div, establecemos el valor de "text-indent" en "2em".

La primera línea del primer párrafo tiene una sangría de "10em" a la derecha, lo que significa que hay un espacio de "10em" en la primera línea del primer párrafo. Luego aplica un valor negativo al segundo párrafo y desplaza la primera línea del segundo párrafo a la izquierda. Por lo tanto, algunos textos no se muestran aquí. Y en la primera línea del tercer párrafo, usamos la sangría de texto "2em", por lo que hay un espacio o sangría "2em" en la primera línea.

Mira esto:Comando Sysctl Linux

Ejemplo #3:

Vamos a diseñar el encabezado aquí con la "Familia de fuentes" configurada en "Argelina" y alineada en "Centro". Su color se establece en Naranja aquí. Luego está el Título 2, que se establece en "Calibri" como la "Familia de fuentes" y "Verde" como el "Color" de la fuente. Ahora usamos la propiedad "text-align" para cada div individualmente. Primero tenemos "div.a" y usamos el porcentaje "%" para establecer los valores de propiedad "text-indent". Para el primer párrafo div usamos un valor positivo de "20%" y para el segundo párrafo div usamos un valor negativo de "-10%". El valor de "sangría de texto" para el último div se estableció en "40%".

La primera línea del primer párrafo aplica una sangría de "20%", lo que implica que se crea una sangría de "20%" en la primera línea del primer párrafo. Luego, al segundo párrafo se le asigna un valor negativo y la línea inicial del segundo párrafo se desplaza hacia la izquierda, evitando que aparezca parte del texto. La primera línea del segundo párrafo se desplaza "10%" a la izquierda. También usamos una sangría de texto de "40%" en la primera línea del tercer párrafo, lo que resulta en un espacio o sangría de "10%" en la primera línea.

Ejemplo #4:

En este encabezado, establezca la familia de fuentes en Argelia y Media. En este caso, su color se cambia a "rojo". Luego tenemos el Título 2, que tiene "Calibri" como la "Familia de fuentes" y "Azul" como el "Color" del título. Ahora usamos el atributo "text-align" para cada div por separado. Primero usamos el "div. a' y establecemos los valores de la propiedad 'text-indent' con el píxel en '50px'. Para el segundo párrafo, establecemos el valor de "text-indent" en "em" y también negativo. Usamos "-3em" para el segundo párrafo div. Para el último párrafo div, establecemos el valor en "%". Ponemos "30%" para el último párrafo. En este código usamos "px", "em" y también "%".

En el primer párrafo, usamos "50px" en la captura de pantalla. Ajusta la sangría "50px". En el segundo párrafo, ponemos el valor negativo en "em" que es "-3em". La primera línea está sangrada a la izquierda. Para el último párrafo, establecemos el valor en "%", que es "30%" y puede ver que esto sangra la primera línea del tercer párrafo a la derecha.

Conclusión:

Creamos este tutorial para explicar con más detalle la "sangría de texto" en CSS. Aquí discutimos qué es text-indent y cómo sangrar en CSS y qué propiedad de CSS usamos para sangrar el texto. Como discutimos en este tutorial, la propiedad text-indent se usa para sangrar nuestro texto, y hemos usado valores negativos y positivos en nuestros ejemplos aquí. Esta propiedad aplica sangría solo a la primera línea del párrafo.

Mira esto:Cómo instalar FileZilla en Ubuntu 22.04