Mis apuntes de desarrollo web </>

Tipo de estilo de listas:

La propiedad list-style-type establece el marcador (como un disco, carácter o estilo de contador personalizado) de un elemento de elemento de lista. Admite los siguientes valores:

• none: No se muestra ningún marcador de artículo.
  • Item 1
  • Item 2
  • Item 3
• disc: Un círculo relleno (valor predeterminado).
  • Item 1
  • Item 2
  • Item 3
• circle: Un círculo hueco.
  • Item 1
  • Item 2
  • Item 3
• square: Un cuadrado lleno.
  • Item 1
  • Item 2
  • Item 3
• decimal: Números decimales, comenzando con 1.
  1. Item 1
  2. Item 2
  3. Item 3
• decimal-leading-zero: Números decimales, rellenados con ceros iniciales.
  1. Item 1
  2. Item 2
  3. Item 3
• lower-roman: Números romanos en minúscula.
  1. Item 1
  2. Item 2
  3. Item 3
• upper-roman: Números romanos en mayúsculas.
  1. Item 1
  2. Item 2
  3. Item 3
• lower-alpha, lower-latin: Letras ASCII minúsculas.
  1. Item 1
  2. Item 2
  3. Item 3
• upper-alpha, upper-latin: Letras ASCII mayúsculas.
  1. Item 1
  2. Item 2
  3. Item 3
• Muchos otros

Posición del marco:

La propiedad list-style-position establece si los marcos aparecen dentro de los elementos de la lista o fuera de ellos antes del inicio de cada elemento. Sus valores son:

• inside: Los marcos se ubican a dentro de los elementos de la lista.
  • Item 1
  • Item 2
  • Item 3
• outside: Los marcos se ubican fuera de los elementos de la lista.
  • Item 1
  • Item 2
  • Item 3

pseudo-elemento ::marker

Selecciona el cuadro de marcador de un elemento de lista, que normalmente contiene una viñeta o un número.

• Item 1
• Item 2
• Item 3

Usar una imagen como marco:

La propiedad list-style-image permite usar una imagen personalizada para el marco de los elementos de lista.

• Item 1
• Item 2
• Item 3

Sin embargo, esta propiedad está un poco limitada en términos de controlar la posición, tamaño, etc. de los marcos, por lo que es mejor:

1. Establer el padding-left a 20px tanto en la lista como en los elementos de la lista. Sin esto, las imágenes de fondo se superpondrían con el texto del elemento de la lista, lo que se vería desordenado.
2. list-style-type: none. Para que no aparezca ningun marco de forma predeterminada.
3. En los elementos de la lista:
   1. background-image: Hacer referencia a la url de imagen que desea utilizar como marco.
   2. background-position: Esto define en qué parte del fondo del elemento seleccionado aparecerá la imagen; al definirlo como: 0 0, la imagen aparecerá en la parte superior izquierda de cada elemento de la lista.
   3. background-size: Establece el tamaño de la imagen de fondo. Lo ideal es que los marcos tengan el mismo tamaño que los elementos de la lista (o que sean un poco más pequeñas o más grandes).
   4. background-repeat: De forma predeterminada, las imágenes de fondo se repiten hasta que ocupan el espacio de fondo disponible. Solo se quiere insertar una copia de la imagen en cada caso, por lo que se establece esto en un valor de no-repeat.

• Item 1
• Item 2
• Item 3

@counter-style:

@counter-style permite definir estilos de contador que no forman parte del conjunto predefinido de estilos.

Cada @counter-style se identifica con un nombre y tiene un conjunto de descriptores.

system:

Especifica el algoritmo que se utilizará para convertir el valor entero de un contador en una representación de cadena.

prefix:

Especifica un símbolo que debe anteponerse a la representación del marcador. Los prefijos se agregan a la representación en la etapa final, por lo que en la representación final del contador, viene antes del signo negativo.

suffix:

Especifica, de forma similar al descriptor de prefijo, un símbolo que se adjunta a la representación del marcador. Los sufijos vienen después de la representación del marcador.

range:

Define el rango de valores sobre los que se aplica el estilo de contador. Si se usa un estilo de contador para representar un valor de contador fuera de sus rangos, el estilo de contador volverá a su estilo alternativo.

symbols:

Especifica los símbolos que se utilizarán para las representaciones de marcador. Los símbolos pueden contener cadenas, imágenes o identificadores personalizados.

descriptor system

Valor	Descripción	Ejemplo	Resultados
cyclic	Recorre la lista de símbolos proporcionados. Una vez que se llega al final de la lista de símbolos, volverá al principio y comenzará de nuevo. Se debe especificar al menos un símbolo en el descriptor symbols, o el estilo de contador no es válido.		Item 1 Item 2 Item 3 Item 4
fixed	Define un conjunto finito de símbolos especificados. Una vez que el sistema haya recorrido todos los símbolos especificados, retrocederá. También se puede especificar un número entero opcional después del sistema, como el valor del primer símbolo. Si se omite este entero, el valor del primer entero se toma como 1.		Item 1 Item 2 Item 3 Item 4
symbolic	Recorre la lista de símbolos proporcionada. En cada paso sucesivo por el ciclo, los símbolos utilizados para la representación del contador se duplican, triplican, etc.		Item 1 Item 2 Item 3 Item 4
alphabetic	Interpreta los símbolos especificados como dígitos, en un sistema de numeración alfabético. Si los caracteres "a" a "z"se especifican como símbolos en un estilo de contador, con el sistema alphabetic, las primeras 26 representaciones de contador serán "a", "b" hasta "z". Hasta este punto, el comportamiento es el mismo que el del sistema symbolic. Sin embargo , después "z" seguirá como "aa", … "ab" "ac"		Item 1 Item 2 Item 3 Item 4
numeric	Interpreta los símbolos del contador como dígitos en un sistema de numeración de valor posicional. El sistema numérico es similar al alphabetic. La principal diferencia es que en el alphabetic, el primer símbolo de contador dado en el symbols se interpreta como 1, y en el sistema numeric, el primer símbolo de contador se interpreta como 0.		Item 1 Item 2 Item 3 Item 4
additive	Se utiliza para representar sistemas de numeración de "valor de signo", como los números romanos, que en lugar de reutilizar dígitos en diferentes posiciones para obtener valores diferentes, definen dígitos adicionales para valores más grandes. El valor de un número en dicho sistema se puede encontrar sumando los dígitos del número.
extends	Permite usar el algoritmo de otro estilo de contador, pero alterando sus otros aspectos. Si una regla de estilo de contador está utilizando extends, cualquier descriptor no especificado y sus valores se tomarán del estilo de contador extendido especificado. Si el nombre de estilo de contador especificado en extends no es un nombre de estilo de contador definido actualmente, se extenderá desde el estilo de contador decimal.