Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

J.Pinheiro

[Resolvido] "Exceção de estilo CSS"

Recommended Posts

A regra CSS da página que estou fazendo faz todos os links ficarem em negrito quando o mouse é passado sobre os mesmos.

 

Porém, um único link eu preciso que seja diferente, mas não estou conseguindo diferenciá-lo dos outros.

 

Coloquei esse link dentro de uma tag <span> e criei inclusive outra regra, mas mesmo assim o estilo do link fica igual aos demais.

 

Seguem os CSS's abaixo:

 

Esses abaixo são os "normais" das páginas:

 

a, a:visited{
   font:Verdana, Geneva, sans-serif;
font-size:14px;
color:#030;
text-decoration:underline;	
}

a:hover{
 font-weight:bold;	
}

 

-----------------------------

 

E essa é a classe que eu informei na <span>, mas que não surtiu resultado qto aos links:

 

.dif_link{
   font:Verdana, Geneva, sans-serif;
font-size:13px;
color:#FFF;
background-color:#060;
border-color:#FFF;
border-style:double;
font-weight:normal;

}

 

Está faltando algo em alguma das regras?

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

...é que a tag <a> tem que ser especificada no CSS, pois ela não é somente um texto, então você declararia assim:

.dif_link a {
font:Verdana, Geneva, sans-serif;
font-size:13px;
color:#FFF;
background-color:#060;
border-color:#FFF;
border-style:double;
font-weight:normal;
}

...ou seja, todo a tag <a> que estiver dentro da classe dif_link, será dessa tal forma.

 

..ou então você pode simplesmente colocar a classe dif_link diretamente na tag, assim:

<a class="dif_link"> </a>

 

t+

Ramael

Compartilhar este post


Link para o post
Compartilhar em outros sites

Assim ficaria melhor:

 

DE

.dif_link a

<a class="dif_link"> </a>

 

PARA

a.dif_link

<a href="#" class="dif_link">meu link</a>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Kratos, você misturou as coisas que eu disse.....

 

No primeiro código que postei, somente colocando o "a" depois do nome da classe no CSS, faria com que toda a tag <a> que estivesse dentro do span/div com o nome "dif_link" ficasse com o estilo declarado, sem precisar colocar mais nada no HTML.

 

Já no segundo segundo código, que é uma outra forma de fazer, não seria necessário colocar o "a.dif_link" ou mesmo o "dif_link a" no CSS, afinal ele já colocaria diretamente na tag <a> do HTML o nome da classe desejada.

 

tendeu ?! ^^

 

"a.dif_link" e "dif_link a" são formas diferente para se poder fazer a mesma coisa: A primeira forma diz que somente as tags <a> declaradas com o nome "dif_link" sejam daquela determinada forma. A segunda forma já diz que somente as tags <a> que estiverem dentro do "dif_link" sejam da forma declarada.

 

 

t+

Ramael

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ok, não tinha prestado a devida atenção, mas para o exemplo que você usou

<a class="dif_link"> </a>

só irá funcionar se for assim

a.dif_link

Concorda?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não concordo. Dessa forma que postei funciona perfeitamente, e da forma que você postou também funciona, mas aí a classe "dif_link" fica condicionada a ser aplicada somente em tags <a>.

 

Na verdade "tantúfaz", pois como já disse em outros posts por aí: Em CSS, existe diversas maneiras de se obter o mesmo resultado.

 

Particularmente, prefiro o primeiro modo que postei o código, sem especificar a classe na tag <a> do HTML.

 

t+

Ramael

Compartilhar este post


Link para o post
Compartilhar em outros sites

A regra CSS da página que estou fazendo faz todos os links ficarem em negrito quando o mouse é passado sobre os mesmos.

 

 

.excecao:hover {
     font-weight: normal;
}

 

<a class="excecao">teste</a>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.