locked
CSS: Herança RRS feed

 > 

  • Pergunta

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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

  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Eu consegui resolver dessa forma:

    <asp:Label ID="label1" runat="server" CssClass="standardLabel whiteLabel" Text="Exemplo" />
    Será que essa seria a melhor prática?
    sábado, 19 de fevereiro de 2011 02:36
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
  • Question
    Entrar para Votar
    0
    Entrar para Votar
    Essa label está dentro de algum componente com a classe "standardLabel" ?
    terça-feira, 22 de fevereiro de 2011 18:18
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    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
  • Question
    Entrar para Votar
    0
    Entrar para Votar

    Que bom que funcionou :D

    De nada!

    Bjo!

     

    Guilherme 

    www.guilhermerey.com.br

    sábado, 26 de fevereiro de 2011 14:52