Listas con CSS
El objetivo de este artículo es definir que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, números romanos, un pequeño gráfico, etc.
Las propiedades de las listas nos permiten establecer el estilo de las mismas, la imagen, número o letra de los diferentes Items y la posición de la misma.
Por ejemplo, podríamos definir una lista con una imagen como icono de los elementos de la lista aplicando el siguiente estilo o regla CSS:
<style type="text/css">
ul{list-style-image: url('punto.gif')}
</style>
Donde estamos indicando que nuestras listas tengan la imagen «punto.gif» como icono de los elementos.
También tenemos las siguientes opciones:
| Propiedad | Descripción | Valores | Detalles | |
|---|---|---|---|---|
| list-style | Permite establecer el estilo de la lista, la imagen y/o la posición. | list-style-type | Tipos de listas | |
| list-style-position | Posición de la lista | |||
| list-style-image | Imagen de la lista | |||
| list-style-type | Estilo aplicable a los marcadores visuales de las listas. | disc | Disco | |
| circle | Círculo | |||
| square | Cuadrado | |||
| decimal | Nro.decimal | |||
| decimal-leading-zero | Nro.decimal comenzando de 0 No funciona en IE 5, 6 y 7 |
|||
| lower-roman | Nro.romano minúscula | |||
| upper-roman | Nro.romano mayúscula | |||
| lower-greek | Letra griega minúscula No funciona en IE 5, 6 y 7 |
|||
| lower-latin | Letra latina minúscula No funciona en IE 5, 6 y 7 |
|||
| upper-latin | Letra latina mayúscula No funciona en IE 5, 6 y 7 |
|||
| armenian | Letra armenia No funciona en IE 5, 6 y 7 |
|||
| georgian | Letra gregoriana No funciona en IE 5, 6 y 7 |
|||
| lower-alpha | Letra alfabeto en minúscula | |||
| upper-alpha | Letra alfabeto en mayúscula | |||
| none | Nada | |||
| list-style-image | Imagen aplicable a los elementos de las listas. | URL | URL | |
| none | Nada | |||
| list-style-position | Posición dentro de la lista de los elementos marcadores de las listas. | inside | Dentro | |
| outside | Fuera |
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Deja una respuesta