Ir para conteúdo
Fórum Script Brasil
  • 0

Css: Efeitos De Link

Guest - s_ric_ptbrasil -

Perguntado por Guest - s_ric_ptbrasil -,

 Share

Pergunta

Guest - s_ric_ptbrasil -

Guest - s_ric_ptbrasil -

Postado
Postado

CSS: efeitos de Link

De 2 classes 1 funciona e outra não. Por que?

Eu linkei as duas classes no head e...

<link href="link_principal.css" rel="stylesheet" type="text/css">

<link href="link_azul.css" rel="stylesheet" type="text/css">

</head>

... inseri uma em cada td

<td class="link_azul.css" ...

<td class="link_principal.css" ...

Agradeço desde já.

Link para o comentário
Compartilhar em outros sites

33 respostass a esta questão

Posts Recomendados

  • 0
Jaquelinerz

Jaquelinerz

Postado
Postado

na hora de inserir na td... você tem que colocar o nome da classe... e não o nome do arquivo CSS

por exemplo...

tenho um aquivo chamado "estilos.css"

dentro desse arquivo tenho a classe

.c1 {

    font: arial, verdana, courrier;
}
no meu html vai ficar assim 
<link href="estilos.css" rel="stylesheet" type="text/css">
e na minha td vai 
<tr>
<td class="c1">lalala</td>
</tr>

=***

Link para o comentário
Compartilhar em outros sites
  • 0
Guest - s_ric_ptbrasil -

Guest - s_ric_ptbrasil -

Postado
Postado

Não tinha entendido direito mas mesmo assim tentei fazer de várias formas, mas não consegui.

o link

<link href="estilos.css" rel="stylesheet" type="text/css">

é um só, ou daquela forma estava certo?

Outra coisa é classe

.c1 {

font: arial, verdana, courrier;

}

quando coloco .c1 antes da classe, até aí está tudo certo, não descobri nenhum erro, mas quando

coloco em cada td a classe respectiva, no browser ele lê uma só, ou seja, continua a mesma coisa.

Link para o comentário
Compartilhar em outros sites
  • 0
.Andreia.

.Andreia.

Postado
Postado

Exemplo:

<style>
A.link_azul:link {color: #3366FF}
A.link_azul:visited {color: #3366FF}
A.link_azul:hover {color: #3366FF; font-weight: bold}
A.link_azul:active {color: #3366FF}

A.link_principal:link {color: #CC3333}
A.link_principal:visited {color: #CC3333}
A.link_principal:hover {color: #000000}
A.link_principal:active {color: #CC3333}
</style>

<a href="link1.html" class="link_azul">Link azul</a><br>
<a href="link1.html" class="link_principal">Link principal</a>

Link para o comentário
Compartilhar em outros sites
  • 0
Jaquelinerz

Jaquelinerz

Postado
Postado

Não tinha entendido direito mas mesmo assim tentei fazer de várias formas, mas não consegui.

o link

<link href="estilos.css" rel="stylesheet" type="text/css">

é um só, ou daquela forma estava certo?

Outra coisa é classe

.c1 {

font: arial, verdana, courrier;

}

quando coloco .c1 antes da classe, até aí está tudo certo, não descobri nenhum erro, mas quando

coloco em cada td a classe respectiva, no browser ele lê uma só, ou seja, continua a mesma coisa.

veja bem... você não precisa fazer dois arquivos .css pra cada estilo diferente.... você tem que dar nomes as classes pra usar de formas diferentes..

faz o seguinte... cria um arquivo chamado estilos.css nesse arquivo você digita duas classes

.link_principal { 
} 

.link_azul {
}
como a andreia ensinou ai.... e salva ele!! no seu HTML você coloca 
<head>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

(...)

<tr>
<td class="link_principal">LINK1</td>
</tr>

note que quando você chamar a classe o nome que voce usa é o da CLASSE não o do arquivo -.o

Link para o comentário
Compartilhar em outros sites
  • 0
Guest ricardo_1

Guest ricardo_1

Postado
Postado

Até aí tudo bem, só não entendi isso aí. É pra colocar no estilos.css ou é pra colocar no html?

<a href="link1.htm" class="link_azul">Link azul</a><br>

<a href="link1.htm" class="link_principal">Link principal</a>

Eu copiei do da andreia e colei em estilos.css e fiz tudo como você pediu mas continua do mesmo jeito.

Link para o comentário
Compartilhar em outros sites
  • 0
Jony Walker

Jony Walker

Postado
Postado

Já tive esse problema, é uma questão de hierarquia !

Você num pode colocar a classe dentro do <a> porque aí você vai estar definindo esses parâmetros pra um outro <a> que fique DENTRO dele, mas não vai ter nenhum e por isso num funciona...

O certo é montar uma div e colocar a classe nela. Aí quando você colocar um <a> DENTRO da div com a classe, ele vai aplicar a formatação...

<div class="link_principal"><a href="link1.htm">Link principal</a>

<div class="link_azul"><a href="link2.htm">Link dois</a>

Não precisa ser necessariamente uma div, mas a classe tem que estar em um elemento que o <a> vai ficar DENTRO, seja uma <td>, <span>, etc..

Entendeu ? :)

Link para o comentário
Compartilhar em outros sites
  • 0
flavio

flavio

Postado
Postado

Bom... pra começo de conversa, Ricardo, cadastre-se no fórum e faça parte da equipe...

As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:

   1. Importadas ou lincadas;
   2. Incorporadas;
   3. Inline.

Para maiores (maiores, mesmo) informações veja http://www.maujor.com/tutorial/insetut.php

É um site indicado para desenvolvedores iniciantes ou avançados em CSS.

Link para o comentário
Compartilhar em outros sites
  • 0
Guest - s_ric_ptbrasil -

Guest - s_ric_ptbrasil -

Postado
Postado

Já estou ficando confuso :blink: . É muita css na minha cabeça e mal conheço essa linguagem. Vou refrescar um pouco a cabeça pois vou acabar ficando maluco.Desculpem gente, mas o problema é comigo mesmo. Volto a postar dúvidas, pois não vou desistir nunca.

Link para o comentário
Compartilhar em outros sites
  • 0
Guest - s_ric_ptbrasil -

Guest - s_ric_ptbrasil -

Postado
Postado

Fiz um novo para testar a funcionalidade e veja o que aconteceu.

style.css (novo arquivo)

<style>

A.link_1:link {color: #01537E}

A.link_1:visited {color: #01537E}

A.link_1:hover {color: #43728B}

A.link_1:active {color: #01537E}

A.link_2:link {color: #ffffff}

A.link_2:visited {color: #ffffff}

A.link_2:hover {color: #ff6600}

A.link_2:active {color: #ffffff}

</style>

2class.htm (novo html como teste)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem título</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<table width="730" height="40" border="1" cellpadding="4" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#3DA4CB">

<tr>

<td><div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong><a href="1.htm" class="link_1">Painel

de Controle</a></strong></font></div></td>

</tr>

<tr>

<td><div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong><a href="2.htm" class="link_2">Home</a></strong></font></div></td>

</tr>

</table>

</body>

</html>

Enfim, aconteceu o seguinte:

Desta vez o link Painel de Controle ficou diferente de Home, mas o estilo de efeitos de link não estão coincidindo. Por quê? :huh:

Agradeço mais uma vez pela ajuda.

Link para o comentário
Compartilhar em outros sites
  • 0
Jony Walker

Jony Walker

Postado
Postado

Cara, como eu t falei lá em cima.... você tem que colocar a classe no <div> ou <td> que o link vai ficar dentro...

Faz assim:

<td><div align="left" class="link_1"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong><a href="1.htm">Painel

de Controle</a></strong></font></div></td>

Não é que o jeito que você está fazendo não funciona... não funciona porque você determinou a classe no <a>, então somente colocando um <a> dentro desse que ele vai funcionar:

<td><div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong><a class="link_1"><a href="1.htm">Painel

de Controle</a></a></strong></font></div></td>

Entendeu ? esses dois jeitos devem funcionar, mas como o primeiro é o código é menos confuso e mais limpo, sugiro que fique com ele....

Hierarquia é um terror, sofri muito com isso até aprender...

Link para o comentário
Compartilhar em outros sites
  • 0
Jaquelinerz

Jaquelinerz

Postado
Postado

como o Johnny falou... hierarquia é um problema sério mesmo...

a melhor solução é colocar sua classe na DIV ou na TD pra que tudo que venha "dentro" delas tenha a classe aplicada...

outra coisa

Fiz um novo para testar a funcionalidade e veja o que aconteceu.

style.css (novo arquivo)

<style>

A.link_1:link {color: #01537E}

A.link_1:visited {color: #01537E}

A.link_1:hover {color: #43728B}

A.link_1:active {color: #01537E}

A.link_2:link {color: #ffffff}

A.link_2:visited {color: #ffffff}

A.link_2:hover {color: #ff6600}

A.link_2:active {color: #ffffff}

</style>

você não precisa adicionar as tags style no arquivo com extensão .css ^^"

só precisa adicionar se você estiver usando css descrito dentro da página HTML

Link para o comentário
Compartilhar em outros sites
  • 0
Guest - s_ric_ptbrasil -

Guest - s_ric_ptbrasil -

Postado
Postado

Jony, eu fiz daquela maneira que você ensinou. Coloquei a class na div e também tirei aquele style que Jaqueline comentou, e continua não funcionando. Só que agora os links estão de formas diferentes da passada. Elas estão com a mesma cor.

Link para o comentário
Compartilhar em outros sites
  • 0
Guest - s_ric_ptbrasil -

Guest - s_ric_ptbrasil -

Postado
Postado

Jony, no layout existe uma td para menu:

" Home | Empresa | Serviços | Equipamentos | Recarga | Contate-nos "

Veja que eu tenho esses itens acima, mas só contate-nos tem popitmenu, mas a class tem que atingir todo o menu, menos o submenu de contate-nos.

Uma das class tem que atingir Painel de Controle(td) e outra class tem que atingir todo o menu(outra td)

Link para o comentário
Compartilhar em outros sites
  • 0
Jony Walker

Jony Walker

Postado
Postado

Para isso você coloca os dois juntos na classe:

class="popitmenu, link_principal"

Mas tome cuidado com o lance de hierarquia... Se as duas classes tiverem, por exemplo, cores diferentes, somente uma irá prevalecer... se não me engano a da segunda...

Então não coloque estilos repetidos (ex. text-weight normal em um e bold no outro) porque só vai valer um...

Link para o comentário
Compartilhar em outros sites
  • 0
Jony Walker

Jony Walker

Postado
Postado

Cara, tem alguma coisa errada que tá impedindo o estilo de funcionar direito... Eu peguei a tua página e arranquei tudo, deixei só a img de topo e os links... funcionou... sugiro que faça o mesmo e a partir daí remonte a tua página pra ver o que está t atrapalhando....

Aconselho também aproveitar que está usando css e crie um estilo pra não ter que ficar abrindo tag de fonte o tempo todo, aproveita que tá mexendo com css e manda bala !

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...