CSS ligações

❮ Anterior Próximo capítulo ❯

Com CSS, as ligações podem ser decorados de formas diferentes.

O texto do link texto do link Fazer a ligação Botão Botão do Link

Ligações de estilo

Os links podem ser decorados com qualquer propriedade CSS (por exemplo color , font-family , background , etc.).

Exemplo

a {
color: hotpink;
}

Tente você mesmo "

Além disso, as ligações podem ser decorados de forma diferente dependendo do estado em que se encontram.

As quatro ligações estados são:

a:link -, um link não visitado normais
a:visited - um link que o usuário visitou
a:hover - um link quando o usuário mouses sobre ele
a:active - um link no momento em que for clicado

Exemplo

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Tente você mesmo "

Ao definir o estilo para vários estados da ligação, existem algumas regras de ordem:

a:hover DEVE vir após a:link e a:visited
a:active DEVE vir após a:hover

Decoração de texto

O text-decoration propriedade é usado principalmente para remover sublinhados de links:

Exemplo

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Tente você mesmo "

Cor de fundo

A background-color propriedade pode ser usada para especificar uma cor de fundo para links:

Exemplo

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Tente você mesmo "

Avançados - Botões de link

Este exemplo demonstra um exemplo mais avançado onde combinamos várias propriedades CSS para mostrar links como caixas / botões:

Exemplo

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Tente você mesmo "