CSS - Listas

As listas são muito úteis para transmitir um conjunto de pontos numerados ou marcadores. Este capítulo ensina como controlar o tipo, a posição, o estilo da lista, etc., usando CSS.

Temos as seguintes cinco propriedades CSS, que podem ser usadas para controlar listas -

  • o list-style-type permite que você controle a forma ou aparência do marcador.

  • o list-style-position especifica se um ponto longo que termina em uma segunda linha deve se alinhar com a primeira linha ou começar abaixo do início do marcador.

  • o list-style-image especifica uma imagem para o marcador em vez de um marcador ou número.

  • o list-style serve como um atalho para as propriedades anteriores.

  • o marker-offset especifica a distância entre um marcador e o texto na lista.

Agora, veremos como usar essas propriedades com exemplos.

A propriedade list-style-type

A propriedade list-style-type permite controlar a forma ou o estilo do marcador (também conhecido como marcador) no caso de listas não ordenadas e o estilo dos caracteres de numeração em listas ordenadas.

Aqui estão os valores que podem ser usados ​​para uma lista não ordenada -

Sr. Não. Valor e descrição
1

none

N / D
2

disc (default)

Um círculo preenchido
3

circle

Um círculo vazio
4

square

Um quadrado preenchido

Aqui estão os valores, que podem ser usados ​​para uma lista ordenada -

Valor Descrição Exemplo
decimal Número 1,2,3,4,5
decimal à esquerda 0 antes do número 01, 02, 03, 04, 05
alfa inferior Caracteres alfanuméricos minúsculos a, b, c, d, e
alfa superior Caracteres alfanuméricos maiúsculos A, B, C, D, E
romano inferior Números romanos minúsculos i, ii, iii, iv, v
romano superior Numerais romanos maiúsculos I, II, III, IV, V
grego inferior O marcador é grego inferior alfa, beta, gama
latim inferior O marcador é latim inferior a, b, c, d, e
latim superior O marcador é latim maiúsculo A, B, C, D, E
hebraico O marcador é uma numeração hebraica tradicional  
armênio O marcador é a numeração armênia tradicional  
georgiano O marcador é a numeração tradicional da Geórgia  
cjk-ideográfico O marcador são números ideográficos simples  
hiragana O marcador é hiragana a, i, u, e, o, ka, ki
katakana O marcador é katakana A, I, U, E, O, KA, KI
hiragana-iroha O marcador é hiragana-iroha eu, ro, ha, ni, ho, ele, para
katakana-iroha O marcador é katakana-iroha I, RO, HA, NI, HO, HE, TO

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -

A propriedade list-style-position

A propriedade list-style-position indica se o marcador deve aparecer dentro ou fora da caixa que contém os marcadores. Pode ter um dos dois valores -

Sr. Não. Valor e descrição
1

none

N / D
2

inside

Se o texto for para uma segunda linha, o texto será quebrado abaixo do marcador. Ele também aparecerá recuado para onde o texto teria começado se a lista tivesse um valor de fora.
3

outside

Se o texto for para uma segunda linha, o texto será alinhado com o início da primeira linha (à direita do marcador).

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -

A propriedade list-style-image

A imagem do estilo de lista permite que você especifique uma imagem para que possa usar seu próprio estilo de marcador. A sintaxe é semelhante à propriedade background-image com as letras url iniciando o valor da propriedade seguido pelo URL entre colchetes. Se não encontrar a imagem fornecida, serão usados ​​marcadores padrão.

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -

A propriedade em estilo de lista

O estilo de lista permite que você especifique todas as propriedades da lista em uma única expressão. Essas propriedades podem aparecer em qualquer ordem.

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -

A propriedade do marcador-offset

A propriedade marker-offset permite que você especifique a distância entre o marcador e o texto relacionado a esse marcador. Seu valor deve ser um comprimento, conforme mostrado no exemplo a seguir -

Infelizmente, esta propriedade não é compatível com o IE 6 ou Netscape 7.

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -