Estilização de Listas CSS

Introdução

Neste laboratório, você aprenderá como transformar uma lista HTML padrão e sem estilo em um menu de navegação horizontal visualmente atraente usando CSS. Por padrão, listas HTML (<ul>) são exibidas verticalmente com marcadores. Usaremos várias propriedades CSS fundamentais para remover o estilo padrão e criar uma barra de navegação limpa e moderna.

Você aprenderá a usar as seguintes propriedades CSS:

• list-style-type
• padding
• display
• background-color
• margin

Ao final deste laboratório, você terá uma compreensão sólida de como estilizar listas, uma tarefa comum no desenvolvimento web para criar menus, listas de itens e muito mais.

Definir list-style-type none no elemento ul

Nesta etapa, você começará removendo os marcadores padrão da lista não ordenada. A propriedade list-style-type em CSS é usada para controlar a aparência do marcador do item da lista.

Primeiro, localize o arquivo styles.css no explorador de arquivos no lado esquerdo do WebIDE e abra-o. O arquivo está atualmente vazio.

Agora, adicione a seguinte regra CSS ao styles.css. Esta regra tem como alvo o elemento <ul> e define seu list-style-type como none, o que ocultará os marcadores.

ul {
  list-style-type: none;
}

Após adicionar o código, salve o arquivo styles.css. Para ver o resultado, clique na aba "Web 8080" na parte superior da interface do LabEx. Você deverá ver a lista de itens sem os marcadores.

Aplicar padding 0 para remover o recuo padrão

Nesta etapa, você removerá o recuo padrão que os navegadores aplicam automaticamente às listas não ordenadas. Esse recuo é, na verdade, um padding no lado esquerdo do elemento <ul>.

Para removê-lo, você atualizará a regra ul existente em seu arquivo styles.css. Adicione a propriedade padding: 0; à regra. Isso define o preenchimento em todos os quatro lados do elemento como zero, removendo efetivamente o recuo do lado esquerdo.

Atualize seu arquivo styles.css para que fique assim:

ul {
  list-style-type: none;
  padding: 0;
}

Salve o arquivo e mude para a aba "Web 8080" para visualizar suas alterações. Você notará que a lista agora está alinhada à extrema esquerda de seu contêiner.

Usar display inline-block para lista horizontal

Nesta etapa, você mudará o layout dos itens da lista de vertical para horizontal. Por padrão, os itens de lista (<li>) são elementos de nível de bloco (block-level elements), o que significa que cada um ocupa toda a largura disponível e começa em uma nova linha.

Para colocá-los lado a lado, você pode alterar sua propriedade display. Usaremos o valor inline-block, que permite que os elementos fiquem um ao lado do outro como elementos inline, mas mantenham propriedades de nível de bloco como width, height e padding.

Adicione uma nova regra CSS para o elemento li em seu arquivo styles.css.

li {
  display: inline-block;
}

Seu arquivo styles.css completo deve agora parecer com isto:

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
}

Salve o arquivo e verifique a aba "Web 8080". Os itens da lista agora devem estar dispostos em uma única linha horizontal.

Adicionar background-color aos elementos li

Nesta etapa, você adicionará um estilo visual aos itens da lista para que eles se pareçam mais com botões de navegação. Adicionaremos uma cor de fundo e algum preenchimento interno.

A propriedade background-color define a cor de fundo de um elemento, e a propriedade padding adiciona espaço dentro da borda do elemento.

Modifique a regra li existente em styles.css para incluir essas novas propriedades.

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
}

Aqui, background-color: #f2f2f2; define um fundo cinza claro. padding: 8px 16px; adiciona 8 pixels de preenchimento na parte superior e inferior, e 16 pixels à esquerda e à direita do texto dentro de cada item da lista.

Salve o arquivo e atualize a aba "Web 8080". Você verá que cada item da lista agora tem um fundo cinza e mais espaço ao redor do texto, fazendo com que pareçam botões distintos.

Implementar margem entre os itens li

Nesta etapa final de estilização, você adicionará espaço entre os itens da lista para evitar que eles se toquem. A propriedade margin é usada para criar espaço ao redor de um elemento, fora de sua borda.

Para adicionar espaço apenas entre os itens, podemos aplicar uma margem no lado direito de cada item da lista usando a propriedade margin-right.

Atualize a regra li em seu arquivo styles.css mais uma vez:

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
  margin-right: 5px;
}

Isso adiciona uma margem de 5 pixels à direita de cada item da lista, separando-os uns dos outros. O último item também terá uma margem, mas ela não será visível, pois não há nenhum elemento ao lado dele.

Salve o arquivo e visualize a aba "Web 8080". Seu menu de navegação horizontal está agora completo, com espaçamento adequado entre cada botão.

Resumo

Parabéns! Você concluiu com sucesso este laboratório sobre estilização de listas CSS.

Você começou com uma lista HTML vertical padrão e a transformou em um menu de navegação horizontal estilizado. Ao longo do caminho, você aprendeu e aplicou várias propriedades CSS essenciais:

• list-style-type para remover os marcadores de lista padrão.
• padding para remover o recuo padrão da lista.
• display: inline-block para organizar os itens da lista horizontalmente.
• background-color e padding para estilizar os itens como botões.
• margin-right para criar espaço entre os itens.

Essas técnicas são fundamentais para a construção de barras de navegação e outros componentes baseados em listas em sites modernos.