Jump to content
Fórum Script Brasil
  • 0

Css: Efeitos De Link


Guest - s_ric_ptbrasil -
 Share

Question

Guest - s_ric_ptbrasil -

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 to comment
Share on other sites

Recommended Posts

  • 0

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 to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0
Guest ricardo_1

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

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 to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

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 to comment
Share on other sites

  • 0
Guest - s_ric_ptbrasil -

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      151k
    • Total Posts
      649.1k
×
×
  • Create New...