Crear una lista mediante html5 y CSS - tutorial

Mediante este nuevo tutorial, vamos a crear una lista haciendo uso de html5 y a continuación la decoraremos un poco, utilizando CSS. Lo primero que vamos a hacer para crear nuestra lista mediante html5, es crear una estructura básica para ésta, el CSS, vendrá después. Por ejemplo, podemos crear una lista en html5 <ul></ul>, con tres botones o secciones <li></li>.

Estructura básica de una lista mediante html5

<ul>

<li>Uno</li>

<li>Dos</li>

<li>Tres</li>

</ul>

A continuación, vamos a dar algo más de estilo a la lista, ya que, de lo contrario, quedaría así:

• Uno
• Dos
• Tres

Un poco sosa, ¿verdad? Para empezar, vamos a aplicar algo de css, para que los botones no tengan ese punto tan feo y típico:

<ul style="list-style:none">

<li>Uno</li>

<li>Dos</li>

<li>Tres</li>

</ul>

Por lo tanto, nuestra lista vertical en html5 y css, comienza a quedarse así:

• Uno
• Dos
• Tres

Y ahora... ¿como podemos darle un toque de originalidad, sin utilizar imágenes? pues con CSS, lenguaje soportado por la mayoría de navegadores modernos, al igual que html5. Por ejemplo, vamos a hacer, que el color de los enunciados, sea diferente en cada no de éstos:

<ul style="list-style:none;" >

<li style="color:#0000FF;" >Uno</li>

<li style="color:#006400;" >Dos</li>

<li style="color:#8B0000;" >Tres</li>

</ul>

Y este es el resultado:

• Uno
• Dos
• Tres

Genial! nuestra lista está algo más decorada... las letras parecen muy finas. Ok, como último paso, les vamos a dar algo más de grosor:

<ul style="list-style:none;font-weight:bold;" >

<li style="color:#0000FF;" >Uno</li>

<li style="color:#006400;" >Dos</li>

<li style="color:#8B0000;" >Tres</li>

</ul>

Y este, es el resultado ahora:

• Uno
• Dos
• Tres

Parece que se ve algo mejor, ¿no? jeje!

Ni te imaginas la de cosas que se pueden llegar a hacer mediante html5 y CSS, ¿qué no te lo crees? te animo a averiguarlo, esto, solo es el primer paso :-)


No te olvides de seguirme en las redes sociales, cuando tengo tiempo, publico nuevos tutoriales en mi blog, y, quien sabe, quizá algún día te interese lo que publico... ;-)