Temas > Programacion > Css > Propiedades relacionadas a listas en HTML
Julio

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 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:
<?//esto no va
<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>
?>//esto no va
Luego la hoja de estilo es:
<?//esto no va
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;
}
?>//esto no va
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 sólo tiene sentido aplicarla a dicha marca).













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar