Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo se define con CSS el estilo de una lista. Este vídeo complementa al vídeo HTML: listas. En ese vídeo se explicaban las etiquetas de HTML que se emplean para definir las listas.

La presentación visual de una lista se puede cambiar. Por ejemplo, en el caso de una lista no ordenada, en vez de un círculo relleno, un disco, se puede cambiar el estilo del marcador para que sea el contorno de un círculo o un rectángulo. Esto se logra con la propiedad de CSS list-style-type.

¿Qué valores puede tomar esta propiedad? Si consultamos la especificación de CSS2 del W3C y buscamos esta propiedad, podemos encontrar la lista de todos los posibles valores que puede tomar esta propiedad. Esta propiedad toma distintos valores según sea una lista no ordenada o una lista ordenada.

En el caso de una lista no ordenada, list-style-type puede tomar los valores disc, que es el valor por defecto, circle y square. Por ejemplo, para el ejemplo anterior, habría que definir las reglas de CSS que se indican para estas dos listas y que puedes ver en la imagen.

El estilo de una lista ordenada o numerada se puede cambiar directamente en la lista con el atributo type de HTML. Pero también se puede emplear el atributo list-style-type que se aplica a las listas no ordenadas y a las listas ordenadas. En el caso de las listas ordenadas, este atributo puede tomar los siguientes valores que permiten modificar el formato de numeración de los elementos de la lista. Se puede modificar para que se empleen números romanos, letras o simplemente números.

Por ejemplo, para el ejemplo anterior, se pueden definir estas cuatro clases de CSS en las que se usa el atributo list-style-type con estos valores para modificar la presentación de las listas.

La siguiente propiedad que vamos a ver es list-style-position, que permite modificar la posición del marcador que define cada elemento en una lista. Esta propiedad de CSS puede tomar dos valores, outside, que es el valor por defecto, e inside. Vamos a ver un ejemplo sencillo para entender su significado.

En este ejemplo se han definido dos clases de CSS, in y out, que modifican la posición del marcador de la lista. Además, también se modifica el estilo de la lista, pero la propiedad list-style-type no es lo importante de este ejemplo, así que, que no te confunda. A la izquierda aparece el código HTML de tres listas y a la derecha aparece el resultado tal como se visualiza en un navegador web.

Si trazamos una línea vertical imaginaria podemos apreciar la diferencia entre el valor inside y el valor outside: en cada caso el marcador queda a un lado distinto de la línea trazada.

La siguiente propiedad, list-style-image, se utiliza para definir una imagen que se emplea como marcador de los elementos de una lista. Por ejemplo, para utilizar esta imagen, un pequeño triángulo como marcador de los elementos de una lista se puede definir esta clase de CSS. Y al aplicarla a esta lista se obtiene el resultado que se puede ver a la derecha.

Ahora te invito a que veas la segunda parte de este vídeo en el que se muestra un ejemplo de creación de una barra de navegación vertical y horizontal con una lista.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.