comparte el articulo 

Crear y estilizar listas con XHTML y CSS

Actualizado el 28/12/2011 < > 0 Comentarios

Resumen: Las listas representan uno de los principales medios para presentar contenido en una página web, en este artículo estudiamos como agregarlas a nuestro código y darles un estilo adecuado.

Las listas son elementos que quizás no representan mucho riesgo al momento de su implementación, el código utilizado para añadirlas resulta sencillo y su visualización suele ser muy uniforme, sin embargo el hecho de que sean uno de los elementos más utilizados para mostrar contenido en una página Web hace que sea más que necesario exponer un tema sobre ellas en este manual.

Si el código de tu página esta dominado por párrafos e imágenes, lo más probable es que pienses que no te resultará necesario aprender sobre listas, pero las verdad es que son la mejor forma de estructurar la navegación en un sitio, por lo que es fundamental que tengas esto en tus conceptos al momento de desarrollar y diseñar tu sitio.

Existen tres tipos básicos de listas, ordenadas, desordenadas y de definición, dentro de estos catalogaremos todas las listas que usaremos a lo largo de un documento XHTML. Si bien el estilo y diseño de una lista puede ser modificado, la etiqueta utilizada para su definición en el código XHTML es lo que le dará el tipo e identificación.

Listas ordenadas y desordenadas con HTML: ol y ul

Las listas ordenadas y sin orden son las de uso más común en el código, al analizar la estructura de ambas encontraremos que son muy similares, es simplemente su visualización la que las diferencía. Las listas ordenadas y sin orden son definidas mediante las etiquetas “ol” y “ul” respectivamente, y su código suele ir seguido de un elemento “li” que indicará cada para punto de la lista.

Una lista desordenada será aquella que utilizaremos cuando los elementos que estamos mostrando no necesitan llevar un orden específico, es decir simplemente son puntos los cuales pueden leerse de forma aleatoria o cuya importancia es equitativa por lo que todos los puntos de la lista son igual de relevantes. Este es un ejemplo de una lista desordenada:

<ul>
    <li>Elemento de la lista</li>
    <li>Elemento de la lista</li>
    <li>Elemento de la lista</li>
</ul>

Por su parte en las listas ordenadas tiene mucho más relevancia la parte donde del código donde colocamos cada elemento de tipo “li”, ya que al momento de visualizarla encontraremos que se agregaron una serie de números al inicio, lo que generalmente indica al usuario que debe leerse en esa secuencia.

<ol>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ol>

Listas anidadas en HTML: una lista dentro de otra

Los elementos de las listas pueden ser utilizados para crear estructuras más complejas, la anidación nos puede ayudar para ser más específicos y dar una mejor desglose a cada punto. Si colocamos un elemento de tipo “ol” o “ul” dentro de otro similar obtendremos listas anidadas.

<ul>
    <li>Elemento de la lista padre</li>
    <li>
        <ul>
            <li>Elemento de la lista hija</li>
            <li>Elemento de la lista hija</li>
        <ul>
    </li>
    <li>Elemento de la lista padre</li>
    <li>Elemento de la lista padre</li>
</ul>

Listas de definición: dl

Las listas de definición son elementos totalmente distintos a los ya manejados, quedan fuera las sentencias “ol”/”ul” y no se hace uso de la etiqueta “li” para desplegar las partes que componen la lista. Estas listas hacen uso de un conjunto de elementos para agregar términos y descripciones para cada parte de la lista, la etiqueta “dl” para definir la lista, “dt” para definir el término y “dd” para definir la descripción del término.

<dl>
    <dt>La Webera</dt>
    <dd>Sitio Web con manuales de diseño y desarrollo web.</dd>
</dl>

La etiqueta “dt” siempre debe de ir acompañada de “dd”, sin importar cual este primero o cuantas veces aparezca por cada punto de la lista, por lo que se pueden tener varios términos para una sola descripción o varias descripciones para un sólo término, dependiendo como deseemos el glosario.

El uso de estas listas es cuestión de debate, no son muy populares, sin embargo son necesarias para dar una correcta semántica al código en caso de que necesitemos agregar alguna definición a un concepto, el de discordia se produce por el hecho de que algunos consideran que muchos términos a los que se les da una definición realmente no son relevantes. Un ejemplo básico de uso puede ser el despliegue de una lista de sitios web a los que hagamos referencia o enlacemos, estos pueden ir acompañados por una descripción individual lo que permita la usuario identificar mejor el contenido.

Presentación de listas: entendiendo CSS

La forma en que visualizaremos las listas variará si utilizamos o no CSS, por default las listas ordenadas mostrarán sus puntos con un círculo relleno de color negro, mientras que las listas ordenadas muestran cada punto precedido por un el número correspondiente a su orden. Esto puede ser cambiado mediante las propiedades “color” y “list-style-type”, las cuales nos permiten elegir el color de los indicadores y su forma.

Generalmente tenemos cinco tipos básicos de forma entre los cuales podemos escoger, existe el círculo relleno, círculo vacío, cuadrado, números decimales y número romanos, el que sea de nuestro gusto deberá ser indicado como valor de la propiedad “list-style-type” y eso hará que cambie la visualización, hay que aclarar que también podemos utilizar el valor “none” en caso de que no queramos que se muestre ningún símbolo al inicio.

Los valores correctos para el CSS son “disc” si queremos el círculo rellno, “circle” para el círculo vacío, “square” para el cuadrado, “decimal” para los números arábigos, “lower-roman” para los números romanos en minúscula y “upper-roman” para representarlos con mayúsculas. La forma de agregar a la declaración sería así:

ol { list-style-type: decimal; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }

En este ejemplo estamos aplicando los número arábigos para las listas ordenadas, los círculos rellenos para las desordenadas y los círculos vacíos para las listas desordenadas anidadas dentro de otra no ordenada.

De igual manera podemos proporcionar algún símbolo o imagen propio que queramos usar como indicador, para eso basta con utilizar la propiedad “list-style-image”:

ul { list-style-image: url(simbolo.gif); }

También podemos especificar la posición del indicador, esto con la propiedad “list-style-position”, cuyos valores pueden ser “outside” o “inside”, para determinar si el indicador del elemento se verá dentro o fuera de la caja.

En caso de que queramos utilizar todas estas propiedades en una sola sentencia contamos con “list-style” como propiedad “shorthand”, lo que nos da una sentencia como la siguiente:

ul { list-style: none url(simbolo.gif) inside; }

Listas horizontales con CSS

Existe una manera muy sencilla de mostrar los elementos de una lista de manera horizontal, basta con utilizar la propiedad “display” con el valor “inline” y listo tenemos una lista horizontal, la cual puede ser utilizada como menú de navegación y colocarse en la parte superior o inferior de nuestra página

li { display: inline; }

Publicado el 30/12/2011, última actualización 28/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras