Thursday, January 14, 2010
Ponle Estilo a tus Listas Ordenadas con CSS
Por defecto las listas ordenas muestran el número listado con el mismo estilo de fuente usado para el cuerpo del texto. Para diferenciarlo vamos a darle estilo mediante CSS y para eso haremos uso de otro elemento, como puede ser span o p en este caso p.
Practicamente lo que hacemos es aplicar un estilo a ol y resetear p (anidado en ol).
- Primero creamos la lista.
<ol> <li><p>Item 1</p></li> <li><p>Item 2</p></li> <li><p>Item 3</p></li> </ol>La lista se desplegará así:
- Aplicamos el estilo que llevarán los números a
ol.ol { font: oblique 1em Georgia; color: red; }La lista se desplegará así:
- Y por último reseteamos
p.ol p { font: normal 1em Arial; color: #000; }Y finalmente la lista se desplegará así:
Fuentes: http://www.webdesignerwall.com/tutorials/style-your-ordered-list/
Add comment
Fill out the form below to add your own comments
Información util, gracias
This is worth sharing, this site did a good job, my site is also
http://www.cartierlovebracelets.net/cheap-cartier-love-bracelet_c14
http://www.hermesbagsreplica.org
http://www.hermesbagsreplica.org/replica-hermes-birkin-bags_c3
http://www.hermesbagsreplica.org/replica-balenciaga-bags_c29
http://www.hermesbagsreplica.org/replica-gucci-bags_c26
http://www.hermesbagsreplica.org/replica-dior-bags_c27
http://www.replica-watchesuk.org
Needed to create you a very small remark to help thank you again with your incredible pointers you’ve provided on this website. It was certainly strangely open-handed with you to supply publicly all that a few individuals might have marketed as an ebook to end up making some profit for themselves, particularly seeing that you might have done it if you considered necessary. The strategies also acted to be the easy way to be sure that many people have the same eagerness just like mine to realize very much more in respect of this issue. I think there are thousands of more fun instances up front for many who find out your site.