css question - bouton de thème

Question

J'ai fait un petit bouton bouton qui est stylé avec du gfx. ma classe CSS pour ce bouton est comme:

div.tButton 
{ 
    height:20px; 
    cursor:pointer; 
    background-repeat:no-repeat; 
    background-image:url(/button/button.png); 
} 
... 

que Css a aussi des cours pour vol stationnaire, cliquez sur le bouton et l'état désactivé. Ce que je veux faire est de créer différents thèmes de bouton (couleur, taille ..) qui utilisent un fichier .css universel et juste des ajouts pour height et background-image - donc je ne dois pas créer un fichier css entier pour chaque thème.

comment cela a-t-il pu être fait?

par ex. pour le balisage HTML j'ai essayé quelque chose comme

<div class=tButton btn40>mybutton</div> 

où btn40 whould une classe Css avec différentes hauteurs + background-image, mais ne fonctionne pas.

une idée si cela est possible?

grâce

Answer 1

Fondamentalement, le !important à la fin de l'attribut de style attribueront forcer le style de cette classe pour remplacer tous les autres. Cela vous permettra de définir les éléments suivants comme valeur par défaut:

<div class="tButton">mybutton</div> 

et vous permettra de définir les personnalisations comme celui-ci

<div class="tButton btn40">mybutton</div> 
<div class="tButton btn30">mybutton</div> 

Voici comment vous mettre en place le style.

div.tButton 
{ 
    height:20px; 
    cursor:pointer; 
    background-repeat:no-repeat; 
    background-image:url(/button/button.png); 
} 

.btn40 
{ 
    height:30px !important; 
    background-image:url('/button/btn40.png') !important 
} 


.btn30 
{ 
    height:50px !important; 
    background-image:url('/button/btn30.png') !important; 
}