English Português

Desde hace un tiempo he estado buscando la forma para dar estilo a las listas ordenas (o listas numeradas) con css sin conseguirlo, más precisamente, dar estilo a los números en la lista para diferenciarlos de su contenido y acentuarlos mejor. La solución la encuentro en webdesignerwall, que es realmente sencilla y se la muestro a continuación:

  1. La estructura html
  2. Como sabrán, las listas numeradas se consiguen con las etiquetas <ol> y <li> y si se aplican estilos a cualquiera de estas, las repercusiones caen tanto en la numeración como en el contenido, por lo que hay que auxiliarse con otro elemento para poder diferenciarlos, como bien puede ser la etiqueta <p>. Así, tendríamos una estructura de código html como la siguiente:

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

    Este código se visualiza de la siguiente forma:

    estilo-lista-ol-1.gif

  3. Dando estilo a todos los elementos
  4. La etiqueta <ol> contiene a todos los elementos, al darle estilo, lo heredará todo dentro de ella. Definamos, por ejemplo, los siguientes:

    ol {
    font:bold 18px times;
    font-weight:;
    color:#99CCCC;
    }

    Dando como resultado:

    estilo-lista-ol-2.gif

  5. Dando estilos al contenido
  6. Para diferenciar el contenido de la numeración damos estilos a la etiqueta <p>, por ejemplo:

    ol p {
    font:normal 10px Verdana;
    color:#000000;
    }

    Que da como resultado final:

    estilo-lista-ol-3.gif

Finalmente, la etiqueta <ol> es la que da estilo a la numeración y <p> al contenido. Un problema de implementar esto en tu blog o web, es que muy seguramente no tengas este esquema de código, pero puedes aplicar una clase a <ol> y no afectar a todas las listas que hallas hecho con anterioridad.

Son solo 2 estilos y los resultados pueden ser tan buenos como tu habilidad con css, es de las cosas que hacen decir “¿cómo no se me ocurrió a mi?”.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. -icaro- / Hace 10 años /

      Muy buen tip pero… se puede hacer este truco en blogger?

      Responder a -icaro- →
    2. Francisco / Hace 10 años /

      Claro, cualquier técnica de CSS puede ser usada en Blogger y en toda aplicación web.

      Responder a Francisco →
    3. -icaro- / Hace 10 años /

      No sé en que parte del código debo colocarlo, podrías ayudarme un poco con eso? es que no soy muy diestro en css.

      Responder a -icaro- →
    4. Francisco / Hace 10 años /

      El css en blogger va antes de:

      ]]>

      Y para usarlo, cuando hagas una lista numerada en algunos de tus post usa la estructura que se muestra arriba.

      Espero así puedas implementarlo, un saludo!

      Responder a Francisco →
    5. Diego / Hace 10 años /

      Está bueno. Aprovecho para hacerte una pregunta. Yo quiero q

      Responder a Diego →
    6. Diego / Hace 10 años /

      Está bueno. Aprovecho para hacerte una pregunta. Si quiero que en vez de 1. la lista se muestre como 1) ¿se puede hacer esto? Gracias.

      Responder a Diego →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad