A quoi correspond cette syntaxe ?

**Loko** · 06/09/2007, 15h59

Bonjour

Voici un fichier CSS que j'ai trouvé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.zpWinWinxpContainer .zpWinTitleArea {
  font-family: "Trebuchet MS, Verdana, Arial , Heltvetica, sans-serif";
  font-size: 13px;
  font-weight: bold;
  height: 28px;
  text-align:left;
}

Il n'y a pas de virgule entre zpWinWinxpContainer et zpWinTitleArea donc ca ne veut pas dire que les propriétés vont s'appliquer à ces 2 classes.

J'ai lu les cours et les FAQ et cette syntaxe n'est pas expliquée.

Pouvez vous me dire à quoi cela correspond et dans quelle syntaxe d'utilisation au niveau HTML ?

Merci

**Momodedf** · 06/09/2007, 16h21

Ca veut dire qu'on définit les propriétés de toutes les classes .zpWinTitleArea qui sont elles même contenues dans une classe .zpWinWinxpContainer.

**Loko** · 07/09/2007, 08h34

Oui, c'est ce dont je me suis douté, mais je ne comprends pas pourquoi mon texte ne prend pas la forme quand je lui donne la classe "zpWinTitleArea " ...

.

**Loko** · 07/09/2007, 14h30

Je viens de faire un exemple tres simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style>
.A {
  color:#000000;
}
 
.A .B {
  color:#FF0000
}
 
</style>
<body>
<div class="B">machin</div>
</body>

le texte "machin" devrait s'afficher en rouge, mais ce n'est pas le cas. Pourquoi ?

Merci

**Bisûnûrs** · 07/09/2007, 14h56

Envoyé par Loko

Je viens de faire un exemple tres simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style>
.A {
  color:#000000;
}
 
.A .B {
  color:#FF0000
}
 
</style>
<body>
<div class="B">machin</div>
</body>

le texte "machin" devrait s'afficher en rouge, mais ce n'est pas le cas. Pourquoi ?

Merci

C'est très simple, parce que ton code est erroné.

Avec le même CSS, la structure de ton code HTML doit être celle-ci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="A">
   <div class="B">machin</div>
</div>

**Loko** · 08/09/2007, 08h39

D'accord

Donc cela veut dire qu'au niveau HTML on doit forcément suivre la structure d'héritage du CSS ?

Je trouve ca assez lourd quand même. J'imaginais pouvoir par exemple définir une classe de base "A" avec les propriétés que je veux retrouver partout, par exemple la police de caracteres, puis ensuite plusieurs classes "B", "C" selon les besoins, sans avoir à m'assurer à chaque fois que le code HTML utilise bien la classe de base. Si c'est pas possible bah tant pis ;-) mais je trouve ca lourd, cela aurait été bien si on avait pu utiliser de l'héritage pur au sens de la programmation objet.

Par contre cela peut aussi marcher si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="A B">machin</div>

A quoi correspond cette syntaxe ?

CSS

Vue hybride

Discussions similaires

Partager

Partager