Herdar atributos de uma classe

[Jobless 0]

Galera gostaria da ajuda de vocês, gostaria de saber se é possível fazer o seguinte com css.

 

Fazer com que uma classe herde os atributos da outra.

 

Ex:

<style type="text/css">

.estilo_1{ font-size:40px; }

.estilo_2.estilo_1{ color:#F00; }

</style>
<div class="estilo_2">
Texto
</div>

 

Gostaria de herdar o atributo "tamanho da fonte" e fazer com que a classe "estilo_2" herde o atributo do tamanho da fonte e o resultado final seja o texto com tamanho 40px e cor vermelho.

 

Tem como faze isso?

Lembrando que este foi apenas um exemplo os atributos serão outros.

 

Valeu!

[William Bruno 1501]

você pode fazer:

 

<div class="estilo_1 estilo_2">
 .. oque tiver aqui dentro, terá herdado das 2 classes

ou sei lá..

 

<div class="estilo_1">
      <div class="estilo_2">
        .. oque tiver aqui dentro, terá herdado das 2 classes

[André D. Molin 15]

É como o William falou.

Eu por exemplo utilizo um reset.css, e por isso, <strong> não deixa o texto em negrito (pois uso o reset.css). Então no meu CSS eu declaro uma classe, por exemplo, assim:

 

.bold {
   font-weight: bold;
}

.underline {
   text-decoration: underline;
}

 

E quando quero utilizar <strong>, faço <strong class="bold">palavra_destacada</strong>.

Além disso, eu costumo utilizar também em <span>'s, principalmente quando quero negritar alguma palabra sem dar nenhuma semântica a ela (<span class="bold">palavra_destacada_sem_semântica</span>).

 

E ai que vem o teu caso. Se eu quero um texto negrito E sublinado, é só fazer isso: <span class="bold underline">palavra.</span>

[Fabio Jp 0]

@André

 

Para ficar mais fácil você pode fazer assim:

strong {font-weight: bold;}

 

 

 

@Jobless

 

A forma correta de se fazer isso é como o Willian destacou:

 

<style type="text/css">
.estilo_1 {font-size: 40px;}
.estilo_2 {color: #f00;}
</style>

<div class="estilo_2">Texto VERMELHO</div>

<div class="estilo_1 estilo_2">Texto com 40px em VERMELHO</div>

[William Bruno 1501]

Eu por exemplo utilizo um reset.css, e por isso, <strong> não deixa o texto em negrito

não gosto desses resets 'cheios de coisa', considero completamente desnecessários.

 

o básico, já resolve, oque o 'conceito' de 'css reset' se propõe a fazer:

* { margin: 0; padding: 0; list-style: none; border: none; }

mais do que isso, pra mim é sujeira, e gera um baita trabalho desnecessário.

[Evandro Oliveira 331]

mais do que isso, pra mim é sujeira, e gera um baita trabalho desnecessário.

 

 

Sou obrigado a discordar. O propósito do CSS reset é aproximar e talvez até suprimir as diferenças de renderização nos diversos navegadores.

Por exemplo, não chega a ser gritante o problema mas, list-style aplicado em * sim é desnecessário. Elementos de renderização inline não precisam receber margin nem border o que nos remete a, segundo a filosofia de simplicidade, só declarar o reset para elementos que utilizaremos no projeto.

 

Esta linha de pensamento confronta com outra muito aplicada na área de programação: reusabilidade, modularização, DRY, escalabilidade. O propósito de utilizar um reset bem estruturado reside exatamente em não aplicar regras genéricas a *(tudo).

 

Lembra-se da regra de especificidade? Quando somos específicos, separamos uma instrução no navegador que diz 'sempre que você achar tal elemento, aplique estas propriedades'. Agilizando, por exemplo, a renderização de um span, que não exibe bordas, margem, list-style entre outras.

 

A questão de ter muito trabalho, pode ser facilmente resolvida utilizando um reset pronto. Se não gostar das ferramentas de terceiros (Eric Meyer e Yahoo, por exemplo), pode facilmente ter acesso aos CSS padrão dos navegadores mais comuns:

 

Firefox: resource://gre/res/html.css - Acessar pelo Firefox

Webkit (Chrome e Safari): http://svn.webkit.org/repository/webkit/trunk/Source/WebCore/css/html.css

Internet Explorer: http://www.iecss.com/

 

 

Ainda existe uma tabela que relaciona diferenças comuns, se quiser criar seu próprio reset cobrindo apenas os valores díspares.

http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

[William Bruno 1501]

A questão de ter muito trabalho, pode ser facilmente resolvida utilizando um reset pronto.

okay, agora me responda quantos sites você já fez ?

E em quantos desses você usou qq css reset 'maior' do que oque eu coloquei ?

 

era 'necessario'?

por exemplo o André, que tem que reaplicar o bold na tag <strong>

isso pra mim, é o 'baita trabalho'. Semânticamente o strong está lá para dar ênfase. A forma que os browsers atuais fazem para dar ênfase é o bold.

Se sei lá, estudam e descobrem que na verdade, seria melhor que elementos com 'ênfase', tivessem uma espécie de underline, esfumaçado, sombras..(certamente o estilo default da tag viria com isso, assim como o strong vem com bold) ou coisa do tipo.

 

 

Ai você teria que adequar a semântica do elemento (que já estava pronta, e você desfez), para essa nova realidade.

Tá.. não precisa falar 'tudo isso pra mim', e nem quero discutir sobre 'separação de camadas'(marcação de conteudo e estilização).

 

 

Se você estivesse pensando em 'otimização' de renderização, não gastaria linhas 'a toa' no teu css. (bem mais grave do que aplicar regras genericamente)

 

só que assim gordura apenas gordura.

[Evandro Oliveira 331]

Ai você teria que adequar a semântica do elemento (que já estava pronta, e você desfez), para essa nova realidade.

 

Nenhum link sugerido remove as particularidades do elemento strong. Ao passo que em nenhum momento eu também mencionei o fato que aplicar um css reset é limar todas as características de todos os elementos, muito pelo contrário, quem faz isso é a regra genérica * {} a qual eu discordo.

 

O propósito do CSS reset é aproximar e talvez até suprimir as diferenças de renderização nos diversos navegadores.

 

Se sei lá, estudam e descobrem que na verdade, seria melhor que elementos com 'ênfase', tivessem uma espécie de underline, esfumaçado, sombras..(certamente o estilo default da tag viria com isso, assim como o strong vem com bold) ou coisa do tipo.

 

Engenheiros do IE6 estudaram e decidiram que seria melhor que elementos X, se comportassem de maneira Y. Pra cada desenvolvedor/equipe, a linha de raciocínio pode variar tanto pouco quanto muito. Reforço a idéia, o CSS Reset aproxima diferenças de modo que a renderização seja fluida na maioria dos elementos.

 

Se o André (caso nosso em particular) teve que ser redundante, algo tem que ser revisado. A cascata existe exatamente pra evitar isso sem precisar transformar o CSS em uma linguagem de programação.

 

Basicamente, limpar margem, e espaçamento realmente é mais que suficiente.

 

Então passamos a trabalhar com listas: limpamos list-style.

 

Precisamos inserir uma tabela: redefinimos o formato da borda.

 

Precisamos utilizar formulários: Configuramos o elemento fieldset.

 

A partir do momento que você precisa ser repetitivo, passa a incorporar a repetição no seu reset base, como foi com o list-style.

 

Se precisar fazer um hotsite sem listas, estará gerando 'gordura'. Quando começar a trabalhar repetitivamente com tabelas, incorporará a borda. Quando não utilizar tabelas, terá 'gordura'

 

Chegamos a uma escolha de três caminhos:

 

Escrever todas as possibilidades no braço pra evitar o avanço gradual;

utilizar uma ferramenta de qualidade pronta;

Ir aumentando gradativamente o seu base, personalizado, conforme a necessidade;

 

Das três, a terceira é a mais viável, até que você tenha que desenvolver um framework/css que envolva algo além de listas, bordas e margens.

 

E estamos desviando o assunto do tópico.

[William Bruno 1501]

O propósito do CSS reset é aproximar e talvez até suprimir as diferenças de renderização nos diversos navegadores.

Basicamente, limpar margem, e espaçamento realmente é mais que suficiente.

este trecho resume nossa conversa :lol:

 

 

Chegamos a uma escolha de três caminhos:

 

Escrever todas as possibilidades no braço pra evitar o avanço gradual;

utilizar uma ferramenta de qualidade pronta;

Ir aumentando gradativamente o seu base, personalizado, conforme a necessidade;

depende do projeto cara.

Te falar, já trabalhei em agência, faço freela frequentemente para outras 2, alguns designers, e alguns 'sites próprios'.

Agora que mudei de trabalho, tô vendo como é 'trabalhar num só site', e com 'uma equipe', a pegada é outra, completamente diferente.

 

 

E estamos desviando o assunto do tópico.

Estamos mesmo ^^

a vontade se quiser splitar nossos posts para um outro, sobre 'css reset'.

[Ramael 0]

Vi que a conversa descambou pra um outro rumo, que também é interessante, mas respondendo a pergunta original do colega: Sim pode !!

 

Veja meu exemplo:

<style type="text/css">
.botaoA, .botaoB, .botaoC {
display: block;
height: 40px;
float: left;
width: 20px;
margin: 0 2px;
background: #efebef url("b_Left.png") 0 0 no-repeat; 
}

.botaoB {
width: 80px;
background: #efebef url("b_Change.png") 0 0 no-repeat; 
}

.botaoC {
background: #efebef url("b_Right.png") 0 0 no-repeat; 
}
</style>
<div class="botaoA">
Botão A
</div>
<div class="botaoB">
Botão B
</div>
<div class="botaoC">
Botão C
</div>

 

Declaro as três classes separadas por virula e um espaço.

Se eu não fizer mais nada, todo objeto que fosse de uma das três classes seria igual. Mas aí, logo abaixo eu coloquei uma diferenciação na classe "botaoB", onde o tal botão será igual ao "botaoA", mas com largura e background diferentes, da mesma forma o "botaoC" que será igual ao "botaoA" mas somente com o background diferente.

 

O seu exemplo seria assim:

<style type="text/css">
.estilo_2, .estilo_1 {color:#F00;}
.estilo_1 {font-size:40px;}
.estilo_2 {font-size:10px;}
</style>
<span class="estilo_1">Frase com o estilo 1</span>
<span class="estilo_2">Frase com o estilo 2</span>

Os dois estilos seriam da mesma cor, mas o 1 teria 40px de tamanho e o 2 somente 10.

 

Sacou ??

Espero ter ajudado.... ^^

 

 

 

 

t+

Ramael