Tipo de estilo de lista CSS

Una hoja de estilo en cascada contiene el código que es responsable de agregar los efectos y propiedades al contenido desarrollado por HTML. Tanto HTML como CSS se utilizan para crear una página web estática o un sitio web dinámico. CSS contiene varios efectos, uno de ellos es una propiedad de estilo que se aplica a la lista de HTML. Esta propiedad es para mejorar los elementos de la lista, eso probablemente sea texto, agregando los efectos en las balas. Hoy, nuestra discusión es sobre el tipo de estilo de la lista. En el artículo, mencionamos un par de ejemplos para diseñar las balas de la lista de manera única.

Un código HTML contiene dos partes básicas: y . La parte del cabezal contiene la etiqueta y la etiqueta de título si usamos un CSS interno. La etiqueta contiene las etiquetas de todo el contenido que queremos crear en la página web. La etiqueta de la lista también se escribe dentro de la etiqueta del cuerpo.

Del mismo modo, el código CSS se clasifica como CSS en línea, interno y externo. El efecto que se escribe con la etiqueta dentro de la etiqueta de contenido es el CSS en línea. El que está escrito dentro de la sección Head HTML es el CSS interno. Y el tercero, el CSS externo, se declara en el archivo de otro editor de texto con un ".extensión de CSS ”.

¿Qué es una lista HTML??

El lenguaje de marcado de hipertexto crea contenido para formar un sitio web que incluye texto, imágenes, tablas, formas, párrafos, etc. El texto es el bloque de construcción de cualquier sitio web. Esto se puede escribir de varias maneras y un enfoque es la "lista" HTML. La lista es la demostración vertical de un texto junto con o sin balas. La lista HTML simplemente aparece de la misma manera que creamos una lista manual. Una lista se divide en categorías adicionales. Cuando el texto se representa con números, se realiza una lista ordenada

. Si la representación es a través de cualquier símbolo o forma, es una lista desordenada
. La sintaxis que se usa para crear una lista se menciona de la siguiente manera:


• Artículo 1


• ítem2



La sintaxis de la lista desordenada se da en el ejemplo anterior. Se declaran las primeras etiquetas de apertura y cierre para la lista. Estas etiquetas externas deciden si la lista está ordenada o desordenada. Dentro de ambas etiquetas, el

• La etiqueta se usa para agregar los nombres de los elementos que queremos ser parte de la lista.

  Propiedad de estilo de lista

  La propiedad de estilo de lista CSS son los efectos que se aplican a las balas de la lista. Hay varios tipos de propiedades de estilo de las listas. Algunos de ellos se explican aquí. La sintaxis básica se escribe como:

  Implementemos y expliquemos el funcionamiento de esta propiedad.

  Tipo de estilo de lista para una lista desordenada

  Primero, aplicamos algunos efectos a las balas de la lista desordenada. Estas balas son símbolos y formas. Por ejemplo, círculos, cuadrados, discos, etc.

  Valor de la propiedad: disco

  Creamos una página web simple en la que se da un encabezado dentro de la parte del cuerpo. Usamos una etiqueta de párrafo para escribir algún texto. Luego, se crea una lista desordenada como describimos anteriormente. La misma sintaxis sigue. Dentro de

  etiqueta, declaramos el nombre de clase que pertenece al CSS interno. Todos los efectos que se mencionan dentro de la clase se aplican a esta lista aquí:

  Dentro de la etiqueta, se declaran tres elementos de la lista. Cierre la lista y la etiqueta exterior. Eso es todo de la sección del cuerpo del código HTML.

  Ahora, conducimos a la sección principal. Dentro de la cabeza, damos un título a la página. Entonces, se declara la etiqueta de estilo CSS interna. Dentro de ella, se declara una clase "sub", el nombre que se usa dentro de la etiqueta de lista desordenada, se declara. Todos los efectos se aplican dentro de esta clase.

  Los ID y las clases se crean para usar los efectos colectivamente que desea aplicar. Luego, use estos nombres dentro de las etiquetas donde queremos aplicar estos efectos.

  .sub
  Tipo de estilo de lista: disco;
  

  El estilo de lista que se usa aquí es un disco. Si no usamos esta propiedad en la creación de la lista, las balas predeterminadas que se forman tienen forma de disco.

  Más efectos están en el encabezado. El color de fuente se agrega al encabezado. Además del cuerpo, se aplican el color de fondo y el color de fuente.

  Guarde el código en el editor de texto con una extensión HTML para crear una página web que se ejecute en el navegador. Al usar esta extensión, verá que el símbolo del archivo del editor de texto que guardó se cambia en el icono del navegador. Es la indicación de que esta es una página web.

  Verá en la ejecución que la página web que se crea contiene la lista de nombres de los sujetos y estos elementos se declaran a través de las balas de disco.

  Valor de la propiedad: círculo

  Después de usar el valor predeterminado de la bala de disco, usamos otra forma para diseñar una lista desordenada. Esta vez, la propiedad de estilo contiene la clase con el tipo de estilo de estilo de lista de círculo. Mientras que el resto del código, ya sea la parte de la cabeza o la sección del cuerpo, es el mismo. Solo realiza cambios en el tipo de estilo para ver que funcionan los efectos.

  Tipo de estilo de lista: Circle;

  Código CSS:	Producción:

  Cierre la etiqueta de estilo y ejecute el código en el navegador. Verá que las balas de disco llenas se reemplazan a través de las balas en forma de círculo.

  Tipo de estilo de lista para la lista ordenada

  Ahora, usamos los valores numéricos y alfabéticos para aplicar los efectos en las balas de la lista ordenada.

  Valor de la propiedad: decimal

  En cuanto a la lista ordenada que se crea, utilizamos cualquier valor numérico. El que normalmente se usa en el conteo manual o la numeración es la notación decimal. Primero iremos a la numeración decimal. Todo el código HTML es el mismo y el código CSS solo se entretiene a través del nombre de la bala que se conoce como "decimal". El efecto de tipo de estilo de lista mencionado en la clase CSS es el decimal.

  Tipo de estilo de lista: decimal;

  Código CSS	Producción:

  Tras la ejecución, verá que las balas se cambian de un círculo a los números decimales.

  Valor de la propiedad: inferior griega
  La propiedad de estilo de lista se nombra en Lowerw-Greek para aplicar este efecto y modificar la propiedad de estilo de lista de la lista.

  Código CSS	Producción:

  Valor de la propiedad: ninguno

  También podemos ocultar las balas de la lista utilizando las palabras clave "ninguno" en la propiedad de tipo de estilo de lista.

  Código CSS	Producción

  Valor de la propiedad: georgiano

  El último, pero no menos importante, el valor que se usa es el valor "georgiano" que se agrega a las balas de la lista.

  Código CSS	Producción

  Conclusión

  La propiedad de estilo de lista CSS es el efecto que se aplica en las balas de la lista si la lista está ordenada o desordenada. Comenzamos con una simple introducción de los idiomas HTML y CSS, incluida su declaración de etiquetas. Luego, elaboramos la estructura de las listas HTML junto con sus tipos. La propiedad de tipo de estilo de lista se elabora e implementamos algunos estilos para ver cómo funciona esta propiedad. Utilizamos algunos ejemplos para las listas ordenadas y desordenadas por separado.