Sangría de texto CSS

El sangría se define como el espacio adicional al comienzo de la línea. En CSS, el indente de texto se define como el espacio adicional al comienzo de la primera línea. Utilizamos la propiedad de "texto-indente" para aplicar la sangría en 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 de "indente de texto" de CSS, la primera línea del bloque o párrafo creará algo de espacio al comienzo de la línea. Solo establecerá algo de espacio al comienzo de la primera línea y no afectará otras líneas del párrafo o bloqueo. No crea espacio en las otras líneas, excepto la primera línea. En este tutorial, utilizaremos esta propiedad "indente de texto" y estableceremos los valores negativos y positivos para la sangría.

Ejemplo # 1: Para usar esta propiedad de "indente de texto" en CSS, debemos tener S

Ome bloque de datos o párrafos. Para esto, primero tenemos al archivo HTML. En este tutorial, el software que estamos utilizando es el código de Visual Studio. Yocreate U puede utilizar cualquier editor de texto o bloc de notas para esto. Cuando estamos utilizando este software, tenemos que elegir el idioma en el que vamos a escribir el código. Aquí, estamos seleccionando "HTML" como su idioma.

Después de esto, vamos a comenzar a codificar en este archivo. También pusimos "!"Y luego presionando" Enter "obtenemos las etiquetas básicas del HTML que necesitamos en todos los códigos HTML. En el cuerpo, vamos a crear algunas clases "div" con diferentes nombres. Dentro de cada div, hemos creado un párrafo usando el "

" etiqueta. Estamos creando tres divs con diferentes nombres como "A", "B" y "C". Dentro de estos divs, tenemos un párrafo. Entonces, de esta manera hemos creado tres párrafos aquí. Usaremos estos tres párrafos en todos los ejemplos de este tutorial. Ahora, iremos al archivo CSS donde usamos la propiedad "indente de texto" y aplicaremos la sangría a todos estos párrafos. También vinculamos el archivo CSS con este archivo HTML en la etiqueta "Cabeza" del código HTML.

Estamos utilizando el nombre "Div" "A" y luego usamos la propiedad "Texto-Indent". Entonces, creará 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 comienzo de la línea del párrafo. Estamos utilizando los valores en "PX" en este código. Establecemos el valor "80px" para el primer párrafo Div. Por lo tanto, creará espacio libre "80px" en la primera línea y administrará el texto en consecuencia. Luego, vamos a sangrar el segundo párrafo Div y usar "B" con el "Div". Luego, vamos a utilizar el valor negativo en la propiedad "texto-indente". Para el segundo párrafo, aplicamos la sangría negativa para configurar el texto en el lado izquierdo.

Después de esto, vamos a usar el último párrafo y también aplicaremos la propiedad "Texto-Indent" para esto. Establecimos "30px" para el tercer párrafo del Div. Entonces, el texto de la primera línea del párrafo se mueve a "30px" al lado derecho y crea un espacio "30px" al comienzo de la primera línea. Después de completar este código, guárdelo con el ".Extensión del archivo CSS "y también con el nombre que hemos usado en la etiqueta de enlace de" HTML ". Luego, verifique la salida.

En esta captura de pantalla, puedes ver que el primer párrafo crea algo de espacio al comienzo de la primera línea solo. Aquí, crea un espacio "80px", ya que hemos usado "80px" como el valor de la propiedad "texto-indente". Ahora, mire el segundo párrafo, algunos textos desaparecen de la pantalla a medida que se mueve hacia el lado izquierdo debido a la propiedad "texto-indente". Oriente este párrafo "-70px" y esto se aplica a la primera línea del párrafo solamente. Luego, viene el último párrafo donde usamos el valor "30px" de esta propiedad. En este párrafo, crea espacio de "30px" en la primera línea.

Ejemplo # 2:

Establecimos la "familia de fuentes" del encabezado en "argelina" y también en la alineación "central". Establecimos su "color" en "Maroon". Entonces, tenemos un rumbo 2. Para este encabezado, estamos usando "Times New Roman" como "Font-Family" y "Purple" como el "color" de la fuente. Ahora, vamos a usar la propiedad "Alinear de texto" para todos los divs por separado. Primero, tenemos el "Div.a "y estamos configurando los valores de propiedad de" indente de texto "en" EM ". Aquí, "10em" está configurado para el primer párrafo Div y para el segundo div, estamos usando un valor negativo como "-5em". Y para el último div, establecemos el valor de "indente de texto" en "2em".

La primera línea del primer párrafo está sangrada "10em" al lado derecho, lo que significa que crea un espacio "10em" en la primera línea del primer párrafo. Luego, aplica un valor negativo al segundo párrafo y mueve la primera línea del segundo párrafo al lado izquierdo. Entonces, algún texto no aparece aquí. Y en la primera línea del tercer párrafo, usamos la sangría de texto "2EM", por lo que crea un espacio "2em" o sangría en la primera línea.

Ejemplo # 3:

Vamos a diseñar el encabezado aquí, con la "familia de fuentes" establecida en "argelina" y alinear con el "centro". Su color se ajusta aquí a "naranja". Luego, hay un encabezado 2, que se establece en "Calibri" como la "familia de fuentes" y "verde" como el "color de la fuente."Ahora, estamos utilizando la propiedad" Align "para cada div individualmente para cada div individualmente. Primero, tenemos "Div.a ", y estamos utilizando el porcentaje"%"para establecer los valores de propiedad" indente de texto ". Para el primer párrafo Div, utilizamos un valor positivo de "20%" y para el segundo DIV, usamos un valor negativo de "-10%". El valor de "texto-indente" para el DIV final se estableció en "40%"

La primera línea del primer párrafo aplica una sangría del "20%" que implica que produce una sangría del "20%" en la primera línea del primer párrafo. El segundo párrafo recibe un valor negativo y la línea inicial del segundo párrafo se mueve hacia el lado izquierdo evitando que aparezca algún texto. La primera línea del segundo párrafo se mueve "10%" a la izquierda. También utilizamos la sangría de texto "40%" en la primera línea del tercer párrafo que resulta en un espacio o sangría "10%" en la primera línea.

Ejemplo # 4:

Establezca la fuente de fuentes en "Argelino" y "Centro" en este encabezado. Su color se cambia a "rojo" en este caso. Luego también tenemos el encabezado 2, que tiene "Calibri" como la "Fuente-Familia" y "Azul" como el "color" del encabezado. Ahora, usamos el atributo "Align de texto" para cada DIV por separado. Primero, usamos el "Div. a ", y estamos configurando los valores de propiedad de" indente de texto "con el píxel a" 50px ". Para el segundo párrafo, establecemos el valor de "texto-indente" en "EM" y también negativo. Usamos "-3em" para el segundo párrafo Div. Para el último párrafo Div, establecemos el valor en "%". Establecimos "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, establecemos el valor negativo en "EM", que es "-3em". La primera línea está sangrada al lado izquierdo. Para el último párrafo, establecemos el valor en "%", que es "30%" y puede ver que ordena la primera línea del tercer párrafo al lado derecho.

Conclusión:

Hemos creado este tutorial para elaborar el "indente de texto" en CSS. Aquí, hemos discutido qué es el indio de texto y cómo establecer la sangría en CSS y qué propiedad de CSS hemos utilizado para sangrar el texto. Como hemos discutido en este tutorial, la propiedad "texto-indente" se usa para aplicar la sangría a nuestro texto y hemos utilizado valores negativos y positivos aquí en nuestros ejemplos. Esta propiedad ha sangrado solo la primera línea del párrafo.