Question

我做了一个小按钮小部件，用一些gfx设计。我按钮的css类就像：

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

.css还有用于悬停，点击和禁用按钮状态的类。

我想做的是创建不同的按钮主题（颜色，大小..），使用一个通用的.css文件，只添加高度和背景图像 - 所以我不必为每个创建一个完整的CSS文件主题。

怎么可能这样做？

例如。对于html标记，我尝试了类似

的内容

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

其中btn40应该是具有不同高度+背景图像的.css类，但不起作用。

是否有可能这样做？

感谢

Answer 1

基本上，style属性末尾的!important将强制此类的style属性覆盖所有其他属性。这将允许您将以下内容定义为默认值：

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

Answer 2

div.tButton {
            height:20px;
            cursor:pointer;
            background-repeat:no-repeat;
            background-color: red;
            width: 80px;
            text-align: center;
            color: #ffffff;
        }
        .btn40 {
           height:30px !important;
           background-color: green !important;
           margin-bottom: 20px !important;
           margin-top: 20px !important;
           width: 120px !important;
           line-height: 30px;
        }
        .btn30 {
           height:50px !important;
           background-color: blue !important;
           width: 150px !important;
           line-height: 45px;
        }

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

css问题 - 主题按钮

2 个答案: