Zone CSS exemple étanche aux CSS parents

Bonjour à tous,

Je suis presque au bout de la nouvelle mouture de mon CMS. Je travaille actuellement sur l'éditeur des styles communs. En gros, un H1 doit avoir le même look partout.

Pour gérer ces styles, j'ai créé un petit éditeur qui en assure la persistance.

J'aimerais proposer un exemple. Pour se faire j'ai créé un span sur lequel j'applique le style défini par l'utilisateur.

Pourriez-vous me dire comment on peut "briser" tous les héritages des styles parents vers ce style et n'appliquer que la cascade correspondant à celle définie par le client.

La raison de ce besoin est que le style utilisé dans le back office du site est indépendant de celui défini dans le front office du client. Donc si la police du body du backoffice est verdana alors que le client a choisi comics, il faudrait qu'à blanc, le style H1 du client fasse apparaitre du comics et non du verdana.

Si ça n'est pas assez clair, n'hésitez pas à me poser des questions.

D'avance merci pour votre aide,

Laurent Jordi

Bonjour,

On ne peut pas briser une cascade, par contre on peut augmenter le poids d'une instruction par rapport à une autre pour que cette dernière soit prise en compte.

Par exemple :

h1 {color :red}
h1 span {color : blue}

Tous les titres de niveau 1 seront de couleur rouge.
Tous les span contenus dans un titre de niveau 1 seront de couleur bleue.

Sinon, pour augmenter le poids sans toucher au code HTML :

h1 { color:red; } /* de base */

h1 { color:blue !important; } /* en utilisant !important */
div#parent h1 { color:blue; } /* en spécifiant plusieurs éléments */ 

Et un lien pour en savoir plus : Cascade CSS et priorité des sélecteurs.