CSS - Eigenschaften der Klasse Erweitern

Ich bin ziemlich neu in CSS und habe schon meinen Weg zu finden um so weit.
Ich Schaffe diese Taste wie links mit Schatten und so. Nun es gibt mehrere Tasten auf der Seite - alles über die Tasten ist die gleiche - außer einige Eigenschaften ändern, wie Breite und font-size.

Nun anstelle von kopieren der gleichen code - über und über mit jeder Schaltfläche gibt es eine Möglichkeit der Verlängerung der Taste und hinzufügen Sie nur die Eigenschaften ändern.

Beispiel für zwei Schaltflächen - 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;
}

Und dies ist, wie ich derzeit benutze es in meinem 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>

So, ich bin Frage mich, ob es eine bessere Möglichkeit, dies zu tun - wie

.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 */
}

Aber ich bin mir nicht sicher, wie dies zu tun.
Vielen Dank für Ihre Eingaben

InformationsquelleAutor Gublooo | 2012-05-22

css stylesheet

Können Sie hinzufügen, mehrere Klassen an ein element, so haben eine .button-Klasse, die alles abdeckt, dann ein .button-submit class, wodurch die Dinge in.

Beispiel:

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

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

Sehen eine live-jsFiddle hier

In Ihrem Fall, sollten die folgenden arbeiten:

.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;
}

Sehen eine live-jsFiddle hier

Wie wird man verlängern .something button? Ich habe versucht .something button-foo mit class='button-foo' hat das nicht funktioniert.

InformationsquelleAutor jacktheripper

Möchten Sie vielleicht versuchen, diese:

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

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

Diese Weise vermeiden Sie wiederholte das Wort und wird in der Lage verwenden Sie die Klassen in die Elemente wie folgt:

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

Siehe das Beispiel in JSFiddle (http://goo.gl/6HwroM)

InformationsquelleAutor Marco

6

Eher als Wiederholung der gemeinsamen "Fügen Sie ein button-Klasse, um das element" Antwort, die ich werde Ihnen zeigen, etwas neues in die seltsame und verrückte Welt der new-age-CSS, oder besser bekannt als SCSS!

Diese Wiederverwendung von code in die stylesheets erzielt werden können, mit einem so genannten 'Mixin'. Was dies ermöglicht es uns zu tun ist, die Wiederverwendung von bestimmten Formatvorlagen, indem Sie die '@include' - Attribut.

Lassen Sie mich Ihnen ein Beispiel geben.
```
@mixin button($button-color) {
    background: #fff;
    margin: 10px;
    color: $color;
}
```
dann, wenn wir haben eine Taste, sagen wir
```
#unique-button {
    @include button(#333);
    ...(additional styles)
}
```
Lesen Sie hier mehr: http://sass-lang.com/tutorial.html.

Spread the word"!!!

erwähnenswert ist, dass saas ist nicht nativ unterstützt

InformationsquelleAutor Rick Donohoe

Können Sie dies tun, denn Sie können sich bewerben, mehr als eine Klasse auf ein element. Erstellen Sie Ihre master-Klasse und andere, kleinere Klassen und nur dann gelten Sie als notwendig. Zum Beispiel:

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

Diese anwenden würde, der button und geben Sie Klassen, die Sie schaffen würde, sondern auch, dass Sie gelten auch für diese Klassen getrennt.

Ändern Sie Ihren code Beispiel entlang der Linien von:

.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 */
}

Und anwenden, wie:

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

InformationsquelleAutor j08691

2

Möchten Sie vielleicht zu schauen, Sass. Mit Sass können Sie im Grunde erstellen Sie Variablen in der css-Datei und dann wieder verwenden Sie immer und immer wieder. http://sass-lang.com/
Das folgende Beispiel stammt von Sass offizielle website:
```
$blue: #3bbfce;
$margin: 16px;

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

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
```
Das ist schön, aber es gibt keine native Unterstützung für Sie.

InformationsquelleAutor Mali

Fügen Sie ein button-Klasse die beiden links für die gemeinsamen Teile

.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;
}

Halten, in den anderen Klassen die Regeln sind nicht üblich.

Und Ihre HTML wird

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

InformationsquelleAutor Ana

.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}

InformationsquelleAutor Craig Swing

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.