Listas CSS
Listas desordenadas:
- Café
- Té
- Coca Cola
- Café
- Té
- Coca Cola
Listas ordenadas:
- Café
- Té
- Coca Cola
- Café
- Té
- Coca Cola
Listas HTML y propiedades de listas CSS
En HTML, hay dos tipos principales de listas:
- listas desordenadas (<ul>) - los elementos de la lista están marcados con viñetas
- listas ordenadas (<ol>) - los elementos de la lista están marcados con números o letras
Las propiedades de la lista CSS le 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 list-style-typepropiedad especifica el tipo de marcador de elemento de lista.
El siguiente ejemplo muestra algunos de los marcadores de elementos de lista 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;
}
Nota: Algunos de los valores son para listas desordenadas y otros para listas ordenadas.
Una imagen como marcador de elemento de lista
La list-style-imagepropiedad especifica una imagen como marcador de elemento de lista:
Ejemplo
ul
{
list-style-image: url('sqpurple.gif');
}
Coloque los marcadores de elementos de la lista
La list-style-positionpropiedad especifica la posición de los marcadores de elementos de lista (viñetas).
"posición de estilo de lista: fuera;" 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:
- Café - Una bebida preparada a partir de granos de café tostados...
- Té
- Coca-cola
"posición-estilo-lista: dentro;" 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:
- Café - Una bebida preparada a partir de granos de café tostados...
- Té
- Coca-cola
Ejemplo
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Eliminar configuración predeterminada
La list-style-type:nonepropiedad también se puede utilizar para eliminar los marcadores/viñetas. Tenga en cuenta que la lista también tiene margen y relleno predeterminados. Para eliminar esto, agregue margin:0y padding:0a <ul> o <ol>:
Ejemplo
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Lista - Propiedad abreviada
La list-stylepropiedad es una propiedad abreviada. Se utiliza para establecer todas las propiedades de la lista en una declaración:
Ejemplo
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(si se especifica una imagen de estilo de lista, el valor de esta propiedad se mostrará si la imagen por algún motivo no se puede mostrar)list-style-position(especifica si los marcadores de elementos de lista deben aparecer dentro o fuera del flujo de contenido)list-style-image(especifica una imagen como marcador de elemento de lista)
Si falta uno de los valores de propiedad anteriores, se insertará el valor predeterminado para la propiedad faltante, si corresponde.
Lista de estilos con 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:
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
Este ejemplo demuestra cómo crear una lista con un borde izquierdo rojo.
Este ejemplo demuestra cómo crear una lista bordeada sin viñetas.
Este ejemplo demuestra todos los diferentes marcadores de elementos de lista en CSS.
Todas las propiedades de la lista CSS
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |