Usuário com melhor resposta
CSS: Herança

Pergunta
-
Boa Noite!
Eu tenho um item de css assim:
.standardLabel { font-family: Verdana, Arial, MS Sans Serif; font-size: 10px; font-weight: bold; }
e criei um segundo item herdando as características desse primeiro item:
.whiteLabel .standardLabel { color: White; }
Mas ai quando chamo whiteLabel dentro de um cssClass de algum controle meu, não está funcionando!
<asp:Label ID="label1" runat="server" CssClass="whiteLabel" Text="Exemplo" />
Alguém pode me ajudar?
Obrigada
quinta-feira, 17 de fevereiro de 2011 23:10
Respostas
-
Sim, por exemplo, usando esse código simples:
<head runat="server"> <title>Msdn Example</title> <style> .standardLabel, .whiteLabel { font-family: Verdana, Arial, MS Sans Serif; font-size: 10px; font-weight: bold; } .whiteLabel { color: white; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Label runat="server" id="Label1" CssClass="whiteLabel" Text="Example" ></asp:Label> </div> </form> </body>
Essa label fica de cor branca, Verdana e com 10px de tamanho.
Veja se depois dessas declarações das labels não há mais nenhuma que possa sobrescrever o estilo. O CSS sempre lê de cima pra baixo, e a última informação que ele lê é a que prevalece.
- Marcado como Resposta Juliana Machado sexta-feira, 25 de fevereiro de 2011 00:05
quinta-feira, 24 de fevereiro de 2011 11:32
Todas as Respostas
-
Ninguém? Nossa, o que estou querendo fazer é tão dificil ou não é desse jeito? rs
bjo
sexta-feira, 18 de fevereiro de 2011 22:33 -
Eu consegui resolver dessa forma:
Será que essa seria a melhor prática?<asp:Label ID="label1" runat="server" CssClass="standardLabel whiteLabel" Text="Exemplo" />
sábado, 19 de fevereiro de 2011 02:36 -
Oi Juliana!
Bom, o problema é que a herença em css funciona da esquerda pra direita, sendo pais e filhos, respectivamente.
Então, quando você coloca isso para um browser:
.whiteLabel .standardLabel { color: White;
}
Você está dizendo: "Todo elemento com a classe standardLabel que estiver dentro de um elemento com a classe whiteLabel terá cor de fonte branca"
E o que você queria era o contrário, certo? Basta trocar a posição:
.standardLabel .whiteLabel {color: white;}
Que deve funcionar =)
A sua solução funcionou porque você colocava as duas classes css no elemento. Quando fazemos isso: class="classe_um classe_dois class_tres", o elemento pega essas três classes.
Espero ter ajudado. :)
Abraços,
Guilherme- Sugerido como Resposta Guilherme Rey segunda-feira, 21 de fevereiro de 2011 23:49
segunda-feira, 21 de fevereiro de 2011 18:19 -
Oi Guilherme,
Troquei as posições de .whiteLabel com .standardLabel, mas continua não funcionando!
.standardLabel { font-family: Verdana, Arial, MS Sans Serif; font-size: 10px; font-weight: bold; }
.standardLabel .whiteLabel { color: white; }
<asp:Label ID="label1" runat="server" CssClass="whiteLabel" Text="Exemplo" />
Estranho que eu já vi essa implementação em algum lugar e lembro que funcionava, mas aqui no meu vs 2010 não tá rolando, porque será?
terça-feira, 22 de fevereiro de 2011 04:31 -
Essa label está dentro de algum componente com a classe "standardLabel" ?terça-feira, 22 de fevereiro de 2011 18:18
-
Se o que você quer é que a única diferença entre as classes standardLabel e whiteLabel seja a cor, e não determinar que toda whiteLabel dentro de standardLabel tenha a cor branca, você pode fazer assim:
.standardLabel, .whiteLabel { font-family: Verdana, Arial, MS Sans Serif; font-size: 10px; font-weight: bold; }
.whiteLabel { color: white; }
:D
terça-feira, 22 de fevereiro de 2011 18:53 -
Não, a label está numa página aspx comum e não tem nenhum classe chamada standardLabel senão essa criada dentro do css
E essa sua nova dica não está funcionando aqui. :(
Está funcionando ai?
quarta-feira, 23 de fevereiro de 2011 01:49 -
Sim, por exemplo, usando esse código simples:
<head runat="server"> <title>Msdn Example</title> <style> .standardLabel, .whiteLabel { font-family: Verdana, Arial, MS Sans Serif; font-size: 10px; font-weight: bold; } .whiteLabel { color: white; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Label runat="server" id="Label1" CssClass="whiteLabel" Text="Example" ></asp:Label> </div> </form> </body>
Essa label fica de cor branca, Verdana e com 10px de tamanho.
Veja se depois dessas declarações das labels não há mais nenhuma que possa sobrescrever o estilo. O CSS sempre lê de cima pra baixo, e a última informação que ele lê é a que prevalece.
- Marcado como Resposta Juliana Machado sexta-feira, 25 de fevereiro de 2011 00:05
quinta-feira, 24 de fevereiro de 2011 11:32 -
Ai, ai
Meu código não estava funcionando porque eu não estava separando com vírgula um item de css do outro!!!
Quando eu copiei o seu código que eu vi, rs
Obrigada pela ajuda e paciência gui
bjs
sexta-feira, 25 de fevereiro de 2011 00:05 -
Que bom que funcionou :D
De nada!
Bjo!
Guilherme
www.guilhermerey.com.br
sábado, 26 de fevereiro de 2011 14:52