Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Duvida referente ao uso da tag <a>.

Boa tarde,

Como faço para usar a âncora mais de uma vez sem que uma interfira na outra?

Estou tentando estilizar listas e textos que também são links, mas não consigo fazer uma marcação individual para cada uso.

4 respostas

Oi Lucas, para utilizar listas de âncoras é só abrir e fechar as tags em cima de cada item. exemplo:

<a href="https://www.alura.com.br/">Página Inicial Alura</a>

<a href="https://cursos.alura.com.br/forum/">Forum Alura</a>

<a href="https://cursos.alura.com.br/forum/">Dashboard</a>

Caso não seja essa sua dúvida envie o código para que possamos analisar melhor.

Boa tarde, Fabio.

Estou conseguindo usar as âncoras, porém gostaria de utilizar uma marcação mais individual. Já que quando estilizo uma lista com link no CSS, outros links acabam ficando com o mesmo estilo.

Por exemplo, quando uso: a:link{ text-decoration: none; };

Todas as listas com âncora ficam com a mesma configuração.

solução!

Você pode criar uma classe para cada uma das âncoras adicionando o atributo class na tag.

<a class="ancora1" href="https://www.alura.com.br/">Página Inicial Alura</a>

<a class="ancora2" href="https://cursos.alura.com.br/forum/">Forum Alura</a>

<a class="ancora3"  href="https://cursos.alura.com.br/forum/">Dashboard</a>

e no css, pode se refenciar diretamente com o nome da classe que definiu acrescido de um ponto no inicio do nome:

arquivo.css:

a {
 text-decoration: none;
}

.ancora1 {
 background-color: green;
}

.ancora2 {
 background-color: purple;
}

.ancora2 {
 background-color: red;
}

ou


.ancora1 {
 text-decoration: none;
 background-color: green;
}

.ancora2 {
 text-decoration: none;
 background-color: purple;
}

.ancora2 {
 text-decoration: none;
 background-color: red;
}

ambos terão o mesmo efeito!!

Deu certo!

Muito obrigado!

O erro estava acontecendo por que eu criei uma tag de parágrafo com uma âncora, porém a classe estava apenas na tag parágrafo.

Antes da correção

<p class="footer_p"><a href="licenses.html">Licenses</a></p>

Após a correção

<p class="footer_p"><a class="footer_a"  href="licenses.html">Licenses</a></p>