0

ボタンとしてのスタイルのリンクがありますが、同じ CSS を複製せずにこのボタンに画像を追加したいと考えています。画像のないバージョン、[編集] アイコンのあるバージョン、[削除] アイコンのあるバージョンがあります。だから...基本的に、背景画像のプロパティを除いて95％同じである3つの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/

繰り返し/共有されたコードが 1 つのクラスにあり、固有の部分が別のクラスに分割されていることに注意してください。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 に答える