0

我有一个样式为按钮的链接，但我想在不复制相同 CSS 的情况下将图像添加到此按钮。我有一个没有图像的版本，一个带有“编辑”图标的版本，一个带有“删除”图标的版本。所以...基本上我有 95% 相同的三个 CSS 类，除了背景图像属性。这是编辑和删除按钮：

.deleteButtonClass2 {
    -moz-box-shadow: inset 1px 1px 1px 0px #97c4fe;
    -webkit-box-shadow: inset 1px 1px 1px 0px #97c4fe;
    box-shadow: inset 1px 1px 1px 0px #97c4fe;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
    background: -moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f00', endColorstr='#bf5f00');
    background-image: url('delete-page-red.gif');
    background-repeat: no-repeat;
    background-position-x: 4px;
    background-position-y: center;
    background-color: #ff7f00;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-left-radius: 8px;
    text-indent: 0;
    border: 1px solid #331900;
    display: inline-block;
    color: #ffffff;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    height: 22px;
    line-height: 22px;
    width: auto;
    padding: 0px 10px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0px #1570cd;
}


.editButtonClass2 {
    ......
    background-image: url('edit-yellow.gif');   <-- Only Difference 
    ..........
}

如何减少 CSS，以便在我决定更改按钮颜色时，我没有那么多地方可以更改？

4

2 回答 2

1

你使用多个类！这里是校长

HTML

<div class="button edit"></div>
<div class="button delete"></div>

CSS

.button {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.edit {
  background-color: blue;
}

.delete {
  background-color: green;
}

演示：http: //jsfiddle.net/BnE82/

请注意重复/共享代码是如何在一个类中的，我们已经将独特的部分分解为单独的类。HTML 元素被分配了多个类；重复/共享类 ( button) 和它们自己的独特项目的单独类。

它们结合起来创造了完整的效果！

于 2013-10-14T12:13:44.417 回答
0

您是否尝试过多个课程？

即有你的按钮类

.buttonClass {
    -moz-box-shadow: inset 1px 1px 1px 0px #97c4fe;
    -webkit-box-shadow: inset 1px 1px 1px 0px #97c4fe;
    box-shadow: inset 1px 1px 1px 0px #97c4fe;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
    background: -moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f00', endColorstr='#bf5f00');
    background-repeat: no-repeat;
    background-position-x: 4px;
    background-position-y: center;
    background-color: #ff7f00;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-left-radius: 8px;
    text-indent: 0;
    border: 1px solid #331900;
    display: inline-block;
    color: #ffffff;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    height: 22px;
    line-height: 22px;
    width: auto;
    padding: 0px 10px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0px #1570cd;
}

然后为每个项目设置单独的类（即删除、编辑等）

.delete {
    background-image: url('delete-page-red.gif');
}

.edit {
    background-image: url('edit-yellow.gif');
}

然后在您的按钮上，您将按如下方式设置类：

<input type="button" value="Delete" class="buttonClass delete" />
<input type="button" value="Edit" class="buttonClass edit" />
于 2013-10-14T12:14:13.777 回答