Listas en HTML (VII)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Listas con estilo (I).-

Desde la aparición de las Hojas de Estilos en Cascada (CSS) el ideal siempre buscado de la separción de contenido y formato se convirtió en una grata realidad. Es cierto que muchos de los elementos recomendados por el W3C no se han implementado en su totalidad, y que cada empresa hace una interpretación propia de otros elementos, pero lo cierto es que con el uso de CSS aplicado a los elementos de un documento HTML podemos conseguir presentaciones que se adapten a nuestras necesidades.

Como siempre, los estilos se pueden definir en línea, en la cabecera de la página o en un fichero externo, siendo lo más recomendable hacerlo en la cabecera, si son estilos sólo para la página actual, o en un fichero externo si son estilos aplicables a diferentes páginas del sitio web. Consultar documentación al respecto para mejor entender lo que sigue (podéis acudir al manual de textos de HTMLWeb, en donde se explican los principales atributos de CSS).

Las listas soportan la mayor parte de los atributos de estilo incluidos en CSS, entre los que destacan:

* Estilos para los textos.-

Vamos a explicar los estilos suponiendo que los implementamos en la cabecera de la página.

Podemos configurar qué fuente van a tener los textos de las listas, qué tamaño y qué color, definiendo una clase de estilos para una etiqueta global:

<style type="text/css">
  ol{font-size:12px; font-family:Comic Sans MS,Verdana;color:red;}
</style>

que nos pondría todos los elementos de todas las listas ordenadas de la página con una fuente Comic Sans de 12 pixels y de color rojo.

O podemos definir una clase general aplicable a cualquier elemento HTML que la admita:

<style type="text/css">
  .listadoA{font-size:12px; font-family:Comic Sans MS,Verdana;color:green;}
</style>

que nos pondría con el estilo definido sólo los elementos que hicieran referencia a dicha clase (observa el punto antes del nombre de la clase).

Por ejemplo, vamos a aplicar la clase anterior a una lista entera y luego sólo a un elemento de ella:

<ol class="listadoA">   <li>primer elemento</li>   <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tecer elemento

<ol>   <li>primer elemento</li>   <li class="listadoA">segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tecer elemento

También es posible (aunque algunas de estas propiedades de estilo sólo funcionan en Internet Explorer y Nestcape 6x) configurar el espaciado de las letras del texto de los elementos, su indentación respecto al topo, etc.:

<style type="text/css">
  .listadoB{letter-spacign:10px;text-indent:20px;}
</style>

<ol class="listadoB">   <li>primer elemento</li>  <li>segundo elemento</li>   <li>tercer elemento</li> </ol>

primer elemento segundo elemento tercer elemento

Si los estilos definidos vamos a usarlos para una sóla lista o un sólo elemento en particular, y además deseamos cambiar dinámicamente mediante JavaScript (DHTML) una o más propiedades de estilo en tiempo real, deberemos asignar a dicha lista o elemento un nombre identificador único mediante el atributo id, definiendo entonces los estilos para ese elemento usando una sintaxis parecida a la de definición de una clase, pero sustituyendo el punto por un caracter almohadilla (#):

<style type="text/css">
  #identificador1{font-size:12px;font-family:Verdana;}
</style>

<ul>   <li id="identificador1">primer elemento</li>   <li>segundo elemento</li> </ul>

primer elemento segundo elemento

Home - HTML - Listas en HTML - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10