17

私はCSSにかなり慣れていないので、これまで自分の道を見つけてきました。私はこれらのボタンを影やものとのリンクのように作成しています。現在、サイトにはそのようなボタンがいくつか必要です。幅やフォント サイズなどのいくつかのプロパティの変更を除いて、ボタンに関するすべては同じです。

同じコードをボタンごとに何度もコピーする代わりに、ボタンを拡張して変更するプロパティだけを追加する方法があります。

2 つのボタンの例 - css

.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}


.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}

そして、これは私が現在htmlでそれを使用している方法です

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

だから、これを行うためのよりクリーンな方法があるかどうか疑問に思っています-のように

.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}

AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}

.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

しかし、これを行う方法がわかりません。ご意見ありがとうございます

4

8 に答える 8

22

1 つの要素に複数のクラスを追加できるので、すべてをカバーする .button クラスを 1 つ作成し、次に何かを追加する .button-submit クラスを作成します。

例えば：

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button-submit {
    background-color: green;
}​

ここでライブjsFiddleを参照してください

あなたの場合、次のように動作するはずです：

.button {
    background: #8BAF3B;
    border-radius: 4px;
    display: block;
    letter-spacing: 0.5px;
    position: relative;
    border-color: #293829;
    border-width: 2px 1px;
    border-style: solid;
    text-align:center;
    color: #FFF;
    width:350px;
    font-size: 20px;
    font-weight: bold;
    padding:10px;
}


.button-submit {
    width:75px;
    font-size: 12px;
    padding: 1px;
}​

ここでライブjsFiddleを参照してください

于 2012-05-22T15:25:56.290 に答える
13

これを試してみてください： 

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button.submit {
    background-color: green;
}
.button.submit:hover {
    background-color: #ffff00;
}

このようにして、単語の繰り返しを回避し、次のように要素でクラスを使用できるようになります。

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a>

JSFiddle の例を参照してください ( http://goo.gl/6HwroM )

于 2014-09-10T10:30:34.243 に答える
6

一般的な「ボタン クラスを要素に追加する」という回答を繰り返すのではなく、奇妙で奇抜な新時代の CSS (SCSS として知られている) の世界で何か新しいことを紹介します。

このスタイルシートでのコードの再利用は、「Mixin」と呼ばれるもので実現できます。これにより、「@include」属性を使用して特定のスタイルを再利用できます。

例を挙げましょう。

@mixin button($button-color) {
    background: #fff;
    margin: 10px;
    color: $color;
}

そして、ボタンがあるときはいつでも言う

#unique-button {
    @include button(#333);
    ...(additional styles)
}

詳細については、http ://sass-lang.com/tutorial.html を参照してください。

言葉を広める！！！

于 2012-05-22T15:31:02.197 に答える
4

要素に複数のクラスを適用できるため、これを行うことができます。マスター クラスやその他の小さなクラスを作成し、必要に応じて適用します。例えば：

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

これにより、作成するボタンと送信クラスが適用され、それらのクラスを個別に適用することもできます。

次の行に沿ってコード例を変更します。

.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

そして次のように適用します：

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a>
于 2012-05-22T15:24:54.570 に答える
2 
.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}
于 2012-05-22T15:24:15.677 に答える
2

あなたはSassを調べたいと思うかもしれません。Sass を使用すると、基本的に css ファイルで変数を作成し、それらを何度も再利用できます。http://sass-lang.com/ 次の例は、Sass の公式 Web サイトから取得したものです。

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
于 2012-05-22T15:27:50.530 に答える
1

共通部分の両方のリンクにボタン クラスを追加します。

.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}

一般的ではないルールを他のクラスに保持します。

そしてあなたのHTMLは

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a>
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a>
于 2012-05-22T15:24:27.400 に答える