28220 sujets

CSS et mise en forme, CSS3

Bonjour.

Je me trouve souvent confronté à ce genre de problème, où l'on inclus plusieurs blocs correspondant chacun à un élément distinct. Ces différents éléments sont parfois inclus dans d'autres et dans une certaine logique... Le problème est que, si j'applique une propriété au bloc conteneur, cela aura un impact sur les autres blocs contenus dans le bloc conteneur, même en décrivant un chemin.

Exemple :
|- Body
..|- Article
....|- Message
....|- Document

Imaginons que j'ai une page web, avec un bloc par article...

.article :
a écrit :

<h1>Titre de l'article</h1>
<p>Contenu de l'article</p> etc.


J'utilise donc la balise h1, dans le CSS :

.article h1 { les propriétés };


Maintenant supposons que l'article présente un document ...
.article
a écrit :

<h1>Titre de l'article</h1>
<p>Contenu de l'article</p> etc.
<div class="doc">
<h1>Titre du document</h1>
<p>Contenu du document</p>
</div>


La balise h1 présente dans le bloc 'doc' va d'elle même prendre la mise en forme du h1 présent dans le bloc parent. Cela implique donc de redéfinir par un chemin la balise h1 qui nous interesse (celle de 'doc') et de donner comme valeur aux propriétés, des valeurs qui annules celles du bloc parent.

Imaginons que mon titre h1 du bloc 'article', je souhaite qu'il soit en gras... contrairement à celui qui se trouve dans le document... Ca oblige à faire :

.article h1
{
  font-weight: bold;
}
.article .document h1
{
  font-weight: none;
}


Et cette annulation continuelle peut amener à de grandes sources d'erreurs difficiles à cernées. Je me demandais s'il n'existait pas un moyen de contourner ce problème... comme de définir une sorte d'objet ayant des propriétés pour lui même. Je ne sais pas si on me comprend Smiley langue .

Cela existe-t-il déjà ? Et si non, vous croyez que ce sera possible dans la prochaine version du CSS ?

Merci d'avance.
Modifié par NiRaDo (01 Jun 2005 - 19:11)
Les class sont faites pour ça !


<h1 class="taClass1">...</h1>

...

<h1 class="taClass2">...</h1>


Ce que tu décris est le prince quasi fondamental des CSS, c'est la Cascade, c'est d'ailleur le nom CSS => cascading style sheet.
Pour en savoir plus, comprendre la cascade