Propiedades de las listas en CSS

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.

Tabla 8.1: Propiedades de las listas

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 outside; }
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

---

0

---

0

Comprueba tu aprendizaje