Como estilizar um link usando CSS

Escrito por ehow contributor | Traduzido por weber figueiredo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como estilizar um link usando CSS
Uma página web com dois estilos diferentes de links

Os hiperlinks em páginas web têm muitas propriedades as quais podem ser estilizadas. Você pode mudar cor, sublinhado, background e muitos outros aspectos de aparência com CSS. Aqui estão algumas dicas para você começar.

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
  • Editor HTML
  • Nada de novo é necessário para esta seção

Lista completaMinimizar

Instruções

    Estilos para todos os seus links

  1. 1

    O seletor de CSS para hiperlinks é o "A". O termo correto em inglês é anchor (âncora) e não link, porém, convencionou-se chamar assim. Elementos A podem ser um "target" de pseudo seletores de classe CSS, com base no estado do link. As pseudo classes mais comuns usam estes seletores CSS:

    a:link a:visited a:hover a:active

  2. 2

    As regras CSS para os vários estados de link determinam fonte, decoração (se o link é ou não sublinhado), cor, cor de fundo ou imagem de fundo, propriedades de exibição (como em linha ou bloco), borda, preenchimento margem, entre outras.

  3. 3

    Este conjunto de regras simples faz todos os elementos A aparecerem em negrito. Em seguida, ele passa pelos estados individuais dos links para definir diferentes valores para cores e decoração de texto para cada um.

    a { font-weight: bold; }

    a:link { color: #660066; text-decoration: none; } a:visited { color: #663366; text-decoration: none; } a:hover { color: #660066; text-decoration: underline; } a:active { color: #660066; text-decoration: none; }

  4. 4

    Regras como os exemplos do Passo 3 aplicam-se a todos os links de uma página inteira. Propriedades como cor de background, borda e outros, podem ser adicionados às regras, como o exemplo no Passo 3.

    Estilos de link para áreas específicas da página

  1. 1

    A maioria das páginas web são dispostas em divisões ou áreas que podem ser identificados com um id ou classe. Quando você coloca links em uma "div" ou em outra seção da página identificada com um id ou classe, você pode criar seletores descendentes para estilizar os links com as regras que devem se aplicar somente a esta seção.

  2. 2

    A imagem na abertura deste artigo mostrou um exemplo de página com links usando estilos diferentes baseados em seletores descendentes. Suponha que as duas áreas da página web foram criadas com divs com ids atribuídas. A div "content" usa o id "content" e a div navbar usa o id "navbar".

  3. 3

    Use o id (ou classes) que identificam várias divisões de uma página para criar seletores que só funcionarão naquela parte da página. Usando as suposições feitas no Passo 2, as regras para estes seletores iria criar estilos diferentes em duas áreas da página:

    content a:link

    content a:visited

    content a:hover

    content a:active

    navbar a:link

    navbar a:visited

    navbar a:hover

    navbar a:active

  4. 4

    Suponha que a página use uma classe chamada "blogpost" para cada entrada. Você pode estilizar links individualmente apenas para aquelas áreas da página, também. Seletores descendentes para os links seriam assim:

    .blogpost a:link .blogpost a:visited .blogpost a:hover .blogpost a:active

Dicas & Advertências

  • Um pseudo ​​seletor de classe menos usado é o a:focus.
  • Para saber como fazer um link aparecer como uma barra de navegação, consulte o artigo Como estilizar uma lista com CSS
  • Para melhores resultados, mantenha as regras de estilo nesta ordem: L-V-H-A, ou link, visited, hover, active.

Não perca

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