CSS 问题 - 主题化按钮答案

【问题标题】：css question - themeing buttonCSS 问题 - 主题化按钮
【发布时间】：2010-10-08 17:46:32
【问题描述】：

我制作了一个带有一些 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 类，但不起作用。

知道这是否可行吗？

谢谢

【问题讨论】：

添加引号：
mybutton
我试过了，但由于某种原因，btn40 类被截断，它仍然只是 class="tButton"（检查萤火虫时）不知道为什么..

标签： css button themes

【解决方案1】：

基本上，样式属性末尾的!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;
}

【讨论】：

【解决方案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>

【讨论】：