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>
<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