elemento em HTML significa “lista não ordenada” e é usado para criar listas de itens onde a ordem dos itens não importa. É parte fundamental da estruturação do conteúdo de documentos web, permitindo apresentar as informações de forma visualmente organizada.
Sintaxe
O
- elemento consiste em um ou mais itens de lista (
- ) representam cada ingrediente e têm marcadores (estilo padrão do navegador) para indicar que fazem parte de uma lista não ordenada.
Atributos
O
- o elemento não possui muitos atributos; seu objetivo principal é organizar e estruturar o conteúdo como uma lista. Ele pode ser estilizado e modificado usando CSS para alterar sua aparência. Ele suporta atributos globais.
- tem uma borda para destacar seus limites.
Espaçamento e Margens
Ajuste o espaçamento entre os itens da lista e as margens ao redor de toda a lista para controlar a separação visual entre os itens e o conteúdo ao redor.
1
ul {
2
margin: 0; /* Remove default margin */
3
padding: 0; /* Remove default padding */
4
}5
6
li {
7
margin-bottom: 10px; /* Add space between list items */
8
}Tipografia
Defina o tamanho da fonte, o tipo de letra e a cor do texto dos itens da lista para garantir a legibilidade e a consistência com o design geral da página.
1
ul {
2
font-family: Arial, sans-serif;
3
font-size: 16px;
4
color: #333;
5
}Recuo
Use CSS para controlar o recuo de toda a lista e de itens individuais da lista. Ajustar o recuo pode criar mais legibilidade em um grande corpo de texto.
1
ul {
2
padding-left: 20px; /* Indent the entire list */
3
}4
5
ul ul {
6
padding-left: 30px; /* Further indent nested lists */
7
}Plano de fundo e bordas
Aplique cores de fundo, bordas ou outros efeitos visuais para destacar ou diferenciar listas do conteúdo ao redor. Isso pode ser particularmente útil para menus de navegação ou listas de textos explicativos.
1
ul {
2
background-color: #f9f9f9;
3
border: 1px solid #ccc;
4
border-radius: 5px;
5
}Design Responsivo
Considere como suas listas aparecerão em diferentes tamanhos de tela. Use consultas de mídia e princípios de design responsivo para adaptar o estilo das listas para dispositivos móveis e desktop.
Acessibilidade
Certifique-se de que suas escolhas de estilo não comprometam a acessibilidade. Mantenha contraste suficiente entre as cores do texto e do fundo e evite usar apenas sugestões de cores para transmitir informações (por exemplo, para marcadores de lista). Teste suas listas com leitores de tela para garantir que sejam navegáveis e compreensíveis para todos os usuários.
Contente
O
- elemento aceita um ou mais
- O
- Por padrão, os navegadores normalmente renderizam
- Listas criadas com
Você sabia?
Saber mais
- O
Considerações de estilo
Quando se trata de estilizar o
- elemento, existem algumas práticas recomendadas a serem lembradas para garantir que suas listas sejam visualmente atraentes e fáceis de usar:
Listar estilos de marcadores
Por padrão, os navegadores renderizam
- elementos com marcadores como marcadores de lista. Você pode personalizar os estilos dos marcadores de lista usando CSS. Os estilos comuns incluem a alteração da forma (por exemplo, disco, quadrado, círculo), tamanho, cor e posição dos marcadores.
1
ul {
2
list-style-type: disc; /* Change marker shape */
3
list-style-position: inside; /* Place markers relative to list item content */
4
}Experimente você mesmo essas propriedades! Observe como cada
- tem uma borda para destacar seus limites.
) como seus filhos. Aqui está um exemplo básico da sintaxe:
1 |
|
2 |
Item 1
|
3 |
Item 2
|
4 |
Item 3
|
5 |
|
Exemplo
Aqui está outro exemplo de como
- elemento funciona em um cenário do mundo real:
Neste exemplo, uma lista não ordenada exibe uma lista de ingredientes de uma receita. Os itens da lista (
