CSS - Listas

Las listas son muy útiles para transmitir un conjunto de puntos numerados o con viñetas. Este capítulo le enseña cómo controlar el tipo de lista, la posición, el estilo, etc., usando CSS.

Tenemos las siguientes cinco propiedades CSS, que se pueden usar para controlar listas:

  • los list-style-type le permite controlar la forma o apariencia del marcador.

  • los list-style-position especifica si un punto largo que se ajusta a una segunda línea debe alinearse con la primera línea o comenzar por debajo del inicio del marcador.

  • los list-style-image especifica una imagen para el marcador en lugar de una viñeta o un número.

  • los list-style sirve como abreviatura de las propiedades anteriores.

  • los marker-offset especifica la distancia entre un marcador y el texto de la lista.

Ahora, veremos cómo usar estas propiedades con ejemplos.

La propiedad de tipo de estilo de lista

La propiedad list-style-type le permite controlar la forma o el estilo del punto de viñeta (también conocido como marcador) en el caso de listas desordenadas y el estilo de numeración de caracteres en listas ordenadas.

Estos son los valores que se pueden usar para una lista desordenada:

No Señor. Valor y descripción
1

none

N / A
2

disc (default)

Un círculo relleno
3

circle

Un circulo vacio
4

square

Un cuadrado relleno

Estos son los valores, que se pueden usar para una lista ordenada:

Valor Descripción Ejemplo
decimal Número 1,2,3,4,5
cero inicial decimal 0 antes del número 01, 02, 03, 04, 05
alfa inferior Caracteres alfanuméricos en minúscula a B C D e
alfa superior Caracteres alfanuméricos en mayúscula A B C D E
romano inferior Números romanos en minúscula yo, ii, iii, iv, v
romano superior Números romanos en mayúsculas I, II, III, IV, V
griego inferior El marcador es griego inferior alfa, beta, gamma
latín inferior El marcador es latín inferior a B C D e
latín alto El marcador es latino superior A B C D E
hebreo El marcador es la numeración hebrea tradicional  
armenio El marcador es la numeración armenia tradicional  
georgiano El marcador es la numeración tradicional georgiana.  
cjk-ideográfico El marcador son números ideográficos simples  
hiragana El marcador es hiragana a, yo, u, e, o, ka, ki
katakana El marcador es katakana A, I, U, E, O, KA, KI
hiragana-iroha El marcador es hiragana-iroha yo, ro, ja, ni, ho, él, a
katakana-iroha El marcador es katakana-iroha YO, RO, HA, NI, HO, HE, TO

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad list-style-position

La propiedad list-style-position indica si el marcador debe aparecer dentro o fuera del cuadro que contiene las viñetas. Puede tener uno de los dos valores:

No Señor. Valor y descripción
1

none

N / A
2

inside

Si el texto pasa a una segunda línea, el texto se ajustará debajo del marcador. También aparecerá con sangría donde el texto habría comenzado si la lista tuviera un valor de outside.
3

outside

Si el texto pasa a una segunda línea, el texto se alineará con el inicio de la primera línea (a la derecha de la viñeta).

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad list-style-image

La imagen de estilo de lista le permite especificar una imagen para que pueda usar su propio estilo de viñeta. La sintaxis es similar a la propiedad background-image con las letras url comenzando con el valor de la propiedad seguido de la URL entre paréntesis. Si no encuentra la imagen dada, se utilizan viñetas predeterminadas.

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad de estilo de lista

El estilo de lista le permite especificar todas las propiedades de la lista en una sola expresión. Estas propiedades pueden aparecer en cualquier orden.

Aquí hay un ejemplo:

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Producirá el siguiente resultado:

La propiedad de desplazamiento del marcador

La propiedad de desplazamiento del marcador le permite especificar la distancia entre el marcador y el texto relacionado con ese marcador. Su valor debe ser una longitud como se muestra en el siguiente ejemplo:

Desafortunadamente, esta propiedad no es compatible con IE 6 o Netscape 7.

Aquí hay un ejemplo:

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

Producirá el siguiente resultado: