LabEx
EntrarJunte-se

Estilize Listas com Atributos CSS

CSSBeginner
Pratique Agora

Introdução

Neste laboratório, os alunos explorarão a arte de estilizar listas usando CSS, com foco na transformação da aparência padrão de listas ordenadas, não ordenadas e de descrição. Os participantes aprenderão a personalizar os marcadores de lista através de várias propriedades CSS, como list-style-type, list-style-image e list-style-position, permitindo-lhes criar designs de lista visualmente atraentes e únicos.

O laboratório guia os alunos através de um processo passo a passo de criação de um projeto HTML com diferentes tipos de lista e, em seguida, aplicando técnicas CSS para modificar os estilos da lista. Ao final do laboratório, os alunos terão experiência prática em alterar os tipos de marcadores de lista, substituir os marcadores padrão por imagens personalizadas, ajustar o posicionamento dos marcadores e usar a propriedade abreviada list-style para estilizar listas de forma eficiente.

Configurar o Projeto HTML e Criar Listas Básicas

Nesta etapa, você configurará um projeto HTML básico e criará sua primeira lista para se preparar para explorar a estilização de listas CSS. Começaremos criando uma estrutura de projeto simples e um arquivo HTML com diferentes tipos de listas.

Primeiro, navegue até o diretório do projeto:

cd ~/project

Crie um novo diretório para o seu projeto de estilização de listas CSS:

mkdir css-list-styling
cd css-list-styling

Agora, crie um arquivo HTML chamado index.html usando o WebIDE:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>My Favorite Programming Languages</h1>

    <h2>Ordered List (Numbered)</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>Unordered List (Bulleted)</h2>
    <ul>
      <li>Web Development</li>
      <li>Data Science</li>
      <li>Machine Learning</li>
      <li>Mobile Apps</li>
    </ul>

    <h2>Description List</h2>
    <dl>
      <dt>HTML</dt>
      <dd>Hypertext Markup Language for web structure</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets for web design</dd>
    </dl>
  </body>
</html>

Este arquivo HTML demonstra três tipos de listas:

  1. Lista Ordenada (<ol>): Numerada automaticamente
  2. Lista Não Ordenada (<ul>): Usa marcadores padrão (bullet points)
  3. Lista de Descrição (<dl>): Usada para pares de termos e descrições

Exemplo de saída quando visualizado em um navegador:

  • A lista ordenada mostrará números (1, 2, 3, 4)
  • A lista não ordenada mostrará marcadores (bullet points)
  • A lista de descrição mostrará termos e descrições

Aplicar list-style-type para Alterar o Marcador da Lista

Nesta etapa, você aprenderá a usar a propriedade CSS list-style-type para personalizar a aparência dos marcadores de lista. O list-style-type permite que você altere os marcadores padrão (bullet points) ou números para vários estilos predefinidos.

Abra o arquivo index.html no WebIDE e adicione uma seção <style> no <head> para definir as regras CSS:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* Unordered List Styles */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* Ordered List Styles */
      .decimal-list {
        list-style-type: decimal;
      }

      .lower-alpha-list {
        list-style-type: lower-alpha;
      }

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>List Style Type Examples</h1>

    <h2>Unordered List Styles</h2>
    <ul class="square-list">
      <li>Square Markers</li>
      <li>Web Development</li>
      <li>Design Techniques</li>
    </ul>

    <ul class="circle-list">
      <li>Circle Markers</li>
      <li>Programming</li>
      <li>Software Engineering</li>
    </ul>

    <h2>Ordered List Styles</h2>
    <ol class="decimal-list">
      <li>Decimal Numbers</li>
      <li>Standard Numbering</li>
      <li>Default Style</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>Lowercase Letters</li>
      <li>Alphabetical Ordering</li>
      <li>a, b, c Style</li>
    </ol>

    <ol class="upper-roman-list">
      <li>Uppercase Roman Numerals</li>
      <li>Classic Numbering</li>
      <li>I, II, III Style</li>
    </ol>
  </body>
</html>

Valores chave de list-style-type:

  • Listas Não Ordenadas: disc (padrão), circle, square
  • Listas Ordenadas: decimal, lower-alpha, upper-roman e mais

Exemplo de saída em um navegador:

  • Marcadores quadrados para a primeira lista não ordenada
  • Marcadores de círculo para a segunda lista não ordenada
  • Números decimais para a primeira lista ordenada
  • Letras minúsculas para a segunda lista ordenada
  • Numerais romanos maiúsculos para a terceira lista ordenada

Usar list-style-image para Substituir os Marcadores Padrão

Nesta etapa, você aprenderá a usar list-style-image para substituir os marcadores de lista padrão por imagens personalizadas. Primeiro, você precisará baixar alguns ícones de exemplo para usar como marcadores de lista.

Crie um diretório images em seu projeto:

cd ~/project/css-list-styling
mkdir images

Baixe os ícones de exemplo usando curl:

curl -o images/check-icon.png https://labex.io/courses/icons/check-icon.png
curl -o images/star-icon.png https://labex.io/courses/icons/star-icon.png

Agora, atualize seu arquivo index.html para incluir imagens de marcadores de lista personalizadas:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* Adjust icon size if needed */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Custom List Markers with Images</h1>

    <h2>Checklist</h2>
    <ul class="check-list">
      <li>Complete CSS Tutorial</li>
      <li>Practice List Styling</li>
      <li>Create Web Project</li>
    </ul>

    <h2>Favorite Topics</h2>
    <ul class="star-list">
      <li>Web Development</li>
      <li>Design Principles</li>
      <li>User Experience</li>
    </ul>
  </body>
</html>

Pontos chave sobre list-style-image:

  • Usa url() para especificar o caminho da imagem
  • Substitui os marcadores de lista padrão por imagens personalizadas
  • Funciona com listas ordenadas e não ordenadas
  • O tamanho da imagem pode ser controlado com o preenchimento (padding) CSS

Exemplo de saída em um navegador:

  • Lista de verificação com marcadores de ícone de marca de seleção
  • Lista de tópicos favoritos com marcadores de ícone de estrela

Ajustar list-style-position para Posicionamento do Marcador

Nesta etapa, você explorará a propriedade CSS list-style-position, que controla como os marcadores de lista são posicionados em relação ao conteúdo da lista. Essa propriedade tem dois valores principais: outside (padrão) e inside.

Atualize seu arquivo index.html para demonstrar diferentes posições de marcadores de lista:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* Add some visual separation */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>List Style Position Demonstration</h1>

    <h2>Outside List Markers (Default)</h2>
    <ul class="outside-list">
      <li>Markers positioned outside the content area</li>
      <li>Default CSS behavior</li>
      <li>Markers align to the left of the text</li>
    </ul>

    <h2>Inside List Markers</h2>
    <ul class="inside-list">
      <li>Markers positioned inside the content area</li>
      <li>Markers are part of the list item text</li>
      <li>Content starts immediately after the marker</li>
    </ul>
  </body>
</html>

Pontos chave sobre list-style-position:

  • outside: Os marcadores são posicionados fora da caixa de conteúdo (padrão)
  • inside: Os marcadores são posicionados dentro da caixa de conteúdo
  • Afeta o layout e o alinhamento dos itens da lista
  • Útil para criar listas compactas ou visualmente distintas

Exemplo de saída em um navegador:

  • Lista "Outside": Marcadores à esquerda do texto
  • Lista "Inside": Marcadores dentro da área de texto
  • Cores de fundo ajudam a visualizar a diferença

Combinar Estilos de Lista com a Propriedade Shorthand list-style

Nesta etapa, você aprenderá a usar a propriedade shorthand list-style para combinar múltiplos atributos de estilo de lista em uma única declaração. Essa propriedade permite que você defina list-style-type, list-style-image e list-style-position em uma linha.

Atualize seu arquivo index.html para demonstrar a propriedade shorthand list-style:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shorthand List Styles</title>
    <style>
      /* Shorthand with type and position */
      .todo-list {
        list-style: square inside;
      }

      /* Shorthand with image and position */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* Full shorthand with type, image, and position */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* Reset to default */
      .default-list {
        list-style: initial;
      }

      /* Remove list styling */
      .no-style-list {
        list-style: none;
      }

      /* Add some spacing for readability */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Shorthand List Style Demonstration</h1>

    <h2>Todo List (Square Markers)</h2>
    <ul class="todo-list">
      <li>Learn CSS List Styling</li>
      <li>Practice Shorthand Properties</li>
      <li>Create Stylish Lists</li>
    </ul>

    <h2>Project List (Star Icons)</h2>
    <ul class="project-list">
      <li>Web Development Project</li>
      <li>Design System</li>
      <li>Interactive Tutorials</li>
    </ul>

    <h2>Completed Projects (Check Icons)</h2>
    <ol class="complete-list">
      <li>CSS Fundamentals</li>
      <li>Responsive Design</li>
      <li>Advanced Styling Techniques</li>
    </ol>

    <h2>No Style List</h2>
    <ul class="no-style-list">
      <li>Removed List Markers</li>
      <li>Clean Unstyled List</li>
      <li>No Visual Indicators</li>
    </ul>
  </body>
</html>

Pontos chave sobre o shorthand list-style:

  • Combina list-style-type, list-style-image e list-style-position
  • A ordem não importa para a maioria dos valores
  • none remove todos os estilos de lista
  • initial redefine para os estilos padrão do navegador

Exemplos de combinações shorthand:

  • list-style: square inside;
  • list-style: inside url('image.png');
  • list-style: lower-roman inside url('icon.png');

Resumo

Neste laboratório, os participantes exploram técnicas de estilização de listas CSS, criando um projeto HTML com vários tipos de listas, incluindo listas ordenadas, não ordenadas e de descrição. O laboratório guia os alunos através da personalização da aparência das listas usando propriedades CSS como list-style-type, list-style-image e list-style-position.

O exercício prático demonstra como modificar os marcadores de lista padrão, substituir marcadores padrão por imagens personalizadas e ajustar o posicionamento dos marcadores, fornecendo habilidades práticas para aprimorar o design de páginas web e melhorar a apresentação visual das listas usando atributos CSS.

Relacionados CSS Cursos
CSS para Iniciantes

CSS para Iniciantes

cssweb-development
Construa um Jogo da Velha Web

Construa um Jogo da Velha Web

javascriptweb-development
Criando um Jogo Web Whack-a-Mole

Criando um Jogo Web Whack-a-Mole

javascriptweb-development