css 问题 - 主题按钮

发布于 2024-09-26 20:51:31 字数 536 浏览 3 评论 0原文

我制作了一个小按钮小部件，其样式带有一些 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 类，但不起作用。

知道这是否可能吗？

谢谢

原文

i've made a little button widget which is styled with some gfx.
my css class for that button is like:

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

that .css also has classes for hover, click and disabled button-state.

what i wanna do is create different button themes (color,size ..) which use one universal .css file and just additions for height and background-image - so i don't have to create a whole css file for each theme.

how could this be done?

eg. for the html markup i've tried something like

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

where btn40 whould be a .css class with different height + background-image, but doesn't work.

any idea if this is possible?

thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

聽兲甴掵 2024-10-03 20:51:31

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

Basically the !important at the end of the style attribute will force this class's style attribute to override all others. This will allow you to define the following as the default:

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

and will allow you to define customizations like this

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

Here is how you would set up the 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;
}

回复收藏 0 原文

白日梦 2024-10-03 20:51:31

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>

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>

回复收藏 0 原文

~没有更多了~