CSS - intermediate - Lección nº 6
Listas de formato
¿De qué trata esta lección?
En esta lección probaremos algunos ajustes de CSS para listas. Moveremos la configuración del tipo de lista del archivo HTML al archivo CSS y usaremos imágenes en lugar de viñetas estándar. Veremos cómo se ve la viñeta de una lista dentro o fuera del elemento de la lista (su zona formateada)
Nuevas propiedades CSS en esta lección:
list-style-type – esta propiedad se utiliza para establecer el estilo de la lista. Se puede utilizar en lugar del tipo HTML que probamos anteriormente. Podemos usar algunos valores: square, circle, disc, decimal, (valor predeterminado para la lista desordenada), upper-roman (números romanos en mayúsculas), lower-roman (caracteres romanos en minúsculas), lower-alpha (letras minúsculas), upper-alpha (letra mayúscula).
list-style-image – esta propiedad se utiliza para reemplazar las viñetas de listas desordenadas con imágenes.
list-style-position – esta propiedad se utiliza para definir la posición de las viñetas / números. Pueden estar fuera del elemento de la lista o en el interior. La diferencia es visible usando bordes o fondo en los elementos de la lista: la viñeta aparece dentro o fuera del área formateada. Valores posibles: inside, outside.
Ejemplo para mostrar una imagen como una viñeta (bullet):
En el ejemplo anterior, usamos la imagen x.png como viñeta, aparecerá en lugar de los discos predeterminados. El tamaño de la imagen se puede configurar de manera más fácil con los editores de imágenes. En el lenguaje CSS no hay una propiedad para resolver el tamaño.
Ejemplo para situar viñetas:
En la imagen de arriba, aplicamos el borde a los elementos de la lista. El borde se coloca por defecto entre la viñeta y el texto.
Si queremos mover las viñetas dentro del borde, establecemos el valor de la list-style-position en el interior.
En esta lección probaremos algunos ajustes de CSS para listas. Moveremos la configuración del tipo de lista del archivo HTML al archivo CSS y usaremos imágenes en lugar de viñetas estándar. Veremos cómo se ve la viñeta de una lista dentro o fuera del elemento de la lista (su zona formateada)
Nuevas propiedades CSS en esta lección:
list-style-type – esta propiedad se utiliza para establecer el estilo de la lista. Se puede utilizar en lugar del tipo HTML que probamos anteriormente. Podemos usar algunos valores: square, circle, disc, decimal, (valor predeterminado para la lista desordenada), upper-roman (números romanos en mayúsculas), lower-roman (caracteres romanos en minúsculas), lower-alpha (letras minúsculas), upper-alpha (letra mayúscula).
list-style-image – esta propiedad se utiliza para reemplazar las viñetas de listas desordenadas con imágenes.
list-style-position – esta propiedad se utiliza para definir la posición de las viñetas / números. Pueden estar fuera del elemento de la lista o en el interior. La diferencia es visible usando bordes o fondo en los elementos de la lista: la viñeta aparece dentro o fuera del área formateada. Valores posibles: inside, outside.
Ejemplo para mostrar una imagen como una viñeta (bullet):
En el ejemplo anterior, usamos la imagen x.png como viñeta, aparecerá en lugar de los discos predeterminados. El tamaño de la imagen se puede configurar de manera más fácil con los editores de imágenes. En el lenguaje CSS no hay una propiedad para resolver el tamaño.
Ejemplo para situar viñetas:
En la imagen de arriba, aplicamos el borde a los elementos de la lista. El borde se coloca por defecto entre la viñeta y el texto.
Si queremos mover las viñetas dentro del borde, establecemos el valor de la list-style-position en el interior.
Ejercicios
1. Edita los archivos index.html y toplangs.html y elimina el tipo de línea de las listas desordenadas, que configuramos en las lecciones anteriores, y luego en el archivo style.css establece viñetas de forma cuadrada para cada lista desordenada.
Ver el resultado
2. Edita el archivo toplangs.html, agrega un nombre de clase a la lista desordenada, luego en el archivo de estilos, refiérase a esa clase y establezca el archivo bullet.png de la carpeta de imágenes como la imagen de la lista.
Ver el resultado
3. agrega la clase recién creada y con estilo del ejercicio anterior, en el index.html, a las listas desordenadas.
Ver el resultado
Cuestionario
1. ¿Cuál de las siguientes configuraciones CSS produce una lista con letras minúsculas?
2. ¿Cuál de los siguientes no se puede utilizar como estilo de viñeta?
3. ¿Cuál es la forma correcta de establecer una imagen como viñeta para una lista?
4. Relacionado con la configuración CSS de abajo, ¿qué declaración es verdadera?
li{
li{
border-right: solid;
list-style-position: inside;
}Información suplementaria
Ejercicios: Puedes leer más sobre el tema de la lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/css/css_list.asp
https://www.w3schools.com/css/css_list.asp
