Discussion :

[francis m]

j'ai créé une petite classe dans h4, du genre

Code :

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

1
2
3
h4.chapitre {
color:#336600;
}

En réalité, il y a plus de lignes mais je les ai supprimées pour votre lisibilité

Il y a des cas ou je souhaite utiliser ce style avec une marge de 40px et d'autres avec une marge de 0px

Dois-je créer deux styles quasiment identiques pour y arriver ? ou y a-t-il une autre solution plus élégante ?

Merci d'avance

[olive.m]

Bonsoir,

tu peux mettre un style général pour la balise h4 puis deux classes qui modifient la propriété voulue

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
h4{
    color: #336600;
}
 
h4.marge1{
    margin:40px 40px 40px 40px;
}
 
h4.marge2{
    margin:0px 0px 0px 0px;
}

[francis m]

oui mais mon h4 est déjà une classe, puisque
j'ai déjà h4 en style général dans lequel je définis des éléments du font
ensuite j'ai h4.chapitre et h4.theme dans lesquels je définis des background, bordures et color.
Donc si je suis ton idée, je devrais créer des h4.chapitre.marge1 et h4.chapitre.marge2
Je ne sais pas si ça colle dans le css
Sinon effectivement il va falloir que je modifie ma structure ou que je crée
h4.chapitremarge1 et h4.chapitremarge2 et je double ce code

[olive.m]

Il faut que tu essaies de profiter au maximum de "l'héritage" que l'on peut faire avec les css. Par rapport aux conteneurs notamment.

[francis m]

c'est bien ce que je pensais faire en ayant un h4 définissant des éléments communs et des h4.chapitre et h4.theme

[Olivier_]

Avec le contexte de ton code HTML et un peu plus de ton code, ça serait plus simple pour te donner la solution la plus efficace.

Sinon, à vue d'oeil, tu défnis les styles généraux pour tous les <h4>, avec l'une de tes marges.

Et ensuite, tu définis h4.chapitre { margin: 40px }

(Utilises les raccourci aussi tant qu'à faire

Code :

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

1
2
3
4
5
 
margin: 40px 40px 40px 40px; => margin: 40px;
margin: 0px 0px 0px 0px; => margin: 0; /* (sans unité, 0 c'est 0 quelque soit l'unité, 0px, 0em, 0pt, 0%) */
 
color: #336600; => color: #360;

[francis m]

oui cela peut-être une solution (que je dois un peu adapter à mon contexte)
Mais j'espérais qu'il y avait un moyen plus logique, du genre
h4 : général définissant les fonts, marges = 0
h4.theme : propriétés spécifiques, marges selon héritage
h4.chapitre : autres propriétés spécifiques, marges selon héritage
h4.chapitre.marge1 : avec marges de 20
h4.chapitre.marge2 : avec marges de 40

Bon je suppose que j'oublie ces deux derniers points et que j'adapte mon code autrement en m'inspirant de ta solution

Merci pour l'aide

[Olivier_]

Tu peux définir des classes multiples

Code :

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

1
2
3
4
 
<h4 class="chapitre marge1">Bla</h4>
...
<h4 class="chapitre marge2">Blu blu</h4>

Et le code CSS devient alors

Code :

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

1
2
3
4
5
6
 
h4 { font: ...; margin: 0 }
h4.theme { foo: bar }
h4.chapitre { foo2: bar2 }
h4.marge1 { margin: 20px }
h4.marge2 { margin: 40px }

[francis m]

Ah mais je ne savais pas qu'on pouvait faire appel à plusieurs classes en même temps
C'est exactement ce que je cherchais
Je vais l'essayer dès que je rentre chez moi
Merci