Estilizando listas
Neste tópico, vamos aprender como dar estilo às listas em nossas páginas web. Assim como em uma lista de compras ou uma lista de tarefas, podemos tornar as listas em nossos sites mais atraentes e organizadas.
Estilizando Listas não ordenadas
As listas não ordenadas são como listas simples, onde os itens são marcados com um ponto ou um símbolo. Podemos personalizar esses símbolos para que combinem com o estilo do nosso site.
Podemos mudar a cor, o tamanho e o tipo de marcador para deixar a lista mais divertida ou elegante.
Exemplo de código:
ul {
list-style-type: square;
color: blue;
}
Estilizando Listas ordenadas
As listas ordenadas são semelhantes às listas não ordenadas, mas os itens são numerados ou ordenados de alguma forma.
Assim como em um livro, podemos escolher o estilo de numeração ou ordenação da lista. Podemos usar números, letras ou outros caracteres para criar uma aparência única.
Exemplo de código:
ol {
list-style-type: upper-roman;
font-weight: bold;
}
Estilizando Listas de descrição
As listas de descrição são usadas para fornecer informações adicionais sobre cada item. Podemos criar uma lista onde cada item é composto por um termo e sua descrição correspondente.
Podemos ajustar o espaçamento, a cor e o estilo dos termos e das descrições para tornar a lista mais legível e organizada.
Exemplo de código:
dl {
margin-bottom: 10px;
}
dt {
font-weight: bold;
}
dd {
margin-left: 20px;
}
Agora que você aprendeu a estilizar listas de forma criativa, é hora de colocar seus conhecimentos em prática com um exercício do módulo.
Quer mais informações sobre o assunto? clique em sabia mais
