Sangría de la lista CSS

Una hoja de estilo en cascada es un idioma que se utiliza para mejorar el contenido actual creado a través del idioma HTML. Ambos idiomas trabajan juntos para formar una página web. HTML se refiere a la creación y CSS diseña todos los elementos de HTML. HTML tiene muchos contenidos que ayudan a crear una página web. En todos ellos, el texto es el contenido básico que utiliza cada página web para mostrar cualquier tipo de información. Uno de los contenidos que se usan para mostrar texto son las listas. En este artículo, hablaremos sobre listas que tienen propiedades de texto y cómo funciona esta propiedad en la lista.

Listas de CSS:

La demostración vertical de los datos HTML, ya sea en una forma ordenada o no ordenada, se representa a través de un contenido HTML especial conocido como listas. El contenido escrito dentro de la lista se menciona con las balas. Finalmente, las listas se dividen en dos tipos principales: una lista ordenada y desordenada. Si queremos dar numeración a los datos, es una lista ordenada

. Los datos con cualquier tipo de bala sin números son una lista desordenada
. Estos dos
y
son solo responsables de mostrar el tipo de lista. La sintaxis simple que se usa para crear una lista:


• datos



Es un fragmento de una página web que tiene una lista desordenada. Puede ver que todos los datos están representados formando una pequeña lista con balas que muestra que es una lista desordenada.

Propiedad y lista de sangría de CSS:

Esta es la propiedad aplicada al contenido HTML, principalmente en texto. Se usa para desplazar el texto de su punto original a un lugar específico. Esta propiedad se utiliza para buscar la atención del usuario en contenido específico. Es posible que haya visto algunos sitios web con párrafo que comienzan desde una distancia en comparación con el encabezado, lo que lo hace más prominente frente al espectador. La sintaxis utilizada para aplicar esta propiedad es simple. Solo agregamos un parámetro de longitud a esta propiedad en píxeles o con unidades porcentuales.

INDENT DE TEXTO: longitud;

Ejemplo 1:
Este ejemplo trata de mostrar una lista de elementos que se generan como una lista normal y también una segunda lista que contiene elementos que se desplazan desde su posición original. Veamos el código de cuerpo HTML para crear una lista.
Se agrega un encabezado a la página web utilizando

etiqueta de encabezado. Luego, usamos una lista ordenada.



1. artículo


2. artículo



Esta lista ordenada creará dígitos de numeración predeterminados con los elementos en las etiquetas de la lista. Otro encabezado se declara seguido de una lista ordenada nuevamente. Se declara una clase de CSS dentro del segundo

.

Este es solo el nombre de la clase CSS, se declara en la sección principal del código HTML. Cada vez que se usa este nombre de clase en cualquier etiqueta, se aplican todos los filtros o efectos mencionados en esta clase en la declaración de estilo.

Dentro de la cabeza, se da un título a la página. Se utiliza una etiqueta de estilo para aplicar los efectos. Este tipo de estilo se conoce como CSS interno.

Se declara una clase CustomIndent. Dentro de la descripción de la clase, no hemos usado la propiedad de indente de texto directamente. De hecho, podemos sangrar los elementos de la lista utilizando la propiedad de relleno en cualquier dimensión. Entonces, como queremos que la lista se muestre con su contenido en la dirección correcta, utilizaremos la propiedad de la izquierda de relleno para sangrar el texto desde la posición izquierda hacia la dirección correcta.

La propiedad de relleno es la distancia del contenido HTML desde el borde especificado del contenido exterior o de la página HTML.

Cierre todas las etiquetas en la cabeza. Guarde el archivo con la extensión HTML para crear una página web en el navegador siempre que este archivo se abra con un navegador. Y cuando lo abra en el editor de texto, solo mostrará el código.

Verá que se muestra una lista simple sin ningún efecto de sangría porque no hemos aplicado el nombre de la clase CSS. Pero la segunda lista con un sangría personalizado se arrastra hacia la posición correcta. Esto se debe a la propiedad del relleno.

Ejemplo 2:
En este ejemplo, estamos utilizando el mismo ejemplo pero con diferentes propiedades de CSS para sangrar el texto en la lista. Dentro de la etiqueta de estilo, la clase CSS tiene una propiedad de margen. Este margen es la distancia del contenido desde el borde de la página. En este caso, tenemos texto HTML, por lo que el texto dentro de la lista se moverá de acuerdo con el valor.

.Customindent
Margen -izquierda: -15px;

En este ejemplo, queremos que la lista esté con el margen izquierdo. Entonces, tomamos el valor del margen hacia el lado izquierdo. El valor se toma en un signo negativo para ir hacia atrás. Si la distancia se ha tomado con un signo positivo, entonces la lista estará en el lado derecho de la página.

Este estilo se aplica nuevamente a la segunda lista que creamos con una clase de índice personalizado.

Ahora, ejecutaremos la página web para ver el resultado. Verá que la lista ordenada está atascada en el lado más izquierdo de la página.

Ejemplo 3:
Este ejemplo trata sobre el uso de una lista desordenada en la página web. Dentro de la lista, hemos tomado 4 filas de artículos. En este ejemplo, no usaremos el estilo CSS a través de una clase. No aplicaremos la propiedad de texto de sangría a la lista completa. La línea única en la lista se efectuará a través de la propiedad de texto de texto. Esto se hará utilizando otra propiedad CSS que sea una propiedad 'Primera de tipo'.

Esta propiedad se ocupa de la selección de la primera ocurrencia de un elemento en el mismo contenido HTML. Por ejemplo, esta propiedad afectará solo la primera fila de la línea, sin mencionar el nombre de cualquier lista o la clase dentro de la etiqueta.

Al escribir la declaración de estilo en la sección principal del código, usaremos el

1. Como queremos aplicar el efecto en el li.
   Li: primero de tipo
   INDENT DE TEXTO: 50px;
   Tipo de estilo de lista: estrella;
   

   El primer elemento se moverá hacia la derecha con una distancia específica mencionada anteriormente. Y también, hemos dado un número a ese elemento para la discriminación.

   En la ejecución, observará que el primer elemento de la lista se desplaza en la dirección correcta y la bala también se conoce como un número decimal.

   Conclusión

   Este artículo tiene como objetivo describir el propósito y el uso de la propiedad de sangría en la lista de contenido HTML. Comenzamos con una breve explicación de las listas y sus tipos. La propiedad de sangría se puede aplicar a cualquiera de los tipos de lista. Después de eso, hemos utilizado tres ejemplos básicos que incluyen el efecto de relleno, el margen y la propiedad de afectación de la sangría del texto mediante el uso de la primera propiedad CSS. Todos estos ejemplos muestran la sangría de toda la lista y una sola fila de la lista también.