web-dev-qa-db-fra.com

CSS - Extension des propriétés de classe

Je suis assez nouveau sur CSS et j'ai trouvé mon chemin jusqu'à présent. Je crée ces boutons comme des liens avec des ombres et des trucs. Maintenant, il y a plusieurs de ces boutons nécessaires sur le site - tout sur les boutons est le même - sauf que peu de propriétés changent comme la largeur et la taille de la police.

Maintenant, au lieu de copier le même code - encore et encore pour chaque bouton -, il existe un moyen d'étendre le bouton et d'ajouter uniquement les propriétés qui changent.

Exemple de deux boutons - 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;
}

Et voici comment je l'utilise actuellement dans mon 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>

Je me demande donc s'il existe un moyen plus propre de le faire - comme

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

Mais je ne sais pas comment faire ça. Merci pour vos contributions

cssstylesheet
12
Gublooo

Vous pouvez ajouter plusieurs classes à un élément, alors ayez une classe .button qui couvre tout, puis une classe .button-submit, qui ajoute des éléments.

Par exemple:

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

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

Voir un jsFiddle en direct ici

Dans votre cas, les éléments suivants devraient fonctionner:

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

Voir un jsFiddle en direct ici

22
jacktheripper

Vous voudrez peut-être essayer ceci:

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

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

De cette façon, vous éviterez de répéter le mot et pourrez utiliser les classes dans les éléments comme ceci:

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

Voir l'exemple dans JSFiddle ( http://goo.gl/6HwroM )

12
Marco

Plutôt que de répéter la réponse commune "Ajouter une classe de boutons à l'élément", je vais vous montrer quelque chose de nouveau dans le monde étrange et délirant du CSS new age, ou mieux connu sous le nom de SCSS!

Cette réutilisation du code dans les feuilles de style peut être réalisée avec quelque chose appelé un "Mixin". Cela nous permet de réutiliser certains styles en utilisant l'attribut '@include'.

Laisse moi te donner un exemple.

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

puis chaque fois que nous avons un bouton, nous disons

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

En savoir plus ici: http://sass-lang.com/tutorial.html .

Faire connaitre!!!

6
Rick Donohoe

Vous pouvez le faire car vous pouvez appliquer plusieurs classes à un élément. Créez votre classe de maître et d'autres classes plus petites, puis appliquez-les au besoin. Par exemple:

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

Cela appliquerait le bouton et soumettrait les classes que vous créeriez tout en vous permettant d'appliquer également ces classes séparément.

Modifiez votre exemple de code dans le sens de:

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

Et appliquez comme:

<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

Vous voudrez peut-être examiner Sass. Avec Sass, vous pouvez essentiellement créer des variables dans votre fichier css, puis les réutiliser encore et encore. http://sass-lang.com/ L'exemple suivant est tiré du site officiel de Sass:

$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

Ajouter une classe de boutons aux deux liens pour les parties communes

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

Gardez dans vos autres classes les règles qui ne sont pas courantes.

Et votre HTML sera

<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