locked
CSS: Herança RRS feed

  • 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:

    <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
  • 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