css question - тематическая кнопка - PullRequest
Новая
       6

css question - тематическая кнопка

1 голос
/ 08 октября 2010

Я сделал маленький виджет кнопки, который стилизован под немного gfx.Мой класс CSS для этой кнопки выглядит так: 

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

, что .css также имеет классы для наведения, щелчка и отключенного состояния кнопки.

я хочу создать различные темы кнопок (color, size ..), которые используют один универсальный файл .css и только дополнения для высоты и background-image - поэтому мне не нужно создавать целый файл css для каждой темы.

как это можно сделать?

напр.для разметки html я пробовал что-то вроде 

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

, где btn40 должен быть классом .css с другой высотой + background-image, но не работает.

любая идея, еслиэто возможно?

спасибо

1 Ответ

2 голосов
/ 08 октября 2010

По существу, !important в конце атрибута стиля заставит атрибут стиля этого класса переопределить все остальные. Это позволит вам определить следующее по умолчанию: 

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

и позволит вам определить настройки, подобные этой 

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

Вот как бы вы настроили стиль. 

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;
}
...