Tutorial de CSS - Temarios

Las listas se utilizan para enumerar una serie de elementos, se utiliza el elemento HTML ul (Unordered List), y cada item de la lista con el elemento HTML li (List Item).

Las CSS nos permiten configurar las listas por medio de tres propiedades:

list-style-type
list-style-position
list-style-image

A list-style-type puede asignársele alguno de estos valores:

none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha

Los valores de list-style-position:

inside
outside

Los valores de list-style-image:

none
url

Veamos un ejemplo que prueba todos los valores posibles que puede tomar la propiedad list-style-type:

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul class="vacio">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="circulorelleno">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="circulovacio">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="cuadrado">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="decimal">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="romanominuscula">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="romanomayuscula">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="letrasminusculas">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
<ul class="letrasmayusculas">
  <li>Brasil</li>
  <li>Uruguay</li>
  <li>Argentina</li>
</ul>
</body>
</html>

Luego la hoja de estilo es:

.vacio{
  list-style-type:none;
}
.circulorelleno{
  list-style-type:disc;
}
.decimal{
  list-style-type:decimal;
}
.romanominuscula{
  list-style-type:lower-roman;
}
.romanomayuscula{
  list-style-type:upper-roman;
}
.circulovacio{
  list-style-type:circle;
}
.cuadrado{
  list-style-type:square;
}
.letrasminusculas{
  list-style-type:lower-alpha;
}
.letrasmayusculas{
  list-style-type:upper-alpha;
}

Hemos definido un conjunto de clases para aplicarlas a las listas de HTML.

18 - Propiedades relacionadas a listas.

Retornar