Listas de estilo CSS | TIEngranaje

¿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');
}

#15 Curso Básico de CSS3 para principiantes - Estilos de Listas y Enlaces en CSS

Curso Básico de CSS3 para principiantes - Estilos de Listas y Enlaces en CSS. Suscribete! https://bit.ly/2F54GiD Hey ...

Deja un comentario