Una hoja de estilo en cascada (CSS) juega un papel vital en la mejora del contenido creado por HTML para formar una página web. Una de las propiedades básicas comúnmente utilizadas es agregar un espacio en blanco o una nueva línea en el medio, o después del contenido HTML. Usando solo el HTML, el
es responsable de crear descansos en el contenido, pero el CSS tiene sus formas de diseñar el efecto en los elementos del cuerpo. En este artículo, veremos cómo, al usar CSS, podemos agregar una nueva línea en el código HTML.

Ejemplo 1:
Para implementar el fenómeno de un descanso de línea, utilizamos un ejemplo simple para elaborar el concepto. Un programa simple demuestra primero los textos HTML sin separación y cómo parece usar el texto en el párrafo o una etiqueta de tramo sin usar los espacios en blanco. Primero viene la sección del cuerpo del HTML. Un encabezado

se agrega a la sección. Luego, al usar dos etiquetas de span, usamos el texto simple para. Una etiqueta de la span funciona como la

etiqueta párrafo. Cierre el cuerpo HTML. Esta etiqueta no contiene el CSS ni ninguna otra etiqueta de contenido. Solo se declaran dos líneas para obtener la salida deseada.

Guardar el código del archivo de texto con una extensión HTML y ejecutarlo en el navegador.

Verá que las dos oraciones sin descanso de línea se muestran aunque están escritas en líneas separadas. Pero no importa ya que cada línea de tramo se muestra en la misma línea.

Ejemplo 2:
Existe una propiedad CSS que se aplica al contenido HTML para agregar los descansos en ellos. Es el carácter de retorno del carro (\ a). Se subdividen en dos elementos que son ":: antes" y ":: después" pseudo-elementos que se mencionan dentro de las clases de CSS.

Este es el efecto que se aplica tanto en los elementos como en el uso de cualquiera de ellos. Al principio, vamos a usar un elemento posterior al texto. Vamos a ver cómo funciona.

En la sección del cuerpo, el mismo contenido se usa como encabezado, y luego se aplican dos etiquetas de tramo. Esta vez, se menciona una identificación para el CSS dentro de la etiqueta del tramo. Esta identificación aplica todos los efectos que se declaran dentro de la parte de la cabeza del cuerpo HTML. Ahora, cierre el cuerpo. En la sección del cabezal, use las etiquetas de estilo para hacer el CSS interno. Dentro de las etiquetas, use la ID que se aplica y siga el tipo de carácter de retorno de carro ":: After". Dentro de esta descripción de ID, usamos la propiedad de contenido que es solo el personaje "\ a". No causa nada más que una nueva línea para el texto existente. Al usar esto, ambas oraciones se muestran en líneas separadas. Otra propiedad que está escrita en la descripción es el "espacio blanco". Este espacio en blanco siempre se toma en un pre-tipo.

#content1 :: después
Contenido: "\ a";
Espacio blanco: pre;

Esta identificación de estilo afecta el contenido del tramo de tal manera que dos oraciones no se muestran en la misma línea. El elemento "después" provoca una ruptura de una línea entre dos oraciones. Como declara su nombre, el descanso es después de la primera línea.

Guardar el código y ejecutarlo en el navegador para ver la página web resultante creada.

Verá que de esta manera, creamos una nueva línea utilizando una propiedad CSS.

Ejemplo 3:
En este ejemplo, usaremos ambos elementos del carácter de retorno del carro. Deje que la sección del cuerpo HTML esté en la forma en que estaba en el ejemplo anterior, pero con un solo cambio agregando una ID de contenido2 dentro de la etiqueta del segundo tramo. Esto causa efectos en ambas etiquetas del tramo. Solo hay cambios en las etiquetas de estilo de la sección principal. La identificación de contenido1 es la misma que tiene el elemento "después" dentro de él.

Pero la identificación de contenido2 tiene el elemento "antes" del personaje con él.

#content2 :: antes
Contenido: "\ a";
Espacio blanco: pre;

Como muestra la descripción del estilo, el elemento anterior se aplica al segundo tramo. En el primer lapso, aplicamos el ID de Conent1. Debido al ID de contenido1, el espacio se crea después del primer tramo. Pero debido a la identificación de contenido2 con el elemento "antes", el segundo tramo tiene una nueva línea antes de la segunda oración. Esto se debe al elemento "antes" declarado en el ID de contenido2.

Tras la ejecución, verá que hay una brecha de una línea en blanco entre dos oraciones. El efecto "After" se aplica mediante la primera ID de Conten1, mientras que el efecto "antes" se aplica por la identificación de contenido2 colectivamente.

Ejemplo 4:
Aquí se declara otro ejemplo de una nueva línea CSS que implica el uso de una propiedad CSS en la que el efecto de espacio blanco tiene un valor de la línea previa. Este valor previo a la línea crea una brecha antes del contenido HTML al que se aplica. Ahora, consideremos el siguiente ejemplo:

En la sección del cuerpo del HTML, dos encabezados,

y

, son dados. Después de estos encabezados, se declara un párrafo con cada palabra en una línea separada.

Ahora, en la cabeza, después de dar el título de la página, se aplica un CSS interno para tener una etiqueta de estilo. Dentro de la etiqueta de estilo, usamos una etiqueta de párrafo para aplicar el color de la fuente al texto junto con la propiedad del espacio blanco.

PAG
Color naranja;
Espacio blanco: pre-línea;

Este código "pre-línea" causa una línea en blanco antes de que el párrafo haya comenzado.

Tras la ejecución, verá que el espacio se crea antes de que el párrafo haya comenzado.

Ejemplo 5:
Este ejemplo es bastante diferente de los ejemplos anteriores porque no solo usaremos una nueva línea en blanco aquí, sino que también agregaremos el nuevo texto a las nuevas líneas generadas antes. En la sección del cuerpo, se crean dos encabezados -

y

. Después de estos, se usa una etiqueta de párrafo para crear el texto de dos párrafos.

Dentro de la sección de la cabeza, usamos un párrafo para el fin de estilo.

P :: antes
Color rojo;
Contenido: "Linuxhint \ A"
"Artículo en línea de línea";
Bloqueo de pantalla;
White-Space: Pre

Este efecto incluye el color de fuente y el contenido que queremos agregar a cada párrafo después de que se agregue la línea en blanco. La propiedad del espacio blanco recibe un valor "pre" para agregar un espacio en blanco antes del párrafo.

Guarde el código y ejecute el archivo. Verá que antes de cada párrafo, se agrega una línea en blanco y después de eso, el contenido se agrega después del espacio en blanco.

Conclusión

La nueva línea CSS es una descripción de la creación de una nueva línea mediante el uso de algunas características de CSS que se declaran con cualquier característica HTML. A través de los efectos CSS, se puede agregar una nueva línea antes, después o entre el contenido HTML. Implementamos los diferentes ejemplos para elaborar el concepto brevemente. Al principio, se usa un ejemplo de un párrafo HTML sin espacio. Luego, al usar el mismo código, agregamos una propiedad CSS del personaje. Se utiliza un "carácter de retorno de carro" para agregar nuevas líneas entre el contenido que declaramos en el cuerpo HTML. Este personaje se puede agregar directamente o con el nuevo contenido que se agregará.