¿Estás buscando la manera de darle un toque más estilizado y organizado a tus sitios web? Las listas de estilo CSS pueden ser una herramienta clave para lograrlo. En este artículo, descubre todo lo que necesitas saber para implementarlas en tus proyectos y llevar tu diseño web al siguiente nivel. ¡No te lo pierdas!
Listas HTML con estilo CSS se han convertido en una herramienta invaluable en la caja de herramientas de un desarrollador de HTML. Esto se debe principalmente al hecho de que las listas HTML son versátiles y flexibles por naturaleza.
Las listas se pueden utilizar para tareas simples como la creación de una lista ordenada de elementos o para barras de navegación con todas las funciones. CSS le permite establecer diferente marcadores de elementos de lista para listas ordenadas y listas desordenadas, así como una imagen como marcador de elementos de lista.
Liza
En HTML, hay dos tipos principales de listas.
- listas desordenadas – los elementos de la lista están marcados con viñetas
- listas ordenadas – los elementos de la lista están marcados con números o letras
Propiedad de estilo de lista (taquigrafía)
Con CSS, podemos usar la propiedad de estilo de lista abreviada. Los conjuntos de propiedades de estilo de lista tres valores: list-style-type, list style-positiony list-style-image. No se requieren los tres valores.
ul {
list-style: circle inside;
}Tipo de estilo de lista
Mientras que la list-style-type La propiedad es compatible con la mayoría de los navegadores modernos, no todo de los valores de propiedad enumerados a continuación pueden ser compatibles.
| Valor | Descripción |
|---|---|
armenian |
numeración armenia |
circle |
Círculo |
cjk-ideographic |
Números ideográficos |
decimal |
Número |
decimal-leading-zero |
Número con cero inicial |
disc |
Círculo relleno. |
georgian |
numeración georgiana |
hebrew |
numeración hebrea |
hiragana |
numeración hiragana |
hiragana-iroha |
numeración hiragana iroha |
inherit |
Heredado del elemento principal |
katakana |
numeración katakana |
katakana-iroha |
numeración katakana iroha |
lower-alpha |
alfa inferior |
lower-greek |
Bajo griego |
lower-latin |
latín inferior |
lower-roman |
bajo-romano |
none |
sin marcador |
square |
Cuadrado |
upper-alpha |
Alfa superior |
upper-latin |
latín superior |
upper-roman |
alto-romano |
Posición de estilo de lista
El list-style-position propiedad simplemente especifica si el list-item los marcadores deben aparecer dentro o fuera del flujo de contenido. Los valores son los siguientes: inside, outsideo inherit.
Imagen de estilo de lista
El list-style-image propiedad especifica que el list-item marcador usar una imagen. Es posible que desee especificar el list-style propiedad de tipo además de la list-style-image propiedad. El list-style-type propiedad se utilizará si la imagen es No disponible. Aquí hay un ejemplo de la list-style-image propiedad.
ul {
list-style-image: url('marker.gif');
}