web-dev-qa-db-ja.com

CSS-クラスプロパティの拡張

私は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 */
}

しかし、私はこれを行う方法がわかりません。あなたの入力をありがとう

cssstylesheet
12
Gublooo

1つの要素に複数のクラスを追加できるため、すべてをカバーする1つの.buttonクラスを作成し、次に.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を参照してください ここ

22
jacktheripper

あなたはこれを試してみたいかもしれません：

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

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

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

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

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

12
Marco

一般的な「要素にボタンクラスを追加する」という答えを繰り返すのではなく、新時代の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 。

言葉を広める！！！

6
Rick Donohoe

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

<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>
4
j08691

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;
}
2
Mali
.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}
1
Craig Swing

共通パーツの両方のリンクにボタンクラスを追加する

.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>
1
Ana