Listas de CSS
- Página anterior Enlaces de CSS
- Página siguiente Tablas de CSS
Lista no ordenada:
- Café
- Té
- Coca Cola
- Café
- Té
- Coca Cola
Lista ordenada:
- Café
- Té
- Coca Cola
- Café
- Té
- Coca Cola
Listas HTML y propiedades de lista de CSS
En HTML, hay dos tipos principales de lista:
- Lista no ordenada (ul) - Los elementos de lista utilizan marcadores de lista
- Lista ordenada (ol) - Los elementos de lista utilizan números o letras como marcadores
Las propiedades de lista de CSS le permiten:
- Establecer diferentes marcadores de elementos de lista para listas ordenadas
- Establecer diferentes marcadores de elementos de lista para listas no ordenadas
- Establecer una imagen como marcador del elemento de lista
- Agregar color de fondo a la lista y los elementos de lista
Diferentes marcadores de elementos de lista
list-style-type
La propiedad especifica el tipo de marcador del elemento de lista.
El siguiente ejemplo muestra algunos 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; }
Notas:Algunos valores se utilizan para listas no ordenadas, mientras que otros valores se utilizan para listas ordenadas.
La imagen como marcador del elemento de lista
list-style-image
La propiedad designa una imagen como marcador del elemento de lista:
Ejemplo
ul { list-style-image: url('sqpurple.gif'); }
Ubicación del marcador del elemento de lista
list-style-position
La propiedad especifica la posición del marcador del elemento de lista (ícono de lista).
"list-style-position: outside;" indica que el punto del ícono de lista estará fuera del elemento de lista. El inicio de cada línea del elemento de lista se alineará verticalmente. Esto es el valor predeterminado:
- Café - Bebida infundida con granos de café tostados
- Té
- Coca-cola
"list-style-position: inside;"
Representa que los puntos de lista estarán dentro del elemento de lista. Ya que es parte del elemento de lista, se convertirá en parte del texto y se desplazará al principio del texto:
- Café - Bebida infundida con granos de café tostados
- Té
- Coca-cola
Ejemplo
ul.a { list-style-position: outside; } ul.b { list-style-position: inside; }
Eliminar la configuración predeterminada
list-style-type:none
Estas propiedades también se pueden usar para eliminar los marcadores/símbolos. Tenga en cuenta que la lista también tiene márgenes y rellenos predeterminados. Para eliminar este contenido, agregue en <ul> o <ol>. margin:0
y padding:0
:
Ejemplo
ul { list-style-type: none; margin: 0; padding: 0; }
Lista - Propiedad abreviada
list-style
La propiedad es una propiedad abreviada. Se utiliza para establecer todas las propiedades de lista en una declaración:
Ejemplo
ul { list-style: square inside url("sqpurple.gif"); }
Al usar propiedades abreviadas, el orden de los valores de las propiedades es:
list-style-type
(Si se especifica list-style-image y la imagen no se puede mostrar por alguna razón, se mostrará el valor de esta propiedad)list-style-position
(Especificar si el marcador de lista debe mostrarse dentro o fuera del flujo de contenido)list-style-image
(Especificar la imagen como marcador de lista)
Si falta uno de los valores de las propiedades anteriores, se insertará el valor predeterminado de la propiedad缺失 (si lo hay).
Configurar el estilo de color de la lista
También podemos usar configuraciones de color para ajustar la estilo de la lista, haciendo que se vea más interesante.
Cualquier estilo añadido a las etiquetas <ol> o <ul> afectará toda la lista, mientras que las propiedades añadidas a la etiqueta <li> afectarán a cada elemento 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; }
Resultados:
- Café
- Té
- Coca Cola
- Café
- Té
- Coca Cola
Más ejemplos
- Lista personalizada con borde izquierdo rojo
- Este ejemplo muestra cómo crear una lista con borde izquierdo rojo.
- Lista de borde de ancho completo
- Este ejemplo muestra cómo crear una lista con borde sin viñetas.
- Todos los diferentes tipos de marcadores de lista de la lista
- Este ejemplo muestra todos los diferentes tipos de marcadores de lista en CSS.
Todos los atributos de lista CSS
Atributo | Descripción |
---|---|
list-style | Atributo abreviado. Establece todas las propiedades de la lista en una declaración. |
list-style-image | Especifica una imagen como marcador de lista. |
list-style-position | Especifica la posición del marcador de lista (punto de lista). |
list-style-type | Especifica el tipo de marcador de lista para los elementos de lista. |
- Página anterior Enlaces de CSS
- Página siguiente Tablas de CSS