Tabla de contenidos
8. Propiedades de las listas
Las propiedades CSS de las listas son las que nos permiten controlar los estilos de los marcadores y la posición de los elementos dentro de las listas. En la tabla 8.1 se muestran las propiedades de las listas más utilizadas.
| Propiedad | Descripción | Valores |
|---|---|---|
list-style-type |
Estilo aplicable a los marcadores visuales de las listas | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none |
list-style-image |
Imagen aplicable a los elementos de las listas | url(“…”) | none |
list-style-position |
Posición del marcador dentro de la lista | inside | outside |
list-style |
Permite establecer varios estilos de la lista en una sola propiedad | list-style-type | list-style-position | list-style-image |
8.1. List-style-type
.a {list-style-type: circle;}
.b {list-style-type: square;}
.c {list-style-type: upper-roman;}
.d {list-style-type: lower-alpha;}
0
8.2. List-style-image
ul.a { list-style-image: url('https://i.racjonalista.pl/img/em/lol.gif'); }
ul.b { list-style-image: url('https://media.giphy.com/media/tBik70kZOJKOk/giphy.gif'); }
0
8.3. List-style-position
ul.a { list-style-position: outside; }
ul.b { list-style-position: inside; }
0
8.4. List-style
ul.a { list-style: square inside; }
ul.b { list-style: circle inside; }
0
Ejercicio propuesto
Convierte una lista <ul> en una botonera horizontal.
<ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> </ul>
Gracias a los estilos podemos convertir una lista <ul> en una botonera horizontal, en una galería de fotos u en otros elementos. En el siguiente ejemplo puedes ver una barra de navegación bastante típica que puedes encontrar en cualquier web.
Presta atención a que no se han utilizado clases, sólo se ha necesitado hacer uso de selectores etiqueta y selectores descendientes. Además fíjate que gracias al padding que se le ha incluido en los enlaces, serían perfectamente pulsables.
0