Búsqueda personalizada
 
 
 
 
Propiedades relacionadas a listas
 

Las listas se utilizan para enumerar una serie de elementos, se utiliza la marca HTML ul (Unordered List), y cada item de la lista con la marca 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 asignrsele alguno de estos valores:

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

o podemos configurar en forma independiente cada lado:

padding-top
padding-right
padding-bottom
padding-left

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:

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

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

Lo que podemos ver es que cuando definimos las clases, le antecedemos al punto, el nombre de la marca donde se aplica dicha clase (en este caso ul, es decir que esta clase slo tiene sentido aplicarla a dicha marca).

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion