Como formatar texto em listas HTML

Listas HTML são extremamente personalizáveis ​​com CSS. Muitos menus de um site são alimentados por listas HTML cuidadosamente formatadas. Se você tiver a coragem de analisar o código-fonte do Facebook, pode até ver que eles usam listas HTML não ordenadas para estilizar a navegação. Existem dois elementos para estilizar o texto em uma lista: a tag da lista de base ("

") e a tag de item da lista ("
• Você também pode usar uma classe ou um estilo para especificar um único ou um conjunto de listas HTML. A formatação do texto pode ser feita em qualquer nível.

  1

  Abra o seu arquivo de folha de estilo em cascata - que usa a extensão de arquivo .css - em seu editor de texto simples preferido. Especifique "ul" (ou "ol" se você estiver formatando uma lista ordenada) ou o id da sua tag de lista. Por exemplo, se você estiver formatando "

  "você começaria com:

  ul {}

  2

  Adicione a formatação de texto junto com qualquer outra formatação para sua lista não ordenada. Por exemplo, se você quiser fazer todo o texto em uma lista não ordenada 12pt e azul, pode ser algo como isto:

  ul {font-size: 12pt; cor: # 8CCCC8; }

  3

  Altere o tipo de estilo de lista - a imagem ou símbolo no início de cada item da lista. O W3Schools.com especifica mais de uma dúzia de tipos diferentes para o estilo da lista. Se você não quiser nada no começo da lista, você pode usar "list-style: none;", por exemplo:

  ul {font-size: 12pt; cor: # 8CCCC8; estilo de lista: nenhum; }

  4

  Salve sua folha de estilo e documento e teste os itens da lista no seu navegador.

  Dicas

  • Se você quiser usar a lista como um elemento de navegação horizontal, poderá usar
  • "display: inline" e "float: left;"

  Aviso

  • Use apenas um editor de texto simples, como o Notepad, o Notepad ++ ou o TextWrangler, para editar arquivos HTML e CSS.