Listas CSS
En HTML hay dos principales tipos de listas:
- Listas no ordenadas <ul>. Los elementos de la lista son marcados con una viñeta (o balín).
- Listas ordenadas <ol>. Los elementos de la lista son marcados con números o letras ordenadas.
Las propiedades para listas CSS permiten:
- Establecer diferentes viñetas a los elementos de listas no ordenadas.
- Establecer diferentes números o letras a los elementos de listas ordenadas.
- Establecer una imagen como viñeta a los elementos de lista.
- Agregar colores de fondo a listas y elementos de lista.
Lista no ordenada con circulos:
- Café
- Té
- Agua
Lista no ordenada con cuadros:
- Café
- Té
- Agua
Lista ordenada con números:
- Café
- Té
- Agua
Lista ordenada con letras:
- Café
- Té
- Agua
Diferentes Viñetas
La propiedad list-style-type especifica el tipo de viñeta de un elemento de lista.
El siguiente ejemplo muestra algunas viñetas disponibles para los elementos de lista:
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Nota: Algunos de los valores son para listas no ordenadas y otros valores para listas ordenadas.
Una imagen como viñeta
La propiedad list-style-image especifica una imagen como viñeta de un elemento de lista.
ul {
list-style-image: url('vineta.jpg');
}
Posición de las viñetas
La propiedad list-style-position especifica la posición de la viñeta de un elemento de lista. list-style-position: outside; significa que la viñeta estará fuera del elemento de lista. list-style-position: inside; significa que la viñeta estará dentro del elemento de lista. Como es parte del elemento de lista, será parte del texto y empujara el texto.
Código:
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Eliminar la configuración predeterminada
La propiedad list-style-type: none; también se puede usar para eliminar las viñetas. Tenga en cuenta que la lista también tiene margen y relleno predeterminados. Para eliminar esto, agregue el margen: 0; y relleno: 0; a <ul> o <ol>:
Código:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
La propiedad simplificada list-style
La propiedad list-style es una propiedad simplificada que es usada para especificar las propiedades de lista en una sola declaración.
Código:
ul {
list-style: square inside url("vineta.jpg");
}
Cuando se usa la propiedad simplificada, el orden de los valores de la propiedad son:
list-type-type– Si un list-style-image es especificado, el valor de esta propiedad será desplegado si por alguna razón la imagen no puede ser mostrada.list-type-position– especifica si la viñeta del elemento de lista debe aparecer dentro o fuera del flujo del contenido.list-type-image– especifica una imagen como viñeta para el elemento de lista.
Si falta alguno de los valores de propiedad anteriores, el valor por defecto será aplicado.
Listas con estilos de colores
También se le puede dar estilos con colores a las listas, para hacer esto un poco más interesante.
Cualquier estilo especificado a las etiquetas <ol> y <ul>, afecta a toda la lista, mientras las propiedades especificadas a las etiquetas <li> afectará al elemento de lista.
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
Las propiedades CSS de lista
| Propiedad | Descripción |
|---|---|
| list-style | Especifica los valores de las propiedades en una sola declaración. |
| list-style-imagen | Especifica una imagen como viñeta para los elementos de la lista. |
| list-style-position | Especifica la posición de las viñetas de los elementos de la lista, se interno o externo. |
| list-style-type | Especifica el tipo viñeta de los elementos de la lista. |