Chaînage des règles CSS

Question

J'ai défini des couleurs d'arrière-plan que j'utiliserai sur mon site. Donc, je peux facilement définir la couleur d'arrière-plan des différents éléments tels que:

.background_highlite{ 
    background-color: rgb(231, 222, 207); /*Cream in my Coffee*/ 
} 
.background_shadow{ 
    background-color: rgb(201, 179, 156); /*Moose Mousse*/ 
} 

Maintenant, si je veux tous textarea éléments sur ma page pour avoir la couleur Moose Mousse que leur arrière-plan que je veux écrire une autre règle CSS qui fait référence à revenir à .background_shadow, donc je n'ai qu'à changer les valeurs rgb en un seul endroit.

Quelque chose comme:

textarea{ 
    height:50px; 
    background-color: background_highlite /* want to feed forward to keep the rgb in one place */ 
} 

Est-ce possible avec CSS?

Answer 1

Les gens ont été frustrés par la structure simpliste de CSS, et ont créé des pré-processeurs pour écrire du CSS plus facilement. Regardez Less, par exemple, ou CleverCSS.

Answer 2

Pas vraiment. http://dorward.me.uk/www/css/inheritance/ répertorie vos options principales.

Answer 3

Vous pouvez attribuer tous les éléments de la même classe, puis définir la couleur d'arrière-plan dans le CSS de la classe:

<textarea class="background_shadow">blah</textarea> 

Gardez à l'esprit que vous pouvez attribuer un certain nombre de classes à tout élément, donc vous pouvez utilisez une classe uniquement pour contrôler la couleur d'arrière-plan, puis utilisez d'autres classes pour vos autres besoins:

<textarea class="background_shadow another_class something_else">...</textarea> 

Answer 4

Désolé, non. CSS ne supporte pas les variables, ou le chaînage.

Cependant, il existe une bibliothèque javascript qui permet cela. http://lesscss.org/

Answer 5

Le mieux que vous pouvez faire serait

.hilight textbox { 
    background: black; 
} 
textbox { 
    color: pink; 
} 
.background_shadow { 
background: grey; 
} 

Ou, bien sûr, vous pouvez ajouter la classe .hilite à votre div.

Answer 6

Vous avez deux options pour travailler avec:

1. CSS natif, ce qui est possible, mais pas bon de maintenir.
2. Préprocesseur, comme xCSS, qui peut créer du code plus propre et fournir des variables.

Pour les projets simples, je suppose, CSS natif sera bon. Mais en plus compliqué, il est préférable d'utiliser une sorte de processeurs, comme les copains ont parlé plus tôt. Dans cette méthode, vous pouvez toujours utiliser une règle lisible par l'homme telle que: .blabla {min-height: 20px}, qui est pré-processeur par votre propre logique de transformation en CSS, que tous nos navigateurs cibles peuvent comprendre, comme .blabla {min-height: 20px; hauteur: auto! important; hauteur: 20px;} etc.

aussi ce que je REALY comme dans préprocesseurs est que vous pouvez bon code, comme ici:

• étend .specialClass .basicClass {} // voir plus à l'étend
• .sélecteur { a { affichage: bloc; } fort { couleur: bleu; } } // voir plus aux enfants
• ou ce dont vous aviez besoin est vars { $ path = ../img/tmpl1/png; $ color1 = # FF00FF; $ border = border-top: 1px solide $ color1; } // voir plus à vars