Trabalhando com listas ordenadas no HTML

trabalhando com as tags <UL> e <LI>

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:

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>    <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:

Há diversos valores para listas numeradas, porém, os mais usados são:

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

Artigos relacionados