Es muy fácil cambiar el aspecto de nuestras listas numeradas y con viñetas haciendo uso de nuestro buen amigo CSS. A continuación doy varios ejemplos de esto.
Sin estilos
Las siguientes son dos listas que no tienen definido ningún tipo de estilo, tal como las muestran los navegadores por defecto. Las primeras son numeradas, usando <ol>, y las segundas son listas con viñetas, usando <ul>:
<ol>
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ul>
<li>Rojo</li>
<li>Verde</li>
<li>Lila</li>
</ul>
|
|
Tipo de Viñeta
Para cambiar el tipo de viñeta a mostrar (por defecto el círculo negro y los números decimales) se usa la propiedad
list-style-type.
Sus valores posibles pueden ser de tres tipos: numéricos y alfabéticos (ambos para <ol>) ó gráficos (para <ul>):
valores numéricos | decimal | decimal-leading-zero | lower-roman | upper-roman | armenian | georgian
|
valores alfabéticos | lower-latin | upper-latin | lower-alpha | lower-greek |
valores gráficos | circle | square | disc |
Si no se desea usar ninguna viñeta, se debe emplear el valor
none.
Los siguientes son ejemplos usando cada uno de ellos.
<ol style="list-style-type: decimal;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: decimal-leading-zero;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: lower-roman;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: upper-roman;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: armenian;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: georgian;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: lower-latin;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: upper-latin;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: lower-alpha;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ol style="list-style-type: lower-greek;">
<li>Perro</li>
<li>Gato</li>
<li>Pato</li>
</ol>
|
- Perro
- Gato
- Pato
|
<ul style="list-style-type: disc;">
<li>Rojo</li>
<li>Verde</li>
<li>Lila</li>
</ul>
|
|
<ul style="list-style-type: square;">
<li>Rojo</li>
<li>Verde</li>
<li>Lila</li>
</ul>
|
|
<ul style="list-style-type: circle;">
<li>Rojo</li>
<li>Verde</li>
<li>Lila</li>
</ul>
|
|
Imágen de la Viñeta
Si las opciones anteriores no son suficientes, también se puede utilizar una imágen propia para usarla como viñeta.
Para ello se usa la propiedad
list-style-image que usa el valor
url.
<ul style="list-style-image:
url('http://3.bp.blogspot.com/s1600/rojo.gif');">
<li>Rojo</li>
<li>Lila</li>
</ul>
|
|
Valor inicial
Para el caso de las listas numeradas, podemos definir el valor incial. Es decir, no necesariamente tienen que partir con 1 o A.
Para ello usamos simplemente
value en la etiqueta <li>, al cual le asignamos el valor de inicio.
<ol>
<li value="5">Perro</li>
<li>Gato</li>
<li value="15">Pato</li>
<li>Rana</li>
</ol>
|
- Perro
- Gato
- Pato
- Rana
|
No hay comentarios.:
Publicar un comentario