Como estilizar uma lista com CSS

Escrito por ehow contributor | Traduzido por aline kachel araujo
Como estilizar uma lista com CSS

Uma lista estilizada pode ser uma barra de menu atrativa em um site

Use listas para reforçar sua ideia de forma rápida, numerar passos em ordem ou criar um menu para seu site.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

O que você precisa?

  • Conhecimento básico de CSS
  • Conhecimento básico de HTML
  • Site
  • Editor básico de textos, ou ferramenta de edição HTML como o Dreamweaver
  • Nenhum material adicional é necessário neste passo
  • Nada novo é necessário nesta seção

Lista completaMinimizar

Instruções

    Mudar ou remover os marcadores de lista

  1. 1

    A lista-estilo-fonte proprietária do CSS é usada para determinar o tipo de marcador que uma lista usa ou para remover totalmente os marcadores de uma lista. Valores possíveis para a lista-estilo-fonte incluem: disco, círculo, quadrado, decimal, alfa maiúsculo, alfa minúsculo, romano maiúsculo, romano minúsculo e nenhum.

  2. 2

    Se quiser exibir a lista usando números romanos maiúsculos, por exemplo, o CSS será: ol { list-style-type: upper-roman; } Para outros tipos de marcadores, basta mudar o valor fornecido para o tipo de marcador.

  3. 3

    Caso não queira nenhum marcador, o CSS será: ol { list-style-type: none; } Para uma lista sem ordem: ul { list-style-type: none; }

  4. 4

    Para mudar o marcador de lista para uma imagem, use a lista-estilo-imagem. Por exemplo, caso queira uma pequena imagem de estrela como marcador. Eis um exemplo de como fornecer a URL para o gráfico. ul { list-style-image: url(estrela.gif); }

    Exiba a lista horizontalmente

  1. 1

    O código CSS que faz com que uma lista seja exibida na horizontal é o display. Para a exibição horizontal, o valor da lista deve ser inline.

  2. 2

    Comece com uma lista normal e não ordenada. Aplique o seguinte código CSS li{ list-style-type: none; display: inline; } A imagem mostra o que o CSS fará com uma lista normal não ordenada e objetivo.

  3. 3

    A lista precisa de estilização adicional, talvez bordas e enchimento, mas a técnica básica está no passo 2. Veja a seção seguinte para dicar sobre como criar estilos em listas que contenham links.

    Estilize uma lista como menu

  1. 1

    Nesta seção, veremos uma barra de menu vertical, ou barra de navegação. Não são necessárias imagens na barra de navegação, apenas de CSS.

  2. 2

    Uma lista sem ordem costuma ser usada como menu. Cada lista contém um elemento A que cria um link. Parte do CSS aplica-se à lista e parte aos links.

  3. 3

    Comece removendo os marcadores da lista. Para evitar que o exemplo ocupe uma página inteira, adicione uma largura também. Por exemplo, ul{ list-style-type: none; width: 200px; }

  4. 4

    Não é necessário, mas adicionarei uma borda preta ao exemplo. Isso fará com que a lista na borda pareça mais como uma barra de navegação. Eis o CSS. li { border: 1px solid #000; }

  5. 5

    Isso faz com que a lista se pareça com um menu, mas a única parte em que pode clicar é a própria palavra do item da lista. Faça com que seja possível clicar em toda a área adicionando uma régua para os links.

  6. 6

    Use o seletor descendente li a. Isso vai selecionar os links que pertencem a sua lista. Eis o CSS: li a { display: block; } A visualização: bloquear a régua faz com que toda a lista comporte-se como um link, tornando-se clicável. Repare o dedo apontando na imagem, o que mostra que qualquer área dentro da caixa pode ser clicada para operar o menu.

Dicas & Advertências

  • Há também a lista-estilo-posição do CSS, na qual pode ter valores internos ou de herança. Use a lista-estilo-posição para determinar se a lista é exibida dentro ou fora do marcador de lista.
  • Use margens, estofamento e cores de fundo ou imagens para enfeitar a lista.
  • Preencha a cor do fundo (ou imagem) e mude para cada item da lista quando o usuário fica sobre ele através de uma régua CSS com o seletor li a:hover.

Não deixe de ver

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível

Direitos autorais © 1999-2015 Demand Media, Inc.

O uso deste site constitui plena aceitação dos Termos de Uso e Política de privacidade de eHow. Ad Choices pt-BR

Demand Media