PDF de programación - Edición HTML - Estilos CSS - Listas

MINISTERIO
DE EDUCACIÓN
Y CIENCIA

SECRETARÍA GENERAL
DE EDUCACIÓN
Y FORMACIÓN PROFESIONAL

DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA

Edición HTML

Estilos CSS

Listas

C/ TORRELAGUNA, 58
28027 - MADRID

Índice de contenido

Formateo de listas con CSS................................................................................................. 3
Tipos de indicadores de elementos.................................................................................. 3
Posición............................................................................................................................ 3
Imagen como marcador .................................................................................................. 4
Listas inline........................................................................................................................... 4

Estilos CSS – Listas

2 de 5

FORMATEO DE LISTAS CON CSS
FORMATEO DE LISTAS CON CSS

Respecto a las listas son tres las propiedades que podemos modificar: el tipo de marcador
utilizado, su posición respecto al texto y la posibilidad de utilizar una imagen como
marcador. En el editor de CSS de N|VU podrás acceder a estas propiedades dentro de la
pestaña lista.

Además de ello vamos a considerar una cuestión muy importante para la elaboración de
menús: la forma de presentarlas. Baste avanzar que las listas son, por naturaleza, un
elemento en bloque, pero podremos modificar esa construcción por defecto para conseguir
algunos efectos interesantes.

TIPOS DE INDICADORES DE ELEMENTOS
TIPOS DE INDICADORES DE ELEMENTOS
Propiedad: list-style-type
Valores: Son todos los establecidos por la especificación HTML 4.01 tal como se muestra en el
ejemplo. A todos ellos habría que añadirle none que elimina la marca de la lista, aunque no se
ha incluido en el ejemplo en la zona de listas numeradas porque no parece tener mucho
sentido poner una lista ordenada sin que se vean los indicadores de orden. Además de
estos hay también definida una lista de posibilidades en otros idiomas para las listas
ordenadas.

POSICIÓN
POSICIÓN
Propiedad: list-type-position
Valores: Con el valor outside, que es el que se aplica por defecto, el indicador de la lista se
colocará tal como hemos visto en los ejemplos previos fuera del bloque formado por el texto
del elemento, mientras que con inside se integrará en el primer renglón del elemento
Ejemplos:

Se ha utilizado también un color de fondo para mostrar cómo la posición inside se integra
dentro del cuadro formado por el elemento, mientras que si el marcador tiene el valor outside
queda fuera del mismo.

Estilos CSS – Listas

3 de 5

IMAGEN COMO MARCADOR
IMAGEN COMO MARCADOR
Propiedad: list-style-image
Valores: habrá que indicar la situación de la imagen con la sintaxis url(ruta_hacia_la_imagen)

Ejemplos:



Cualquiera de las tres propiedades puede aplicarse a un ítem en particular <li> o
a toda la lista <ul> u <ol> según corresponda. La aplicación como propiedad de la
lista, bien sea en una hoja externa o interna, resulta siempre mucho más cómoda puesto
que garantiza la herencia y nos evita tener que repetir las propiedades en cada uno de
los elementos.

LISTAS INLINE
LISTAS INLINE

Ya hemos comentado al inicio que las listas son, por naturaleza, un elemento en bloque, ya
que generan un salto de línea previo y otro posterior, creando su propia caja.

Sin embargo puede haber muchos momentos en los que no nos interese que la lista aparezca
en vertical, sino que preferiríamos que sus ítems aparecieran en horizontal, como en el
siguiente ejemplo:

Para obtener este efecto hemos tenido que crear tres propiedades:

1. Eliminar los indicadores mediante list-style-type:none
2. Hacer que todos los elementos se muestren en línea, uno a continuación del otro
3. Establecer una separación entre los ítems de la lista para que no formen una sucesión

continua de caracteres.

Podríamos haber aplicado primera regla a la lista completa, y las otras dos a cada item,
pero como también la primera se puede aplicar a cada uno de ellos lo hemos solucionado
creando la siguiente regla y aplicándole la clase enlinea solo una vez a la lista <ul>
.enlinea li {list-style-type: none; display: inline; margin-right: 3em;}
De esta forma, cada elemento li "hijo" de la clase enlinea recogerá las tres reglas y sólo
habremos puesto el selector de la clase en una etiqueta.

Cuando estudies las técnicas CSS verás que el formateo de listas tiene una gran aplicación
para la creación de menús que, si lo pensamos detenidamente, no son más que listas de
opciones.

Estilos CSS – Listas

4 de 5

•

Investiga las posibilidades de las listas e incorpóralas a tu hoja de estilo si lo
consideras conveniente. En las técnicas encontrarás que es uno de los elementos
que más se utiliza para crear menús con la apariencia más insospechada.

Estilos CSS – Listas

5 de 5