zeuder.net

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).

1. 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í:
   

2. Aplicamos el estilo que llevarán los números a ol.

   ol {
        font: oblique 1em Georgia;
        color: red;
   }

   La lista se desplegará así:
   

3. 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/

• CSS
• 4 comments (2905 views)