Las propiedades de la lista CSS nos van a permitir:
- Establecer diferentes marcadores de elementos de lista para listas ordenadas
- Establecer 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
| Elemento | Descripción | Ejemplo |
|---|---|---|
| list-style-type | Indica cual es el símbolo que se utiliza como marcador en las listas. Valores que puede tomar son: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. |
|
| list-style-image | Permite utilizar el uso de una imagen como marcador en una lista. El valor que toma es la ruta del fichero imagen |
|
| list-style-position | Determinan la posición del marcador en una lista. Puede tomar los valores: outside o inside. |
|
| list-style | Permite establecer de una única vez todas las características de una lista. Hay que seguir el orden siguiente: list-style-type, list-style-position y list-style-image. |
|
Podemos combinar varios atributos sobre los enlaces y crear Botones de enlace:
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<h1>Colores en listas:</h1>
<ol>
<li>Viena</li>
<li>Praga</li>
<li>Budapest</li>
</ol>
<ul>
<li>Viena</li>
<li>Praga</li>
<li>Budapest</li>
</ul>
</body>
</html>