Creando Listas Con HTML y CSS

Crearemos listas usando solo codigo de HTML y CSS, como saben usando html podemos organizar por categorias, palabras, enlaces, entre otros. pero con la ayuda de css podemos darle una mejor apariencia al texto creado.

Veamos las diferentes formas de crear listas, con estilos diferentes.

Usando <ul> en HTML

<ul> <li>HTML</li> <li>CSS</li> <li>BLOGGAYUDA</li> </ul>

Ahora obtendríamos lo siguiente con el código anterior:

Usando <ol> en HTML

<ol> <li>HTML</li> <li>CSS</li> <li>BLOGGAYUDA</li> </ol>

Obtendríamos lo siguiente:

Usando <dl> en HTML

<dl> <dt>HTML:</dt> <dd>Tenemos una galería de códigos HTML.</dd> <dt>CSS:</dt> <dd>Miles de códigos CSS para mejorar tu web.</dd> <dt>BLOGGAYUDA:</dt> <dd>Miles de recursos para ti.</dd> </dl> Obtendríamos lo siguiente:

Ahora solo mejoraremos el estilo usando CSS

Vamos a mejorar el aspecto de las lista usando unos códigos como los que a continuación mostrare.

Usando el siguiente código:

ol{ list-style-type: square; }

Donde:

• ol –> Es la clase al cual se dará el estilo. Puedes cambiar por ul , dl. Dependiendo lo que uses
• squere –> Es el estilo de listado que se dará, existen:
•  squere, el cual tiene forma de cuadrado pequeño
• upper-roman, el cual tiene formato de número romanos
• decimal-leading-zero, el cual tiene formado de números decimales
• lower-latin, tiene formato de letras (a, b, c, d..)

Si deseamos usar algunas imágenes, podemos realizar los siguientes cambios:

li{ list-style: none; background: url(imagen.jpg) left bottom no-repeat; padding-left: 13px; }

Donde:

• li –> Las listas
• list-style: none –> Anulará la viñeta de la lista
• imagen.jpg –> La URL de la imagen
• left bottom –> Posición con respecto al item
• no-repeat –> Indica que el fondo no se repetirá
• padding-left –>Desplaza a la palabra 13px hacia la derecha para que no tape la imagen

Como ven hay maneras de poder dar estilos a nuestros diseños de listas combinando HTML y CSS.

Posted in: CSS, HTML5