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