Listas ordenadas, não ordenadas e de definição

Listas ordenadas, não ordenadas e de definição. ul, ol, li,dd, dl e dt

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 não 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> difinition 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




 

Veja também:




// Comentários

denison // aracaju // 04/09/2008 19:21:00

so entrei para tirar uma dúvida uhahuauhahuahu

Noel Reis // Salvador // 02/07/2009 21:37:00

Sem jogar confetes, muito bem explicado o assunto...

Fernando Alves // curitiba // 19/09/2009 11:58:00

Muito bem explanado o assunto e de fácil entendimento, parabéns!





 

2007-2012   //   Blog do Luis   //   Política de Privacidade   //   Eu creio em Deus