- Café
- Té
- Coca Cola
- Café
- Té
- Coca Cola
Las listas HTML y CSS Propiedades de la lista
En HTML, hay dos tipos principales de listas:
- listas no ordenadas (<ul>) - los elementos de la lista están marcados con balas
- listas ordenadas (<ol>) - los elementos de la lista están marcados con números o letras
Las propiedades de la lista de CSS le permiten:
- Establecer diferentes marcadores de elementos de lista para las listas ordenadas
- Establecer diferentes marcadores de elementos de lista para listas desordenadas
- Configurar una imagen como el marcador de la lista de elementos
- Añadir colores de fondo para las listas y los elementos de la lista
Diferentes marcadores elemento de lista
El list-style-type propiedad especifica el tipo de marcador lista de elementos.
El ejemplo siguiente muestra algunos de los marcadores de la lista de elementos disponibles:
Ejemplo
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;
} Inténtalo tú mismo " Nota: Algunos de los valores son para listas desordenadas, y algunas de las listas ordenadas.
Una imagen como el marcador de la lista de elementos
La list-style-image propiedad especifica una imagen como el marcador de lista de elementos:
Coloque los marcadores elemento de lista
La list-style-position propiedad especifica si los marcadores lista de artículos deben aparecer dentro o fuera del flujo de contenido:
Lista - Abreviación de las propiedades
La list-style propiedad es una propiedad abreviada. Se utiliza para configurar todas las propiedades de la lista en una declaración:
Cuando se utiliza la propiedad rápida, el orden de los valores de la propiedad son:
-
list-style-type(si no se especifica un estilo de imagen de la lista, el valor de esta propiedad se mostrará si la imagen por alguna razón no se puede visualizar) -
list-style-position(especifica si los marcadores lista de artículos deben aparecer dentro o fuera del flujo de contenido) -
list-style-image(especifica una imagen como el marcador de lista de elementos)
Si uno de los valores de las propiedades anteriormente faltan, se inserta el valor predeterminado de la propiedad que faltan, si los hubiere.
Lista Styling Con Colores
Podemos también listas de estilo con colores, para que se vean un poco más interesante.
Cualquier cosa añadida a la <ol> o <ul> etiqueta, afecta a toda la lista, mientras que las propiedades añaden a la <li> etiqueta afectará a los elementos individuales de la lista:
Ejemplo
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;
}Resultado:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Más ejemplos
De ancho completo bordeado lista
Este ejemplo muestra cómo crear una lista confinado sin balas.
Todos los diferentes marcadores lista de artículos para las listas
Este ejemplo demuestra todos los diferentes marcadores de lista de elementos en CSS.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »
Todas las propiedades de la lista de CSS
| Propiedad | Descripción |
|---|---|
| list-style | Establece todas las propiedades de una lista en una declaración |
| list-style-image | Especifica una imagen como el marcador de ítems de lista |
| list-style-position | Especifica si los marcadores lista de artículos deben aparecer dentro o fuera del flujo de contenido |
| list-style-type | Especifica el tipo de marcador de ítems de lista |