Listas
Ordenação de listas
As tags <ol> e <ul> são as usadas para montar listas:
<ol> para listas com letras e números
<ul> com pontos de diferentes formatos
Tanto os pontos quantos os números e letras podem ser alterados por uma propriedade de CSS.
Marcadores
Esta propriedade é “list-style-type”, que pode mudar o estilo do ponto, número ou letra, sendo um círculo, um quadrado ou um número romano, por exemplo.
Também há a propriedade “list-style-position”, que determina se o ponto estará dentro ou fora da caixa do item da lista.
Cores em listas
As cores das listas também podem ser alteradas, podendo mudar a cor do fundo da caixa externa da lista, a cor do fundo dos itens da lista ou a cor do texto dos itens da lista. O ponto do item da lista recebe a cor do texto.
Tabelas
Borda das tabelas
A borda das células de uma tabela podem ser editadas assim como as bordas das caixas usando a propriedade “border”.
Largura e altura das células
A largura e altura das células da tabela podem ser definidas pelas propriedades “width”(largura) e “height”(altura). Podem ser atribuídos valores absolutos ou relativos.
Alinhamento do texto
O alinhamento horizontal do texto pode ser definido pela propriedade “text-align”:
- text-align:left;
- text-align:center;
- text-align:right;
Já o alinhamento vertical pode ser definido pela propriedade “vertical-align”:
- vertical-align: top;
- vertical-align: middle;
- vertical-align: bottom;
Diferentes estilos
- A propriedade “border-bottom” aplicada nas tags e permite que a tabela tenha apenas bordas horizontais, sendo uma escolha estética para a tabela.
- th, td {border-bottom: 1px solid #ddd;}
- Espaçamento interno pode ser definido dentro das células.
Cores
- Os fundos e os textos podem ter suas cores mudadas;
- O seletor “:hover” pode ser usado na tag para destacar a linha da tabela em que o mouse estiver em cima;
- tr:hover {background-color: coral;}
- O seletor “nth-child()” pode ser usado para criar tabelas com listras, mudando as cores das linhas pares ou ímpares.
- tr:nth-child(even) {background-color: #f2f2f2;}
Exercícios
Arquivos da aula: https://drive.google.com/drive/folders/1CeGF-tULm5cj_-tn4W23DocRISoaIg1x?usp=sharing
Usar os conceitos de listas e tabelas abordados na aula para formatar as tabelas da página “exercicio.html”.
Dica: use o site www.w3schools.com/css para te ajudar
