Reglas CSS para personalizar la apariencia de una lista en una página HTML. Propiedad de estilo de lista (tipo, imagen, posición). Diseño CSS: Listas de domesticación

Sintaxis

georgiano | alfa inferior | griego inferior | latín bajo | bajo-romano |

Repita al menos A, pero no más de B veces.

armenio Numeración tradicional armenia. Números arábigos decimales (1, 2, 3, 4,...). cero decimal

cuatro

El resultado de este ejemplo se muestra en la Fig. 1.

Objeto

Especificación

Navegadores

tipos de listas

Mostrar en CSS

Posición del marcador de lista

Apariencia del marcador

marcador personalizado

Sintaxis fusionada

Estilo de lista: diseño de listas en código HTML

Imagen de estilo de lista y regla CSS prefabricada

Tipo de marcador en la lista

Posición del marcador en la lista

Color del marcador de lista

Imagen en lugar de un marcador en la lista.

Sangría del marcador de lista

Valores

Lista con viñetas

UN REGALO PARA LOS QUE LECIERON HASTA EL FINAL

Hogar › Teléfono › Reglas CSS para personalizar la apariencia de una lista en una página HTML. Propiedad de estilo de lista (tipo, imagen, posición). Diseño CSS: Listas de domesticación

	alfa superior \| latín superior \| alto-romano \| ninguno	Designaciones
<тип>	Descripción	<размер>
Ejemplo	Indica el tipo de valor.	<размер> && <цвет>
A && B	Los valores deben generarse en el orden especificado.	Un \| B
Indica que es necesario seleccionar solo un valor de los propuestos (A o B).	normales \| pequeñas capitalizaciones	Un \|\| B
	Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden.	ancho \|\| contar
*	Valores de los grupos.	[,<время>]*
+	[ cultivo \|\| cruz]	<число>+
?	Repita cero o más veces.	Repita una o más veces.
El tipo, palabra o grupo especificado es opcional.	¿recuadro?	<радиус>{1,4}
#	(A, B)	<время>#

Repita una o más veces separadas por comas.

Los valores dependen de si se aplican a un tipo de lista con viñetas o numerada.

círculo Marcador en forma de círculo. Marcador de disco en forma de punto. Marcador cuadrado en forma de cuadrado.
lista numerada

Números arábigos con un cero a la izquierda para las cifras inferiores a diez (01, 02, 03,...). georgiano Numeración tradicional georgiana. lower-alpha Letras latinas minúsculas (a, b, c, d,...). lower-greek Letras griegas minúsculas (α, β, γ, δ,...). lower-latin Este valor es el mismo que lower-alpha. Números romanos inferiores en minúsculas (i, ii, iii, iv, v,...). Alfa superior Letras latinas mayúsculas (A, B, C, D,...). Upper-latin Este valor es el mismo que Upper-Alpha. Números romanos superiores en mayúsculas (I, II, III, IV, V,...). none Desactiva las viñetas de la lista.

Salvadera

ul (tipo-estilo-lista: decimal;)

Ejemplo
tipo de estilo de lista
Cayo Octavio Turino
Tiberio Claudio Nerón
Cayo Julio César Augusto Germánico
Tiberio Claudio Druso
Lucio Arruncio Camilo Escriboniano

Nerón Claudio César Druso Germánico

Lucio Clodio Macer

Arroz. 1. Usando la propiedad de tipo de estilo de lista modelo de objetos

.style.listStyleType

Internet Explorer hasta la versión 7 no admite los valores armenio, cero decimal, georgiano, griego inferior, latín inferior y latín superior. En su lugar, se muestra la numeración en números arábigos. En este navegador, la numeración o las viñetas no se muestran para los elementos flotantes (ul (float: left;)).

Internet Explorer 8 comprende además el valor griego superior, que establece la numeración en letras griegas mayúsculas (Α, Β, Γ, Δ,...).

Cada especificación pasa por varias etapas de aprobación.

Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
Recomendación del candidato ( Posible recomendación) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
Borrador ( Borrador de especificación) - el primer borrador de la norma.

Hoy en día prácticamente no existe un solo sitio que no utilice listas HTML (

Ahora mire la demostración para ver qué crearemos.

Se ven mucho mejor, ¿no? Y usted también puede crear este tipo de listas utilizando un código CSS simple. ¿Quieres saber cómo? ¡Leer!

Lista n.° 1: sistema de navegación simple

La mayoría de las veces, las listas se utilizan al crear un menú de navegación. Este código de ejemplo HTML/CSS le permite crear un sistema de navegación simple, incluso un poco modesto, pero atractivo.

Hogar
Blog
Acerca de
Contacto

/* LISTA #1 */ #lista1 ( ) #lista1 ul ( estilo de lista: ninguno; alineación de texto: centro; borde superior: 1px sólido #eee; borde inferior: 1px sólido #eee; relleno: 10px 0; ) #list1 ul li ( display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; ) #list1 ul li a ( text-decoration:none; color:#eee; ) #list1 ul li a: pasar el cursor (decoración de texto: subrayado;)

Lista #2: Usar una fuente diferente para la numeración

El problema de utilizar una lista es que se mezcla con el texto. Y los números son siempre del mismo color que el texto.
Pero agregue un poco de estilo y se olvidará de las limitaciones anteriores y sus listados serán mucho más atractivos. Así es como se hace:

Países Bajos es un país en...

Los Estados Unidos de América es un constitucional federal...

Filipinas oficialmente conocida como la República...

el reino unido de Gran Bretaña y...

/* LISTA #2 */ #lista2 ( ancho:320px; ) #list2 ol ( estilo de fuente:cursiva; familia de fuente:Georgia, Times, serif; tamaño de fuente:24px; color:#bfe1f1; ) #list2 ol li ( ) #list2 ol li p ( relleno:8px; estilo de fuente:normal; familia de fuente:Arial; tamaño de fuente:13px; color:#eee; borde izquierdo: 1px sólido #999; ) #list2 ol li p em ( mostrar:bloque; )

Lista #3: Imágenes de marcadores

Puede cambiar fácilmente la apariencia de los marcadores de listas desordenadas especificando uno de los valores estándar, pero también puede usar imágenes como marcadores. Esta solución ayudará a que tus listas sean más originales. Y aquí está el código:

Java
.NETO

/* LISTA #3 */ #list3 ( ) #list3 ul ( lista-estilo-imagen: url("../images/arrow.png"); color:#eee; font-size:18px; ) #list3 ul li (altura de línea: 30px;)

Lista #4: estilo iPhone

Esta lista está tomada del artículo Aplicación de contactos de iPhone, creada con CSS y jQuery. Así es como se ven las listas en iPhone. Muy atractivo, ¿no? ¿Quieres uno para tu sitio web?

toronto 2004
Pekín 2008
Londres 2012
Río de Janeiro 2016

/* LISTA #4 */ #lista4 (ancho:320px; familia de fuente:Georgia, Times, serif; tamaño de fuente:15px; ) #list4 ul (estilo de lista: ninguno; ) #list4 ul li ( ) #list4 ul li a ( pantalla:bloque; decoración de texto:ninguna; color:#000000; color de fondo:#FFFFFF; altura de línea:30px; estilo de fondo de borde:sólido; ancho de fondo de borde:1px; borde- color inferior:#CCCCCC; relleno-izquierda:10px; cursor:puntero; ) #list4 ul li a:hover (color:#FFFFFF; imagen de fondo:url(../images/hover.png); repetición de fondo :repeat-x; ) #list4 ul li a fuerte ( margen derecho: 10px; )

Lista n.º 5: listas anidadas

Las listas anidadas pueden ser increíblemente útiles y verse hermosas. Modificando la tercera técnica (Bullet Images), podemos crear una "lista ampliada". Por supuesto, no sin la ayuda de jQuery:

Google
1. Picasa
2. quemador de alimentación
3. YouTube
microsoft
1. Corporación Corel
2. Zignales
3. ByteTaxi
Yahoo!
1. Xoopit
2. BuzzTracker
3. MiBlogRegistro

/* LISTA #5 */ #lista5 ( color:#eee; ) #list5 ol ( tamaño de fuente:18px; ) #list5 ol li ( ) #list5 ol li ol ( lista-estilo-imagen: url(".. /images/nested.png"); relleno:5px 0 5px 18px; tamaño de fuente:15px; ) #list5 ol li ol li ( color:#bfe1f1; altura:15px; margen izquierdo:10px; )

Lista #6: Numeración romana + tipo multilínea

De forma predeterminada, la lista utiliza una numeración estándar (1, 2, 3, 4, etc.). Al cambiar el valor en CSS, puede especificar un tipo diferente de numeración, por ejemplo, romana.
Además, de forma predeterminada, la numeración y las viñetas se encuentran fuera de la lista (nuestra lista número 2 es un excelente ejemplo de esto). Pero esto se puede solucionar, solo necesita cambiar el valor de la propiedad list-style-position a inside.

Lorem ipsum dolor sit amet, ...
Fusce sentarse amet...
Aenean placerat lectus tristique...
Vivamus interdum...
Mauris eget sapien arcu, vitae...
Phasellus neque risus...
Lago Phasellus feugiat...
Duis rhoncus...

/* LISTA #6 */ #list6 ( font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; ) #list6 ol ( list-style-type: superior -roman; color:#eee; tamaño de fuente: 14px; posición-estilo de lista: dentro;

Lista #7: Lista lineal con elementos separados por comas

Normalmente, las listas se utilizan para mostrar la cantidad de algo y se muestran como una columna. Pero, ¿qué pasa si necesitas una lista lineal? Esto se logra cambiando el valor de la propiedad de visualización a en línea. Pero si de repente necesita incrustar una lista en el texto, entonces, de acuerdo con las reglas, los elementos de la lista deben estar separados por una coma. ¿Cómo lograr esto? Y, simplemente, usando el elemento :after del código simbólico.

Primer elemento en línea
Segundo elemento en línea
Tercer elemento en línea
Cuarto elemento en línea

/* LISTA #7 */ #list7 ( ) #list7 ul ( color:#eee; tamaño de fuente:18px; familia de fuentes:Georgia, Times, serif; ) #list7 ul li ( display: inline; ) #list7 ul li:después (contenido: ", ";) #list7 ul li.last:después (contenido: ".";)

Lista #8: Menú de navegación giratorio

Esta es la última técnica que requiere CSS3 para funcionar (solo compatible con las últimas versiones de Firefox, Safari y Chrome). Cuando pasas el cursor sobre uno de los elementos del bloque, se activa el efecto de rotación. Por supuesto que no es la forma más cómoda, pero sí muy bonita.

Hogar
Blog
Acerca de
Contacto

/* LISTA #8 */ #list8 ( ) #list8 ul ( estilo de lista:none; ) #list8 ul li ( familia de fuentes:Georgia,serif,Times; tamaño de fuente:18px; ) #list8 ul li a ( pantalla:bloque; altura:28px; borde izquierdo:5px sólido #222; borde derecho:5px sólido #222; #list8 ul li a:hover ( -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit -box-shadow:10px 10px 20px #000000; 10 píxeles 20 píxeles #000000;

Conclusión

Como puede ver, es posible crear cosas únicas a partir de una lista HTML normal. Y todo esto se hace usando CSS. Me alegra mucho que hayas aprendido muchas cosas interesantes por ti mismo.

Las listas son un elemento importante de una página web. Ayudan a estructurar la información y presentarla de forma fácil de usar. Además, los menús y las barras de navegación suelen estar diseñados como listas. Un grupo de propiedades le permite controlar la posición y apariencia del elemento de marcado.

Hay listas ordenadas y desordenadas. En el primero, cualquier símbolo que no cambie de un elemento a otro puede servir como marcador; en el segundo, cada elemento de la lista tiene su propio marcador que determina su ubicación entre los demás.

En las listas ordenadas se suelen utilizar números o letras de diferentes sistemas y alfabetos para marcar.

Dependiendo del grado de anidamiento, a menudo se distingue entre un solo nivel y cada nivel. Cada nivel suele tener su propio elemento de marcado.

La última versión del estándar HTML fomenta el uso de listas al crear menús o barras de navegación, ya que este elemento tiene un significado semántico importante.

Cada elemento es un contenedor de bloques con un tipo de visualización especial: elemento de lista. De forma predeterminada, este valor se establece para los elementos li ubicados dentro de los contenedores ul y ol y garantiza que el marcador aparezca antes del bloque.

Si es necesario, este tipo de visualización se puede configurar para cualquier contenedor HTML. Al elemento de etiqueta resultante se le aplica estilo utilizando el grupo de propiedades de estilo de lista CSS.

P ( mostrar: elemento de lista; tipo de estilo de lista: decimal; )

Las tres propiedades enumeradas a continuación las heredan los elementos secundarios que tienen display: list-item y requieren una anulación explícita si es necesario.

La primera propiedad del grupo es posición-estilo-lista. Determina si el marcador permanece en el bloque de texto o se mueve fuera de él.

La propiedad toma uno de dos valores:

adentro,
afuera.

La diferencia entre ellos es especialmente notable en los párrafos de varias líneas.

Lista1 (lista-estilo-posición: exterior;) .lista2 (lista-estilo-posición: interior;)

El valor predeterminado se establece en exterior y el marcador de lista se coloca fuera del límite del bloque.

La segunda propiedad, list-style-type, controla el tipo de elemento de etiqueta y puede tomar más de quince valores.

De forma predeterminada, una lista numerada utiliza números arábigos y una lista con viñetas utiliza puntos. Pero las propiedades de estilo de lista en CSS le permiten cambiar estas configuraciones e incluso eliminar las viñetas por completo.

Marcadores de lista desordenada:

disco: un punto normal, relleno con el color del texto;
círculo: un círculo vacío con un contorno del color del texto;
cuadrado - cuadrado relleno.

Para listas ordenadas hay muchas más opciones:

Valor de propiedad de tipo estilo de lista	alfa superior \| latín superior \| alto-romano \| ninguno
decimal	Numeración arábiga estándar, del uno en adelante: 1, 2, ..., 10, ...
cero decimal	utiliza números arábigos, los valores que constan de un carácter se complementan con un cero insignificante a la izquierda: 01, 02, ..., 10, ...
	Alfabeto latino: a, b, ... , e, ...
	letras mayúsculas: A, B, ... , E, ...
griego inferior	Alfabeto griego, caracteres en minúscula
bajo romano	Números romanos, indicados con caracteres en minúscula: i, ii, ... , vi, ...
romance superior	Números romanos, indicados con letras mayúsculas: I, II, ..., VI, ...
armenio	estilo de numeración armenio
georgiano	estilo de numeración georgiano
hebreo	estilo de numeración judío
	varios estilos de numeración japonesa, caracteres en minúscula
	varios estilos de numeración japonesa, caracteres mayúsculas
cjk-ideográfico	numeración ideográfica oriental

Algunos valores están duplicados, como alfa inferior y latín inferior, y otros no son compatibles con algunos navegadores y fuentes.

Si es necesario, los tokens de tipo ordenado se pueden aplicar a listas ul desordenadas y viceversa.

Por separado, debes resaltar el valor none, que oculta marcadores en una lista de cualquier tipo. Es especialmente útil al crear barras de navegación cuando desea conservar la semántica de la lista, pero las viñetas no encajan en el diseño. La propiedad también se utiliza a menudo para estilos personalizados.

Lista (tipo-estilo-lista: ninguno;)

En lugar de ciertos tipos CSS de elementos de marcado, puede utilizar cualquier imagen. Para hacer esto, debe pasarle un enlace a la propiedad list-style-image.

Incluso puedes utilizar imágenes en formato GIF: la animación se guardará. Es importante recordar que la imagen se muestra en tamaño real.

Lista (lista-estilo-imagen: url(imagen.jpg); altura de línea: 25px;)

Por ejemplo:

Además de los archivos de imagen, puedes utilizar las funciones CSS de degradados radiales o lineales:

Lista (lista-estilo-imagen: radial-gradiente(azul claro, aguamarina, azul);)

La forma del marcador sigue siendo cuadrada.

Todas las propiedades que determinan la visualización de un marcador de lista se pueden combinar en una sola: el estilo de lista CSS.

Estilo de lista: estilo de lista-tipo de estilo de lista-posición de estilo de lista-imagen de estilo de lista

Las propiedades específicas se enumeran separadas por un espacio; no se puede alterar su orden, pero se puede omitir cualquiera de ellas:

Lista1 (estilo de lista: ninguno;) .list2 (estilo de lista: interior romano superior;) .list3 (estilo de lista: dentro de url(/images/img1.png);)

Para restablecer los estilos a su configuración original, existe un valor inicial que se puede pasar a cualquiera de las cuatro propiedades enumeradas.

Al utilizar un grupo en combinación con efectos de desplazamiento, puede crear listas hermosas y únicas que capten la atención del usuario.

Hola, queridos lectores del blog. Hoy habrá otro artículo en la alcancía. Se centrará en el diseño utilizando las reglas de las hojas de estilo en cascada. Aquí todo es muy sencillo, pero aún así decidí dedicar un post aparte a este tema.

Un poco antes ya logramos descubrir cómo, cómo y con qué se puede trabajar. Bueno, un poco antes analizamos en detalle todos los tipos y sus diversas combinaciones para indicar exactamente qué elemento de código HTML al que se deberán aplicar ciertas propiedades de estilo.

Entonces, en el lenguaje de marcado de estilo hay tres reglas separadas que comienzan con el estilo de lista, que sirven para personalizar la apariencia de las listas (numeradas o con viñetas) en el código de los documentos web. Además, existe una regla de estilo de lista CSS prefabricada, que le permite reducir ligeramente la cantidad de código. Pero primero lo primero.

Lo que consideraremos ahora se puede utilizar tanto para elementos Html LI como para elementos Ul y Ol (listas con viñetas y numeradas, respectivamente). ¿Cuál será la diferencia entre usar el estilo de lista para estas etiquetas?

De hecho, puedes saber si una propiedad se hereda o no en el sitio web del validador (léelo en el enlace proporcionado) en la sección dedicada a la especificación de hojas de estilo en cascada. En la columna "Heredado", aparecerá "Sí" frente a las reglas heredadas:

Empecemos con tipo de estilo de lista, que le permite configurar el tipo de marcado para elementos individuales de la lista HTML. Los siguientes valores son válidos para esta regla:

Ninguno: no se realizará ninguna marca (list-style-type:none; se aplica a este elemento y, por lo tanto, no tiene marcador)
El disco es un círculo relleno (tipo de estilo de lista: disco; se usa para esta línea)
Círculo - círculo como marcador
Cuadrado: un cuadrado como marcador
Decimal: números arábigos (tipo de estilo de lista: decimal;)
lower-alpha - letras latinas minúsculas
alfa superior: letras latinas mayúsculas
low-roman - números romanos en minúscula
Upper-roman: números romanos en mayúsculas.

¿Qué crees que se utilizó para crear la lista de arriba, Ul u Ol? Una pregunta rápida. Resulta que esto ya no es importante, aunque en este caso particular usé Ol, pero al cambiarlo a Ul, la apariencia seguirá siendo la misma, porque está establecida para cada elemento por su propio valor CSS del tipo de estilo de lista. regla.

De hecho, Ul y Ol difieren sólo en su comportamiento predeterminado (marcas Ul y números Ol). Pero si lo desea, puede convertir fácilmente un estilo de lista en otro usando el tipo de estilo de lista. La fuente utilizada para marcar números o letras es exactamente la misma que definió para el contenido de las etiquetas LI. Por ejemplo, al cambiar el color de fuente de la lista cambiaremos y color del marcador:

Se cambió el color del texto (tipo de estilo de lista: romano inferior; color: rojo) y se cambió el color del marcador.

Sigamos con la siguiente propiedad CSS: posición-estilo-lista. Utilizándolo, puede establecer la posición (ubicación) del área con el marcador. Sólo hay dos valores posibles para ello:

Aquellos. Básicamente, en list-style-position indicamos dónde se debe colocar el área con marcadores: fuera del elemento LI (afuera) o dentro (adentro). Por defecto, el área con el marcador está fuera de límites, es decir. se utiliza el valor exterior.

Veamos esto con un ejemplo. En el primer elemento de la lista, escribiré específicamente list-style-position:inside y veremos qué sucede:

Todo está por defecto aquí.
Así es como se verá colocar un área de marcador con el interior. Tenga en cuenta que la segunda línea de este elemento y el marcador están ubicados en el mismo nivel.
Todo está por defecto aquí.

A continuación tenemos List-style-image: le permite especificar una imagen que se utilizará como marcador. Esta regla está configurada en Ninguno de forma predeterminada (es decir, no se utiliza ninguna imagen como marcador), pero puede escribir la funcionalidad Url() especificando la ruta a la imagen, que posteriormente actuará como marcador en esta lista:

Podría verse así:

Imagen-estilo-lista: url(https://site/images/list_star.png);

Todo está por defecto aquí.
Así es como se vería usar una imagen como marcador. Está claro que puedes elegir una imagen más adecuada para este propósito.
Por ejemplo, como aquí.

Como recordarás, en el artículo sobre dije que las imágenes pertenecen a elementos en línea (en realidad, para el navegador esta es la misma letra, pero a veces muy grande).

Aquí la imagen ocupa el lugar del marcador (letras o números). En este caso, la altura de la línea con el elemento de la lista aumentará si inserta una imagen grande como marcador (como sucedió en el segundo elemento del ejemplo anterior).

En la funcionalidad de imagen de estilo de lista, puede especificar ambas imágenes. Si la imagen no se carga, se utilizará el marcador o la numeración predeterminados, o lo que se especifica en el tipo de estilo de lista para este elemento de lista.

Para escribir las tres reglas CSS descritas anteriormente en una sola, puede usar el estilo Lista, que es prefabricado para diseñar listas. No importa el orden en que se especifican los valores. Aquellos valores que no especifique en el estilo Lista serán interpretados explícitamente por el navegador con valores predeterminados.

¿Dónde puedo ver los valores predeterminados? Sí, está todo ahí, en la especificación CSS del validador W3C en la columna "Valor inicial" frente a las propiedades que le interesan:

Los valores de las propiedades individuales en la regla prefabricada de estilo Lista están separados por espacios. La ubicación, como ya hemos dicho, no es importante:

En la práctica podría verse así:

Estilo de lista: dentro de la URL superior romana (https://site/images/list_star.png);

Puede utilizar valores en cualquier orden y en cualquier número (empezando por uno). Por cierto, los menús se crean con mayor frecuencia en sitios web utilizando listas, y la propiedad Estilo de lista se utiliza para para eliminar marcadores de las listas de menú, que allí son completamente innecesarios:

Tipo de estilo de lista: ninguno;

Estilo de lista: ninguno;

¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.

Puedes ver más vídeos entrando a

Propiedad "LISTA-ESTILO-TIPO"
Usando la regla "tipo de estilo de lista", puede establecer el tipo de marcador, por ejemplo, para mostrar números, letras, cuadrados, círculos, etc.

Propiedad:

ninguno – sin marcador

- listas con viñetas:

disco– un marcador en forma de círculo relleno;
círculo– un marcador en forma de círculo abierto;
cuadrado– un marcador en forma de cuadrado relleno;

- listas numeradas:

decimal– números decimales ordinarios (1,2,3,4,5, etc.);
romance superior– números romanos grandes (I, II, III, IV, V, etc.);
bajo romano– números romanos pequeños (i, ii, iii, iv, v, etc.);
alfa superior– letras mayúsculas (A, B, C, D, E, etc.);
alfa inferior– letras minúsculas (a,b,c,d,e, etc.)

Li ( lista-estilo-tipo: círculo; /* Marcadores en forma de círculo abierto */ )

Ejemplo completo:

Conceptos básicos de CSS

texto número 1
texto número 2

Resultado:

Si necesita eliminar un marcador de la lista, utilice la propiedad "ninguno":

Li (tipo-estilo-lista: ninguno; /* Eliminar marcadores */ )

Resultado:

Propiedad "LISTA-ESTILO-POSICIÓN »
La regla "posición-estilo-lista" se puede utilizar para especificar la posición del marcador.

Propiedad:

afuera– fuera del bloque principal de la lista;
adentro– dentro del bloque principal de la lista.

Li ( posición-estilo-lista: interior; /* posición del marcador */ )

Propiedad "COLOR »
Ya conoces la regla del “color”, con la que no sólo puedes cambiar el color del texto, sino también el color del marcador. Échale un vistazo.

Listar propiedades en CSS

Texto nº 1
Texto nº 2

Resultado:

Propiedad "LISTA-ESTILO-IMAGEN »
Si no le gusta el aspecto estándar de las listas numeradas o con viñetas, puede utilizar la regla "lista-estilo-imagen" y utilizar viñetas con imágenes en lugar de viñetas normales.

Sintaxis:

Imagen-estilo-lista: url(imagen.png);

LI ( lista-estilo-imagen: url("marker1.png"); /* imagen del marcador */ )

“marker1.png” es la imagen del marcador.

Resultado:

Propiedad "PADDING-LEFT"
Si necesita sangrar desde la viñeta hasta el texto, utilice la regla de "relleno hacia la izquierda".

Li ( padding-left: 30px; /* Sangría del marcador al texto */ )

Resultado:

ninguno, disco, círculo, cuadrado, decimal, alfa inferior, alfa superior, romano inferior, romano superior

latín inferior, latín superior, griego inferior, armenio, georgiano

cero decimal

Numerar la lista desde cualquier número.
No es necesario que lo sepas, pero decidí hacer un regalo para quienes leyeron hasta aquí. Si necesita numerar la lista no desde 1, sino, por ejemplo, desde 6, puede hacer lo siguiente:

Li ( list-style-type: none; /* Elimina la numeración inicial de la lista */ ) ul ( counter-reset: list 5; /* Inicia el contador */ ) ul li:before ( counter-increment: list; /* Aumentar el valor del contador */ content: counter(list) "." /* Genera el número */ )

Resultado: