Las propiedades CSS (listas)

Las propiedades CSS que controlan la forma en que vemos una lista son pocas pero suelen ser una de las más engorrosas a la hora de controlar el diseño de una página web ya que los navegadores suelen entenderlas de maneras distintas.

Hay tres propiedades básicas:

list-style-type establece el aspecto gráfico de las listas y utiliza marcadores predefinidos.

sintaxis en HTML
elemento {list-style-type: valor;}
por ejemplo: ul {list-style-type: circle;}

sintaxis en JAVASCRIPT
elemento.style.listStyleType='valor';
por ejemplo: this.style.listStyleType='circle';

Por defecto, su valor es disc y hay una serie de marcadores que podemos utilizar aunque no todos los navegadores los aceptan: disc, circle y square se usan en listas desordenadas (UL). En las lista ordenadas (OL) las variantes son muchas:

decimal números decimales (1 2 3 4 5 ...)
decimal-leading-zero números decimales formateados (01 02 03 ...)
upper-roman números romanos en mayúscula (I, II, III, IV, V, ...)
lower-roman números romanos en minúscula (i, ii, iii, iv, v, ....)
lower-alpha o lower-latin letras en minúscula (a, b, c, d, e, ...)
upper-alpha o upper-latin letras en mayúscula (A B C D E ...)
lower-greek algfabeto griego (alpha beta, gamma, ...)

Otros valores se utilizan para idiomas específicos: cjk-ideographic, hebrew, armenian, georgian, hiragana, katakana, hiragana-iroha, katakana-iroha.

Si no queremos que se muestre un marcador, el valor es none.

Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

La propiedad list-style-type puede ser aplicada a cualquier elemento aunque no sea una lista. Para esto, se debe establecer la propiedad display como list-item y el elemento debe tener un margen izquierdo no menor de 30 puntos.

Este es un párrafo normal.

El mismo párrafo mostrado como lista.

<p style="display:list-item;list-style-type:circle;margin-left:30pt;">
... el texto ...
</p>

list-style-position establece la posición relativa del marcador con respecto al contenido.

sintaxis en HTML
elemento {list-style-position: valor;}
por ejemplo: ul {list-style-position: inside;}

sintaxis en JAVASCRIPT
elemento.style.listStylePosition='valor';
por ejemplo: this.style.listStylePosition='inside';

Tiene dos valores posibles, outside (el valor por defecto) e inside.

Con el primero, el marcador se ubica afuera del texto y si este ocupa varias líneas, los textos se alinean uno debajo del otro. Con el segundo, el marcador de ubica dentro el texto, como si fuera un carácter más.

Al igual que la anterior, puede ser aplicada a cualquier elemento aunque no sea una lista.

Item 1 Item 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

La propiedad list-style-image nos permite definir un marcador personalizado, reemplazándolo por una imagen.

sintaxis en HTML
elemento {display: url();}
por ejemplo: ul {list-style-image: url(direccionImagen);}

sintaxis en JAVASCRIPT
elemento.style.listStyleImage='valor';
por ejemplo: this.style.listStyleImage='url(direccionImagen)';

Los valores posibles son none (el valor por defecto) o la dirección URL de la imagen a utilizar.

Si la imagen no es accesible, es reemplazada por el marcador establecido en la propiedad list-style-type.

Debe tenerse en cuenta que el margen izquierdo no debe ser cero y para que funcione correctamente, debe ser superior o igual a 30 puntos.

Item 1 Item 2 Item 3 Item 4 Item 5

La propiedad list-style es una forma de establecer todos los valores en una sola instrucción.

sintaxis en HTML
elemento {list-style: listStyleType listStylePosition listStyleImage;}
por ejemplo: ul {list-style: circle inside none;}

sintaxis en JAVASCRIPT
elemento.style.listStyle='valores';
por ejemplo: this.style.listStyle='circle inside none';

Aunque start no es una propiedad CSS sino un atributo de la etiqueta OL, vale la pena agregarla a la lista. Con ella, podemos establecer el inicio del contador de una lista ordenada que, por defecto es 1.

sintaxis en HTML
OL start="valor"
por ejemplo: <ol start="10">

sintaxis en JAVASCRIPT
OL.start='valor';

Una lista normal:

1. Item 1
2. Item 2
3. Item 3
   

Una lista que comienza con otro valor:

14. Item 1
15. Item 2
16. Item 3
    

Esto, funciona con cualquier tipo de marcador, incluyendo upper-roman:

14. Item 1
15. Item 2
16. Item 3

O incluso con los tipos alfabéticos:

14. Item 1
15. Item 2
16. Item 3

SUMARIO:

Las propiedades CSS (background)

Las propiedades CSS (border)

Las propiedades CSS (margin, padding y outline)

Las propiedades CSS (textos 1ª parte)

Las propiedades CSS (textos 2ª parte)

Las propiedades CSS (textos 3ª parte)

Las propiedades CSS (tamaño y ubicación)