2.8 KiB

Raw Blame History

title	localeTitle
Lists	Listas

Listas

Listas são usadas para exibir itens. Existem 3 tipos de listas.

Listas ordenadas

Uma lista ordenada é usada para descrever uma coleta ordenada de dados. Os navegadores geralmente exibem uma lista ordenada como uma lista numerada. Crie uma lista ordenada usando a tag <ol> .

Listas não ordenadas

Uma lista não ordenada é usada para descrever uma coleção não ordenada de dados. Os navegadores geralmente exibem uma lista não ordenada como uma lista com marcadores. Crie uma lista não ordenada usando a tag <ul> .

Lista de itens

Os filhos diretos de listas ordenadas e não ordenadas devem ser itens de lista. Cada item da lista é encapsulado em uma tag <li> . Uma tag de item de lista pode conter conteúdo de fluxo .

Exemplos

Uma lista ordenada é escrita como

<ol> 
  <li>January</li> 
  <li>February</li> 
  <li>March</li> 
 </ol>

e é exibido como:

janeiro
fevereiro
marcha

Uma lista não ordenada é escrita como

<ul> 
  <li>Macintosh</li> 
  <li>Fuji</li> 
  <li>Gala</li> 
 </ul>

e é exibido como:

Macintosh
Fuji
Gala

Styling Bulletpoints

Uma lista ordenada pode ser usada para uma variedade de funções e em vários estilos. Como a mudança das cores de tag abrangente não altera a cor das próprias marcas, é possível estilizá-las removendo primeiro as marcas pretas tradicionais e inserindo as suas próprias:

Remover marcadores:

ul { 
  list-style: none; 
  }

Insira seu próprio:

ul li::before { 
  content: "\2022"; 
  color: orange; 
  display: inline-block; 
  width: 1em; 
  }

O estilo de conteúdo adiciona um novo bulletpoint enquanto o estilo display e width cria um espaço entre o marcador e a palavra. Estilos de fonte regulares podem ser aplicados aqui se você quiser deixar a marca maior ou mais ousada.

Listas de descrição

Uma lista de descrições é uma lista de termos, com uma descrição de cada termo. Uma lista de descrições é feita usando a tag <dl> . Cada item na lista é composto de duas tags: um termo <dt> e uma descrição desse termo <dd> . Eles são chamados de listas de definição em HTML 4.

Aqui está um exemplo de uma lista de descrição:

<dl> 
  <dt>Programming</dt> 
  <dd>The process of writing computer programs.</dd> 
  <dt>freeCodeCamp</dt> 
  <dd>An awesome non-profit organization teaching people how to code.</dd> 
 </dl>

o que acabaria parecendo:

Programação

O processo de escrever programas de computador.

freeCodeCamp

Uma incrível organização sem fins lucrativos que ensina as pessoas a codificar.

Mais Informações:

Listas de HTML em w3schools

2.8 KiB Raw Blame History