EasyCode365EasyCode365

Criando links e navegação

Links ajudam as pessoas a navegar por um site.

Um menu de navegação é um grupo de links que aponta para as páginas principais, como Início, Sobre, Blog ou Contato. Estilos claros de link e navegação simples tornam um site mais fácil de entender e usar.

Nesta aula, você aprenderá a estilizar estados de links e criar menus básicos de navegação vertical e horizontal.

O que é um link em HTML

Em HTML, um link é criado com a tag <a>.

O atributo href diz ao navegador para onde o link deve ir.

Somente leitura
<a href="https://www.easycode365.com/" target="_blank">Visitar Example</a>

O texto entre a tag de abertura e a de fechamento é o texto clicável que os usuários veem.

Estilo básico de links com CSS

Os navegadores estilizam links automaticamente.

Por padrão, links geralmente são azuis e sublinhados. Depois que um usuário visita um link, o navegador pode mostrá-lo com outra cor.

CSS permite mudar o estilo padrão do link:

Editável
<p>Visite a <a href="https://www.easycode365.com/" target="_blank">página de prática de CSS</a>.</p>

<style>
  a {
    color: blue;
    text-decoration: underline;
  }
</style>

Você também pode estilizar apenas links específicos usando uma classe:

Editável
<p>
  Leia o
  <a href="https://www.easycode365.com/" target="_blank" class="text-link"
    >guia de CSS para iniciantes</a
  >.
</p>

<style>
  .text-link {
    color: #2563eb;
    font-weight: bold;
  }
</style>

Estados de link

Links podem ter aparência diferente dependendo do que o usuário está fazendo.

CSS usa pseudo-classes para estilizar estes estados:

  • :link: um link que o usuário ainda não visitou
  • :visited: um link que o usuário já abriu antes
  • :hover: um link quando o ponteiro do mouse está sobre ele
  • :active: um link no momento em que está sendo clicado
  • :focus-visible: um link selecionado com o teclado, geralmente ao pressionar Tab

O estado de foco pelo teclado é importante para acessibilidade. Algumas pessoas navegam em sites sem mouse, então precisam de um estilo visual de foco claro.

Quando você estiliza :link, :visited, :hover e :active, uma ordem comum é:

Somente leitura

Muitos desenvolvedores lembram essa ordem como LoVe HAte: link, visited, hover, active.

Coloque :focus-visible perto dos estilos de hover, porque os dois estados mostram que o usuário está mirando no link.

Propriedades comuns para links

Links são texto, mas também podem se comportar como pequenas caixas.

Propriedades úteis incluem:

  • color: muda a cor do texto
  • text-decoration: controla o sublinhado
  • font-weight: deixa o link mais leve ou mais em negrito
  • padding: adiciona espaço clicável dentro do link
  • background-color: adiciona cor atrás do link
  • border-radius: arredonda os cantos quando o link tem fundo

Tenha cuidado com text-decoration: none;. Se você remover o sublinhado, garanta que o link ainda pareça diferente do texto normal.

O padding funciona melhor quando o link usa display: block ou display: inline-block, como você verá nos exemplos de navegação abaixo.

Exemplo executável: link de texto estilizado

Este exemplo estiliza um link nos estados normal, hover, active e foco pelo teclado.

Editável
<p>
  Leia nosso
  <a href="https://www.easycode365.com/" target="_blank" class="text-link"
    >guia de CSS para iniciantes</a
  >.
</p>

<style>
  .text-link:link,
  .text-link:visited {
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
  }

  .text-link:hover {
    color: #ea580c;
    text-decoration: underline;
  }

  .text-link:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
  }

  .text-link:active {
    color: #dc2626;
  }
</style>

Tente mover o mouse sobre o link. Você deve ver o estilo hover.

Se estiver usando o teclado, pressione Tab até o link receber foco. Você deve ver o contorno de foco.

O que é um menu de navegação

Um menu de navegação é um grupo de links.

Desenvolvedores costumam criar navegação com um elemento <nav> e uma lista:

Somente leitura
<nav>
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Início</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Sobre</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contato</a></li>
  </ul>
</nav>

O elemento <nav> informa ao navegador, aos mecanismos de busca e às tecnologias assistivas que esse grupo de links é para navegação.

Menu de navegação vertical

Um menu vertical empilha links de cima para baixo.

Isso funciona bem para barras laterais ou menus simples de curso.

Editável
<nav class="vertical-nav" aria-label="Navegação lateral">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Início</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Aulas</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contato</a></li>
  </ul>
</nav>

<style>
  .vertical-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;
    font-family: Arial, sans-serif;
  }

  .vertical-nav a {
    display: block;
    padding: 10px 12px;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid #d1d5db;
  }

  .vertical-nav a:hover,
  .vertical-nav a:focus-visible {
    background-color: #dbeafe;
    color: #1d4ed8;
  }
</style>

A parte importante é display: block;.

Ela faz toda a área do link ser clicável, não apenas as letras.

Menu de navegação horizontal

Um menu horizontal coloca links lado a lado.

Isso é comum perto do topo de um site.

Editável
<nav class="horizontal-nav" aria-label="Navegação principal">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Início</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Aulas</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contato</a></li>
  </ul>
</nav>

<style>
  .horizontal-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    font-family: Arial, sans-serif;
  }

  .horizontal-nav a {
    display: inline-block;
    padding: 10px 14px;
    color: white;
    background-color: #1f2937;
    text-decoration: none;
    border-radius: 6px;
  }

  .horizontal-nav a:hover,
  .horizontal-nav a:focus-visible {
    background-color: #2563eb;
  }
</style>

Aqui, display: flex; coloca os itens da lista em uma linha.

Os links usam padding e cor de fundo, então parecem botões claros e clicáveis.

Estilizando links de navegação como botões

Você pode fazer um link parecer um botão com algumas propriedades CSS.

Editável
<a href="https://www.easycode365.com/" target="_blank" class="button-link">Começar aula</a>

<style>
  .button-link {
    display: inline-block;
    padding: 10px 18px;
    background-color: #16a34a;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

  .button-link:hover,
  .button-link:focus-visible {
    background-color: #15803d;
  }
</style>

Use display: inline-block; quando quiser que padding, largura, altura ou cor de fundo pareçam mais com um botão.

Erros comuns de iniciantes

  • Remover o sublinhado sem outra pista visual: se um link parece texto normal, os usuários talvez não saibam que ele é clicável.
  • Esquecer estilos de foco pelo teclado: hover ajuda usuários com mouse, mas usuários de teclado também precisam de um estado de foco visível.
  • Criar áreas clicáveis pequenas demais: adicione padding e use display: block ou inline-block quando os links devem ser mais fáceis de clicar.
  • Esquecer href: uma tag <a> sem href não é um link de navegação real.
  • Adicionar bordas duplas em menus verticais: se cada item tiver uma borda completa, as bordas podem se empilhar e parecer grossas demais. Use apenas border-bottom quando precisar de separadores simples.

Mini tarefa prática

Observe esta regra CSS:

Somente leitura

Qual ação do usuário faz o fundo do link ficar amarelo?

Confira as respostas do quiz quando estiver pronto.

Quiz rápido com respostas

  1. Qual propriedade CSS remove o sublinhado padrão de um link?
  2. Qual pseudo-classe estiliza um link quando o ponteiro do mouse está sobre ele?
  3. Qual elemento HTML é usado para marcar um grupo de links de navegação?

Respostas:

  1. text-decoration: none;
  2. :hover
  3. <nav>

Resposta da mini tarefa: o fundo fica amarelo quando o usuário coloca o ponteiro do mouse sobre o link.

Pequeno desafio

Crie um menu de navegação horizontal simples.

Seus objetivos:

  • Use um elemento <nav>.
  • Adicione um <ul> com três links.
  • Remova os marcadores da lista.
  • Coloque os links lado a lado.
  • Adicione padding e uma cor de fundo a cada link.
  • Mude a cor de fundo em :hover e :focus-visible.

Comece com este código editável:

Editável
<nav class="challenge-nav" aria-label="Navegação de prática">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Início</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Aulas</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contato</a></li>
  </ul>
</nav>

<style>
  .challenge-nav ul {
    /* Remova os marcadores */

    /* Remova o espaçamento padrão */

    /* Coloque os itens lado a lado */

    font-family: Arial, sans-serif;
  }

  .challenge-nav a {
    /* Faça padding e background funcionarem como uma caixa */

    /* Adicione padding */

    /* Adicione cor ao texto */

    /* Adicione cor de fundo */

    /* Remova o sublinhado */
  }

  .challenge-nav a:hover,
  .challenge-nav a:focus-visible {
    /* Mude a cor de fundo */
  }
</style>

Resumo

  • Links são criados com a tag <a>.
  • O atributo href diz ao navegador para onde o link vai.
  • Estados de link incluem :link, :visited, :hover, :active e :focus-visible.
  • Use text-decoration para controlar sublinhados.
  • Menus de navegação são grupos de links, geralmente dentro de um elemento <nav>.
  • Navegação vertical empilha links de cima para baixo.
  • Navegação horizontal coloca links lado a lado.
  • Padding torna links de navegação mais fáceis de clicar.