En HTML hay dos tipos de listas:
- Listas ordenadas (<ol></ol>)
- Listas desordenadas (<ul></ul>)
Las propiedades CSS de estas listas permiten:
- Establecer diferentes marcadores de elementos de lista para listas ordenadas
- Establezca diferentes marcadores de elementos de lista para listas desordenadas
- Establecer una imagen como marcador de elemento de lista
- Agregar colores de fondo a listas y elementos de lista
Marcadores de elementos de lista diferentes
La propiedad list-style-type especifica el tipo de marcador de elemento de lista. El siguiente ejemplo muestra algunos de los marcadores de elementos de lista disponibles.
Ej
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;
}Una imagen como marcador de elemento de lista
La propiedad list-style-image especifica una imagen como marcador de elemento de lista.
Ejm
ul {
list-style-image: url('sqpurple.gif');
}Posición de los marcadores de elementos de la lista
La propiedad list-style-position especifica la posición de los marcadores de elementos de lista (viñetas).
list-style-position: outside significa que las viñetas estarán fuera del elemento de la lista. El inicio de cada línea de un elemento de la lista se alineará verticalmente. Esto es predeterminado.
list-style-position: inside significa que las viñetas estarán dentro del elemento de la lista. Como es parte del elemento de la lista, será parte del texto y empujará el texto al principio.
Ejm
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}Eliminar configuración predeterminada
La propiedad list-style-type:none también se puede usar para eliminar los marcadores/viñetas. Ten en cuenta que la lista también tiene margen y relleno predeterminados. Para eliminar esto, agrega margin:0 y padding:0 a <ul> o <ol>.
Ejm
ul {
list-style-type: none;
margin: 0;
padding: 0;
}Listas – modelo corto
La propiedad list-style es una propiedad abreviada. Se utiliza para establecer todas las propiedades de la lista en una declaración.
Ejm
ul {
list-style: square inside url("sqpurple.gif");
}Cuando se usa la propiedad abreviada, el orden de los valores de propiedad es:
- list-style-type
- list-style-position
- list-style-image
Si falta uno de los valores de propiedad anteriores, se insertará el valor predeterminado para la propiedad faltante, si corresponde.
Colores
También podemos diseñar listas con colores, para que se vean un poco más interesantes. Todo lo que se agregue a la etiqueta <ol> o <ul> afecta a toda la lista, mientras que las propiedades agregadas a la etiqueta <li> afectarán a los elementos individuales de la lista.
Ejm
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}