Peut-on inclure la classe css commune dans une autre classe CSS?

Je suis un débutant CSS. Je me demande si cela est possible d’inclure une classe commune dans une autre classe?

par exemple,

.center {align: center}; .content { include .center here};

Je suis tombé sur le framework css – Blueprint . Nous devons mettre les informations de position en HTML, par exemple

En tant que tel, nous placerons l’atsortingbut de positionnement dans HTML, au lieu de CSS. Si nous modifions la disposition, nous devons changer le code HTML, au lieu de CSS.

C’est la raison pour laquelle je pose cette question. Si je peux inclure .span-4 dans mon propre css, je n’aurai pas à le spécifier dans ma balise HTML.

Bizarrement, même si CSS parle d’inheritance, les classes ne peuvent pas “hériter” de cette manière. Le mieux que vous puissiez faire est ceci:

 .center, .content { align: center; } .content { /* ... */ }

Aussi, je vous suggère fortement de ne pas faire de sélecteurs de classe “nus” comme celui-ci. Utilisez et identifiez ou marquez et classe si possible:

 div.center, div.content { align: center; } div.content { /* ... */ }

Je dis cela parce que si vous faites vos sélecteurs aussi larges que possible, cela finira par devenir ingérable (selon mon expérience) une fois que vous aurez de grandes feuilles de style. Vous vous retrouvez avec des sélecteurs inattendus qui interagissent les uns avec les autres au point où vous créez une nouvelle classe (comme .center2) car changer l’original affectera toutes sortes de choses que vous ne voulez pas.

C’est là qu’intervient la mise en cascade des feuilles de style en cascade.

Pensez à votre élément HTML ou widget / module (groupe d’éléments HTML nesteds) en tant qu’object. Vous savez que vous allez avoir des objects qui partagent les mêmes propriétés. Vous souhaiterez donc créer une classe réutilisable qu’ils pourront utiliser.

 .baseModule {align: center;}

Disons que votre module est un message (erreur, flash …). Ainsi, vous “étendez” ou “incluez” votre classe .baseModule car tous les messages seront alignés au centre (voir l’exemple final de HTML).

 .message {border: 1px solid #555;}

De plus, vous voulez que vos messages d’erreur aient un fond rouge. De plus, vous pouvez remplacer la propriété border de .baseModule.message ici si vous voulez une couleur différente.

 .error {background-color: red;}

Alors maintenant, vous avez quelques définitions CSS qui peuvent être réutilisées facilement.

   I am a regular message. 
   I am an error message. My background color is red.

Pour relier cela à votre question, vous utiliseriez essentiellement plusieurs noms de classes pour une réutilisation maximale. Certes, ie6 ne supporte pas les sélecteurs chaînés (class1.class2.class3), mais c’est quand même un tour de passe-passe!

En standard CSS, ce n’est pas possible, même si ce serait bien.

Pour quelque chose comme ça, vous devez utiliser SASS ou similaire, qui “comstack” en CSS.