Dar estilo a las listas con CSS

Esta es una forma muy original de dar estilo y forma a tus listas mediante css..

1. Estructurando con HTML..
Las listas numeradas se consiguen mediante las etiquetas <ol><li>, el truco es aplicar estilo al contenido y por defecto también se le agregara estilo a la numeración, para esto las auxialaremos con el elemento <p>. La estructura seria esta..

<ol>
<li><p>Primer elemento</p></li>
<li><p>Segundo elemento</p></li>
<li><p>Tercer elemento</p></li>
<li><p>Cuarto elemento</p></li>
</ol>

Por lo tanto tendremos..

1. Primer elemento


2. Segundo elemento


3. Tercer elemento


4. Cuarto elemento

2. Dando estilo a los elementos de la lista..
La etiqueta <ol> es la que contiene todos los elementos y por consecuente darles estilo, así como en el ejemplo siguiente..

ol {
font:bold 12px times;
font-weight:;
color:#6699CC;
}

Y así obtendremos lo siguiente..



3. Dando estilo solo al contenido deseado..
Para que no todas tus listas queden iguales puedes diferenciarlas dando estilos propios a cada etiqueta, por ejemplo a la etiqueta <p> ..

ol p {
font:normal 10px Arial;
color:#6699CC;
}

Este será el resultado..



Recordemos que, la etiqueta <ol> es la que da estilo a la numeración y <p> al contenido. El único problema que esto tiene al usar esto en tu blog es que no tengas un esquema de código, lo que puedes hacer es aplicar una clase a <ol> y no afectar a todas tus demás listas que hayas hecho con anterioridad en tu blog o web..

Por ultimo les diré que los códigos de arriba son solo de ejemplo, tu puedes modificarlos a tu gusto y si eres hábil con css seguro le sacaras mucho provecho :)..


Entradas relacionadas

Como agregar bordes directamente a las imagenes..
Cursor personalizado en CSS..
Cambiar el color de texto seleccionado con CSS
Insertar archivos SWF en Blogger
Icono en la barra de navegación