CSS - Lección 6: Diseñando listas
Con las hojas de estilo podemos diseñar nuestras listas de forma muy flexible. Por ejemplo, no estaremos limitados a listas verticales; sino que podemos transformarlas en listas horizontales.
Esto es útil para hacer barras de navegación que respeten los estándares web. Así, se pueden meter una serie de enlaces de navegación en una lista y transformar ésta en una lista horizontal.
Antes de nada, y como es costumbre, veamos las propiedades para diseñar listas:
| Propiedades css para listas | |
|---|---|
list-style-type |
Para especificar el tipo de marcador para cada elemento |
list-style-image |
Para implementar una imagen como marcador |
list-style-position |
Para situar el marcador dentro del texto o en el margen |
display |
Disponer los elementos horizontalmente |
Por defecto, en las listas ordenadas cada elemento viene identificado por un número por defecto. Con la propiedad list-style-type podemos cambiar esto y hacer que la ordenación sea alfabética o mediante numeración romana. Los valores que puede adoptar esta propiedad son: decimal (por defecto), lower-alpha, upper-alpha, lower-roman y upper-roman.
Figura 5. Direfentes valores para la propiedad
list-style-type en listas ordenadas.
En cuanto a los valores que pueden tener los elementos de una lista desordinada para la propiedad list-style-type son: disc (por defecto), circle y square. Existe otro valor que poseen las dos clases de listas, se trata de none, y sirve para que no aparezca símbolo alguno en cada elemento.
También tenemos la posibilileco usar ninguno de los marcadores vistos, sino el que nosotros queramos por medio de una imagen. Así, es posible establecer como marcador una imagen. Para ello tenemos que utilizar la propiedad list-style-image. Solo sirve para listas desordenadas como es lógico.
ul { list-style-image:url("imagenes/rombo.gif"); }
El código anterior nos habilitaría una imagen como marcador en todas las listas desordenadas de nuestras páginas. El valor que toma la propiedad indica que se use la imagen rombo.gif situada en la carpeta imagenes. Para poner un valor, siempre hay que poner "url" y, entre paréntesis, el destino del archivo a enlazar.
Figura 6. Se pueden poner imágenes
como marcadores.
Si observas, los marcadores siempre se quedan a la izquierda, ocupando el margen izquierdo del texto. Podemos cambiar esto con la propiedad list-style-position, cuyos valores posibles son outside (por defecto) y inside. Así podremos hacer que los marcadores se coloquen a la altura del texto.
Figura 7. Efecto en una lista para los dos valores de la
propiedad list-style-position.
Por último decir que podemos mostrar listas en las que los elementos se dispongan de forma horizontal. para ello nos valdremos de la propiedad display, dándole un valor de inline. Existen muchas más propiedades para dar diseño a las listas, pero aún no las veremos para no complicar el aprendizaje.
Ir a:
