[Resolvido] Como adicionar referencia de uma classe em outra?

[PauloRJ 4]

Tenho este css e gostaria de adicionar a class .borda em h1 e h2 por referencia tem como?

Ou como fazer de modo eficiente/correto

e caso mudar alguma coisa na class borda as outras nao ia precisar mudar no caso o nivel de radio da borda.

 

<style type="text/css">

.borda {border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-opera-border-radius;}

h1 {color:#990000;display:block;font:bold 14px Arial, Helvetica, sans-serif;padding-left:10px;text-decoration:none;border-bottom:1px dotted #999}
h2 {color:#00F;display:block;font:normal 11px Verdana, Arial, Helvetica, sans-serif;line-height:125%;margin-bottom:5px;padding-left:10px;background-image: url(site/img/seta2.gif); background-repeat:no-repeat; background-position:left;text-decoration:none;}

/*
faco assim:
h1 {color:#990000;display:block;font:bold 14px Arial, Helvetica, sans-serif;padding-left:10px;text-decoration:none;border-bottom:1px dotted #999;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-opera-border-radius;}
*/
</style>

abraço!

[Aprendiz CSS 3]

não entendi o que você quer fazer

 

seja mais claro

[PauloRJ 4]

eu gostaria de chamar a classe .borda na h1 pela pagina css

 

sei que pode ser feito assim:

 

<h1 class="borda"> </h1>

 

h1 ira assumir suas referencias e a da classe .borda tambem

 

mas teria alguma forma no codigo css tambem?

assim eu nao preciso alterar o html

[Aprendiz CSS 3]

Você pode fazer por espscificidade

 

imagine isso

 

<div id="header"><h1>ccc</h1></div>

ai no css

 

#header h1 { code }

 

dessa forma somente o H1 que tiver dentro de algum ID de nome header receberá esses estilos

 

Entendeu

[Evandro Oliveira 331]

PauloRJ, se estiver pensando em referências de classes como fazemos com programação, tenho que lhe avisar que CSS não é uma linguagem de programação.

 

Ela é baseada em cascateamento e sobreposição de regras, quem vier por último manda.

 

Provavelmente o que você quer fazer é aplicar uma regra já criada a uma série de elementos sem ter que, no html sair definindo a classe em questão em todos os elementos desejados. Para isso, utilize a dica do Paulo, envolva todos os elementos que receberão a nova formatação em um container pai, e aplique a regra de maneira que ela só acione elementos dentro do container.

 

um exemplo:

 

<ul id="menu">
   <li>menuitem</li>
   <li>menuitem</li>
   <li>menuitem</li>
   <li>menuitem</li>
</ul>

 

para adicionar bordas em todos os itens da lista, ao invés de adicionar a classe 'borda' em cada um dos LI, apontamos ela para seu pai (o UL) e assim referenciamos todos os itens de lista contidos nele:

 

#menu li { border: 1px solid #000 }

No seu caso você tem uma borda pré-definida. Se quiser aplicá-la a todos os H1 e H2, é possível definí-las no seletor da regra assim:

 

h1, h2, .borda { border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-opera-border-radius; }

Se não, você terá que envolver os H1 e H2 que receberão a borda sempre em um elemento pai:

 

.comborda h1, .comborda h2 { border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-opera-border-radius; }

<div class="comborda"><h1>Este título aparece com borda</h1></div>
<h1>Este título aparece sem</h1>

[PauloRJ 4]

show, imaginei isso mesmo mas pensei qeu poderia ter outras formas de fazer. ok!

grato! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif