Codificación aprenderaprogramar.com: CU01048D
APLICAR ESTILOS A LISTAS
Al trabajar con documentos HTML es habitual el uso de listas para realizar enumeraciones. Las listas se clasifican en dos grandes tipos. Por un lado las listas desordenadas o ul (unordered lists) en los cuales el orden no se considera importante. Por otro lado las listas ordenadas, etiqueta <ol> (ordered lists).
Una lista desordenada podría ser por ejemplo de “personas asistentes a la conferencia”, donde no hay un primer asistente y un segundo asistente, sino simplemente asistentes. Estas listas es habitual representarlas usando viñetas (elemento gráfico que puede ser un pequeño círculo u otro tipo de elemento como un cuadrado, una estrella, etc.). Ejemplo:
- Juan
- Pedro
- Ismael
Una lista ordenada podría ser por ejemplo “Puntuación obtenida por los alumnos en el examen” donde el alumno con mayor puntuación es el elemento 1º de la lista, el siguiente el elemento 2º, y así sucesivamente. Estas listas es habitual representarlas usando números. Ejemplo:
- Juan
- Pedro
- Ismael
Los navegadores suelen introducir márgenes o paddings por defecto a las listas. En caso de querer eliminar estos valores de defecto deberemos establecer una regla de este tipo: ul { margin: 0; padding: 0; }
Sin embargo esto puede hacer que los elementos de la lista se peguen demasiado al borde izquierdo del contenedor. Para hacer que se alineen aproximadamente con los párrafos tal y como los muestra el navegador se puede usar una regla del tipo ul li { margin-left: 1em; }
PROPIEDAD LIST-STYLE-TYPE
| PROPIEDAD CSS list-style-type | |
| Función de la propiedad | Permite establecer el tipo de símbolo a mostrar precediendo a los elementos de una lista. |
| Valor por defecto | disc (muchos navegadores usan disc para listas desordenadas ul y decimal para listas ordenadas ol) |
| Aplicable a | Elementos li de una lista desordenada u ordenada o elementos a los que se haya aplicado la propiedad display: list-item; |
| Valores posibles para esta propiedad | disc (se mostrará un círculo relleno, opción por defecto), circle (se mostrará un círculo no relleno) ó square (mostrará un cuadradito relleno). |
| none: no se mostrará ningún símbolo | |
| decimal (números empezando en 1), decimal-leading-zero (números de dos dígitos desde 01 hasta 99) | |
| lower-roman (números romanos en minúsculas, i, ii, iii, iv…) ó upper-roman (números romanos en mayúsculas) | |
| lower-alpha (letras minúsculas empezando por la a) ó upper-alpha (letras mayúsculas empezando por la A). Mismo efecto con lower-latin y upper-latin. | |
| Otros valores menos usados: lower-greek (letras griegas), armenian (numeración armenia), georgian (numeración georgiana), etc. | |
| Algunos navegadores incluyen soporte para numeraciones en otros idiomas | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com | ul li {list-style-type: square;} li {list-style-type: upper-latin;} |
El color de la viñeta será el mismo que sea aplicable a la lista.
Muchas veces se crean menús de navegación que se basan en listas. En este caso normalmente se prescinde de las viñetas o numeraciones para lo cual se establece esta propiedad con el valor none.
PROPIEDAD LIST-STYLE-POSITION
| PROPIEDAD CSS list-style-position | |
| Función de la propiedad | Permite controlar la posición de las viñetas. |
| Valor por defecto | outside |
| Aplicable a | Elementos li de una lista desordenada u ordenada o elementos a los que se haya aplicado la propiedad display: list-item; |
| Valores posibles para esta propiedad | outside (la viñeta o numeración aparecerá a la izquierda fuera del bloque de texto que queda a la derecha de la viñeta) |
| inside (la viñeta o numeración aparecerá como si fuera parte del texto al comienzo de la primera línea) | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com | .myList li {list-style-position: inside;} .sandList li {list-style-position: outside;} |
Si hay poco texto puede que no se aprecie la diferencia en esta propiedad. Sólo cuando tenemos varias líneas se puede comprobar el distinto efecto que se genera. Ejemplo:
- En este ejemplo tenemos la viñeta outside, la viñeta está a la izquierda y el bloque de texto a la derecha. En este ejemplo tenemos la viñeta outside, la viñeta está a la izquierda y el bloque de texto a la derecha.
- En este ejemplo tenemos la viñeta inside, la viñeta está a la izquierda y el bloque de texto se alinea con la viñeta como si ésta fuera texto. En este ejemplo tenemos la viñeta inside, la viñeta está a la izquierda y el bloque de texto se alinea con la viñeta como si ésta fuera texto.
PROPIEDAD LIST-STYLE-IMAGE
| PROPIEDAD CSS list-style-image | |
| Función de la propiedad | Permite definir una imagen específica para ser usada en lugar de un símbolo tipo viñeta de entre los predefinidos para listas. |
| Valor por defecto | none |
| Aplicable a | Elementos li de una lista desordenada u ordenada o elementos a los que se haya aplicado la propiedad display: list-item; |
| Valores posibles para esta propiedad | none (no se aplica una imagen a modo de viñeta) |
| url (rutaDeLaImagenDeseada) | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com | .myList li {list-style-image: url(CU01048D_1.png);} .sandList li { list-style-image: url(CU01048D_1.png);} |
Esta propiedad da poco juego a la hora de crear efectos adicionales, modificar tamaños, posiciones, etc. por lo que muchos programadores y diseñadores prefieren colocar una imagen a modo de viñeta usando una imagen de fondo y anulando la viñeta propiamente dicha en lugar de usando esta propiedad.
PROPIEDAD SHORTHAND LIST-STYLE
Al igual que con muchas otras propiedades, CSS permite definir una propiedad shorthand o abreviada para aplicar estilos a listas. La sintaxis básica a emplear es de este tipo:
| selectorElemento {Valor-list-style-type valor-list-style-position valor-list-style-image } |
Las propiedades se pueden indicar en cualquier orden. Ejemplos:
ul li {list-style: square inside; }
ul li {list-style: square outside url(http://i.imgur.com/afC0L.jpg) ; }
¿Para qué definir un tipo de viñeta si definimos una imagen? Al definir una imagen, esta será la que se muestre siempre que sea posible cargarla. Si no es posible cargarla, se mostrará el tipo de viñeta que hayamos especificado (o si no hemos especificado ninguna, la viñeta que aplique el navegador por defecto).
EJERCICIO
Crea una lista ul con 27 elementos li (puedes partir del menú que tenemos en el código HTML de base que venimos empleando a lo largo del curso si lo deseas). Sobre dicha lista aplica los siguientes estilos a los elementos de la lista: los tres primeros elementos tipo disc y outside sin usar la propiedad shorthand, los tres siguientes tipo circle e inside sin usar la propiedad shorthand, los tres siguientes tipo square e inside, los tres siguientes none, los tres siguientes decimal y outside, los tres siguientes decimal-leading-zero y outside, los tres siguientes lower-roman e inside, los tres siguientes upper-alpha e inside, y los tres últimos con una imagen mediante list-style-image.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
