Lista é um importante recurso de HTML, pois permite criarmos tópicos de textos para uma melhor exemplificação de um determinado assunto. São recursos extremamente usados, inclusive quando nem imaginamos que ele esta sendo usado, como no caso de menus. Hoje, boa parte dos menus em HTML é feito com listas.
Há três tipos de listas:
- Não ordenada
- Ordenada ou numerada
- De definição - usada para fazer comentários sobre os itens expostos
Listas não ordenadas
As listas não numeradas são usadas para listar itens, sem se preocupar com sua sequência. Chamamos de lista de marcadores apenas.
As tags usadas para criar uma lista não ordenada são <ul> e <li>. A tag <ul> é usada para definir a lista e a tag <li> é usada para cada item da lista.
<ul>
<li>Internet Explorer</li>
<li>Opera</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
Listas ordenadas ou numerada
As listas ordenadas ou numeradas são usadas para indicar alguma sequência ou numeração
As tags usadas para criar uma lista ordenada são <ol> e <li>. A tag <ol> é usada para definir a lista e a tag <li> é usada para cada item da lista.
<ol>
<li>São Paulo</li>
<li>Rio de Janeiro</li>
<li>Belo Horizonte</li>
<li>Brasília</li>
</ol>
Listas de definição
Listas de definição são usadas em assuntos onde há um termo a em sequência a sua definição, estilo perguntas e respostas.
As tags usadas são <dl>, <dt> e <dd>.
- <dl> definition list - cria a lista de definição
- <dt> definition term - onde o termo é proposto
- <dd> definition definition - onde o termo é definido
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação de texto</dd>
<dt>CSS</dt>
<dd>Usado para formatação de documentos</dd>
</dl>
Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Listas ordenadas, não ordenadas e de definição</title>
<link href="estilo_listas.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h2>Principais browsers</h2>
<ul>
<li>Internet Explorer</li>
<li>Opera</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
<h2>Principais cidades do Brasil</h2>
<ol>
<li>São Paulo</li>
<li>Rio de Janeiro</li>
<li>Belo Horizonte</li>
<li>Brasília</li>
</ol>
<h2>Linguagens de internet</h2>
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação de texto</dd>
<dt>CSS</dt>
<dd>Usado para formatação de documentos</dd>
</dl>
</body>
</html>
Para criar menus de navegação, além de listas, você precisará usar links. Veja o post: Links internos, externos, verticais e de email.
Formatação da lista
As listas vem com a formatação padrão do HTML, para mudar a formatação precisamos recorrer ao CSS, para isto crie um arquivo com o nome estilo_listas.css e salve na mesma pasta que o exemplo acima. Abaixo o código do arquivo estilo_listas.css
body{
font-family: Arial, Verdana, Tahoma, Sans-Serif;
font-size: 12px;
}
ul {
list-style-type: square;
}
ul li{
padding: 3px 0px;
color: #FF0000;
}
ol {
list-style-type: lower-roman;
}
ol li{
color: #666666;
font-family: Georgia;
}
Analisando o código acima:
list-style-type: Esta prorpiedade é usada para alterar o marcador dos itens da lista. Os valores são diferentes para os tipos de listas. Os valores possíveis para listas ordenadas são:
- disc (padrão) - representação visual
- circle - representação visual
- square - representação visual
Há diversos valores para listas numeradas, porém, os mais usados são:
- decimal - numeração (1,2,3,4,...)
- lower-roman / upper-roman - sequência de caracteres romanos em caixa baixa/ALTA (i, ii, iii / I, II, III)
- lower-alpha / upper-alpha - sequência de caracteres arábicos em caixa baixa/ALTA (a,b,c / A,B,C)
Percebemos que o atributo <li> do HTML é o mesmo para as duas lista, logo teríamos um problema para formatar os itens de uma tabela com cor vermelho e na outra tabela em cinza.
Para resolver este problema, usamos uma estratégia bastante elegante e perfeitamente aceita em CSS, o encadeamento.
ul: formata apenas a lista ordenada
ol: formata apenas a lista numerada
ul li: formata os itens da lista ordenada
ol li: formata os itens da lista numerada
