CSS: propiedades de estilo de lista

0

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedades de estilo de lista

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada lista Con sintaxis y ejemplos.

describir

La propiedad de estilo de lista CSS define la apariencia, la posición y la imagen de los elementos de la lista. Es una propiedad abreviada para configurar las propiedades CSS de tipo de estilo de lista, posición de estilo de lista y imagen de estilo de lista.

sintaxis

La sintaxis de la propiedad CSS de estilo de lista es:

list-style: list-style-type list-style-position list-style-image;

parámetro o parámetro

list-style-type es la apariencia del elemento de lista. Puede ser uno de los siguientes:

valor describir
CD Círculo sólido. Esta es la configuración predeterminada.
ul {estilo de lista: cd; }
circulo circulo hueco
ul {estilo de lista: círculo;}
cuadrado cuadrado sólido
ul {estilo de lista: cuadrado;}
decimal Números decimales que comienzan con 1
ol { estilo de lista: decimal; }
ceros iniciales para decimales Números decimales que comienzan con 1, los números menores de 10 se completan con 0
ol { estilo de lista: cero decimal inicial; }
bajo romano números romanos en minúsculas
ol {estilo de lista: pequeño romano;}
roma alta números romanos en mayúsculas
ol {estilo de lista: mayúscula romana;}
bajo griego griego en minúsculas
ol {estilo de lista: bajo griego;}
bajo alfa letras minúsculas ASCII
ol {estilo de lista: alfa bajo;}
latín bajo Letras ASCII en minúsculas (no compatibles con IE7)
ol {estilo de lista: bajo latín;}
alfa superior letras mayúsculas ASCII
ol { estilo de lista: alfa superior; }
latín superior Letras ASCII en mayúsculas (no compatible con IE7)
ol { estilo de lista: latín superior; }
armenio número armenio
ol {Estilo de lista: armenio; }
georgiano número georgia
ol {Estilo de lista: Georgia; }
no cualquiera No aparecerá ningún número o símbolo antes de cada elemento de la lista.
ol {estilo de lista: ninguno;}
ul {estilo de lista: ninguno;}

list-style-position es la apariencia del elemento del elemento de lista. Puede ser uno de los siguientes:

valor describir
en El cuadro de marcador está dentro del cuadro de bloque principal.
ul {estilo de lista: interior;}
externo El cuadro de marcador está fuera del cuadro de bloque del cuerpo (este es el valor predeterminado)
ul {estilo de lista: externo;}

list-style-image es la imagen utilizada para el marcado de la lista. Puede ser uno de los siguientes:

valor describir
URL Ubicación de los recursos de imagen
ul { estilo de lista: url(“/images/symbol.png”); }

notas

  • Los atributos de estilo de lista se pueden aplicar a
      ,

        o

      • Etiqueta.
      • Los estilos de lista se aplican a elementos con display: list-item.
      • Al usar el atributo de estilo de lista, puede proporcionar uno o todos los valores (valores de tipo de estilo de lista, posición de estilo de lista e imagen de estilo de lista) en cualquier orden.
      • Consulte también las propiedades list-style-image, list-style-position y list-style-type.

      Compatibilidad del navegador

      La propiedad de estilo de lista CSS tiene soporte básico para los siguientes navegadores:

      • Aleación de cromo
      • Firefox (Geco)
      • Navegador de Internet (IE)
      • ópera
      • Safari (WebKit)

      ejemplo

      Discutiremos la propiedad de estilo de lista a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.

      Usar una lista ordenada

      Veamos un ejemplo de estilos de lista CSS donde aplicamos el estilo de lista a una lista ordenada.

      HTML se ve así:

      <ol>
  <li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li>
  <li>CheckYourMath.com has answers to your every day Math questions.</li>
  <li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li>
</ol>

      CSS se ve así:

      ol { list-style: decimal-leading-zero outside; }

      La lista ordenada se ve así:

      En este ejemplo de estilo de lista CSS, hemos elegido establecer el tipo de estilo de lista en ceros decimales a la izquierda.

        Cada elemento de la lista en la etiqueta está precedido por un decimal con un cero inicial. La posición del estilo de la lista se establece en exterior, lo que hace que los marcadores de elementos de la lista (es decir, números) aparezcan con menos sangría, y cuando el texto del elemento de la lista se ajusta, el texto sigue estando más sangrado que el número.

        Usar una lista desordenada

        A continuación, veamos un ejemplo de estilo de lista CSS en el que aplicamos el estilo de lista a una lista desordenada.

        HTML se ve así:

        <ul>
  <li>TechOnTheNet.com</li>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ul>

        CSS se ve así:

        ul { list-style: square; }

        La lista desordenada se ve así:

        En este ejemplo de estilo de lista CSS, elegimos

      1. Aparecen cuadrados rellenos (en lugar de discos de lista desordenados) delante del elemento.

        con elementos de lista

        Veamos un ejemplo de estilos de lista CSS donde aplicamos estilos de lista a elementos de lista.

        HTML se ve así:

        <ul>
  <li>TechOnTheNet.com</li>
  <li>CheckYourMath.com</li>
  <li>BigActivities.com</li>
</ul>

        CSS se ve así:

        li { list-style: url("/images/symbol.gif"); }

        Esto hará que los elementos de la lista aparezcan de la siguiente manera (independientemente de si los elementos de la lista son parte de una lista ordenada o desordenada):

        En este ejemplo de estilo de lista, aparecerá una imagen de símbolo.gif delante de cada elemento de la lista.