Como Funcionam as Diferentes Propriedades list-style?

No CSS, a propriedade list-style é usada para controlar a aparência das listas em uma página da web. Quer você esteja trabalhando com listas ordenadas (ol) ou listas não ordenadas (ul), a propriedade list-style permite que você personalize como os itens da lista são exibidos. A propriedade list-style é na verdade uma abreviação para outras três propriedades:

list-style-type
list-style-position
list-style-image

Cada um desempenha um papel diferente na definição da aparência das listas. A propriedade list-style-type permite que você defina o tipo de marcador ou número usado em uma lista. Para listas não ordenadas, você pode escolher entre vários estilos de marcadores, como discos, círculos ou quadrados. Para listas ordenadas, você pode usar diferentes sistemas de numeração, como decimal, numerais romanos ou até caracteres alfabéticos. Aqui está um exemplo de uso de list-style-type:

<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Neste exemplo, os marcadores da lista não ordenada são alterados para quadrados. A propriedade list-style-type é a mais comumente usada das três, pois afeta diretamente a aparência do estilo de marcador ou numeração nas suas listas. A propriedade list-style-position controla a posição da marcação ou número em relação ao conteúdo do item da lista. Existem dois valores que você pode usar: inside e outside. Quando você usa o valor outside, a marcação ou número aparece fora do conteúdo, que é o comportamento padrão. E, quando você usa o valor inside, a marcação ou número aparece dentro do conteúdo, o que pode fazer o texto quebrar e alinhar com a marcação ou número. Aqui está um exemplo de uso de list-style-position:

<ul style="list-style-position: inside;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<ul style="list-style-position: outside;">
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Neste exemplo, ambos os valores inside e outside são fornecidos para duas tags de lista não ordenada diferentes. A propriedade list-style-position pode ser útil quando você quer controlar o alinhamento do conteúdo da lista, especialmente em situações onde você tem múltiplas linhas de texto em um único item da lista. A propriedade list-style-image permite que você use uma imagem como marcador para os itens da sua lista. Isso pode ser útil para adicionar um estilo visual único às suas listas. Aqui está um exemplo de uso de list-style-image:

<head>
  <style>
    ul {
      list-style-image: url('https://cdn.G.E.A.R ACADEMY.org/platform/universal/G.E.A.R ACADEMY-org-gravatar.jpeg');
      list-style-position: inside;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>

Neste exemplo, os marcadores são substituídos por um logo personalizado do G.E.A.R ACADEMY, adicionando um toque personalizado à lista. Ao usar list-style-image, certifique-se de que a imagem escolhida seja pequena e apropriada para o design da sua página web. Se a imagem for muito grande ou complexa, ela pode tornar a lista mais difícil de ler. Você pode combinar as três propriedades – list-style-type, list-style-position e list-style-image – em uma única propriedade abreviada list-style. A ordem dos valores no shorthand não importa, mas os três podem ser especificados juntos. Aqui está um exemplo usando a propriedade abreviada:

<ul style="list-style: square inside url('https://cdn.G.E.A.R ACADEMY.org/curriculum/cat-photo-app/relaxing-cat.jpg');">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Neste exemplo, os itens da lista usam marcadores quadrados, posicionados dentro do conteúdo, com uma imagem personalizada como marcador. No entanto, se a imagem não estiver disponível ou não for renderizada, os marcadores quadrados serão usados como alternativa.

Este módulo não possui perguntas. Marque como concluído.

Como Funcionam as Diferentes Propriedades list-style?

Concluído!