CSS - Erweitern Klasseneigenschaften

Question

Ich bin ziemlich neu in CSS und habe mich bis jetzt gefunden. Ich erstelle diese Schaltfläche wie Links mit Schatten und so. Jetzt sind auf der Site mehrere solcher Buttons erforderlich - alles über die Buttons ist gleich - bis auf wenige Eigenschaften wie Breite und Schriftgröße.

Anstatt den gleichen Code zu kopieren - immer und immer wieder für jede Schaltfläche - gibt es eine Möglichkeit, die Schaltfläche zu erweitern und nur die Eigenschaften hinzuzufügen, die sich ändern.

Beispiel von zwei Tasten - 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 das ist, wie ich verwende es zur Zeit 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> 

Also ich frage mich, ob es ein sauberere Weg ist zu tun dies - 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 ist. Dank für Ihre Eingaben

Answer 1

Sie können zu einem Element mehrere Klassen hinzufügen, so dass man .Taste Klasse haben, die alles abdeckt, dann eine .button-submit-Klasse, die Dinge hinzufügt.

Zum Beispiel:

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

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

Hier finden Sie eine Live-jsFiddle here

In Ihrem Fall sollten folgende 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; 
}​ 

Hier finden Sie eine Live-jsFiddle here

Answer 2

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

.ask-button-display { 

} 

.ask-button-submit { 

} 

Answer 3

eine Schaltfläche Klasse für beide Links hinzufügen 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; 
} 

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

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> 

Answer 4

Sie können dies tun, da Sie mehr als eine Klasse auf ein Element anwenden können. Erstellen Sie Ihre Master-Klasse und andere kleinere Klassen und wenden Sie sie dann nach Bedarf an. Zum Beispiel:

Dies würde die Schaltfläche anwenden und Klassen übergeben, die Sie erstellen würden, während Sie diese Klassen auch separat anwenden können.

Ihr Codebeispiel ändern 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 wenden 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> 

Answer 5

Sie können in Sass suchen. Mit Sass können Sie im Grunde Variablen in Ihrer CSS-Datei erstellen und sie dann wieder und wieder verwenden.http://sass-lang.com/ wurde Das folgende Beispiel aus Sass offiziellen Internetseite:

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

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

.border { 
    padding: $margin/2; 
    margin: $margin/2; 
    border-color: $blue; 
} 

Answer 6

Anstatt die gemeinsame wiederholen „auf das Element eine Schaltfläche Klasse hinzufügen“ Antwort, die ich Ihnen etwas Neues in der seltsamen und whacky Welt zeigen, werde new age CSS oder besser bekannt als SCSS!

Diese Wiederverwendung von Code in Stylesheets kann mit einem so genannten Mixin erreicht werden. Dies ermöglicht uns die Wiederverwendung bestimmter Stile mithilfe des Attributs "@include".

Lassen Sie mich Ihnen ein Beispiel geben.

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

und dann, wenn wir einen Knopf haben wir sagen

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

hier mehr lesen: http://sass-lang.com/tutorial.html.

Verbreiten Sie das Wort !!!

Answer 7

Vielleicht möchten Sie dies versuchen:

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

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

diese Weise können Sie das Wort nicht wiederholen und in der Lage werden die Klassen in den Elementen wie folgt verwenden:

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

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