Formatage des balises h1, h2, h3, p, etc

[poupilou]

Salut à tous,

Comment structurez vous le formatage de vos balises h1, h2, h3, p, etc... dans votre fichier css ?

J'ai plusieurs balises h1 sur mon site et je souhaiterai que la mise en forme de ces balises soient différentes les unes par rapport aux autres, idem pour les balises h2, h3 et p.

Si je formate mes balises de cette manière :

h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}
h1.acceuil{
font-size:100%;
padding:5px;
margin-left:20px;
margin-right:20px;
color:red;
border:solid 1px black;
}

<h1>Salut c'est moi !</h1>
<h1 class="acceuil">Salut c'est encore moi !</h1>

Ma balise h1.accueil hérite d'une partie de la mise en forme de ma première balise h1 : le texte de ma balise h1 est bleu, le texte de ma balise h1.accueil est rouge mais le background de ma balise h1.accueil est gris (#C0C0C0) alors qu'il n'y a pas de background de précisé dans ma balise h1.accueil. Ma balise h1.accueil a donc hérité du background de ma balise h1

Comment éviter cela ?

 

[mrpat]

c'est normal, c'est l'effet "cascade" (tu devrais te renseigner sur les principes de base des CSS).
Appliquer un background à .accueil parait être la solution la plus simple. Tu peux aussi affecter une class au h1 qui n'en a pas. Ou encore encadrer ton h1 sans class dans un div avec une class et réécrire ta régle (ex: div.container h1 {...}).
En somme, ya plein de soluces pour éviter cela.

 

[poupilou]

Merci pour ta réponse.

Je sais qu'il existe plein de solutions mais comme je suis entrain de relooker tout mon site, j'en profite pour mettre en place les formatages les moins contraignants possibles.

Sur le web on voit partout des exemples de formatages de balise h1 du style :

h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}

Comme si sur nos sites on avait une seule et unique mise en forme de h1, cette problématique de l'effet cascade des balises html est très peu abordé

Je souhaiterai ne pas attribuer de class aux balise h1, h2, p que j'utilise le plus sur mon site et qui sont sur la plupart de mes pages et encadrer mes h1 sans class dans une div avec une class (cette dernière méthode me parraissait du "bidouillage") c'est la raison pour laquelle j'ai posté ce post, je me suis dit qu'il devait y avoir une autre solution que je ne connaissais pas

 

[Marie-Aude]

L'avantage de faire ainsi est de déterminer "une apparence de base" pour les balises, qu'on va ensuite modifier via la cascade pour n'importe quel autre type de présentation. L'avantage est que, si par hasard, tu mets à un endroit un h1 pour lequel tu n'as pas défini de sélecteur, tu ne te retrouves pas avec le style "par défaut" du navigateur.

Si tu veux que la présentation soit totalement différente, tu redéfinis l'ensemble des propriétés. Si tu le fais souvent... ton site a un problème de graphisme

 

[poupilou]

Oui je vois bien ce que tu veux dire mais d'un point de vue pratique mon site a beaucoup de pages et je me posais la question sur comment formater le plus facilement possible les balises h1, h2, p qui sont présentes sur mes pages.

Je souhaitai ne pas attribuer de class aux balises h1, h2, p que j'utilise le plus, en d'autres termes c'est plus rapide et facile d'écrire sur la majorité de mes pages ce code :

<h1>Mon titre</h1>
<h2>Mon sous-titre n° 1</h2>
<p>Mon texte n° 1</p>
<p>Mon texte n° 2</p>
<p>Mon texte n° 3</p>
<h2>Mon sous-titre n° 2</h2>
<p>Mon texte n° 4</p>
<p>Mon texte n° 5</p>

Que si j'utilise une class "normal" pour séparer la mise en forme avec les autres balises h1, h2, p :

<h1 class="normal">Mon titre</h1>
<h2 class="normal">Mon sous-titre n° 1</h2>
<p class="normal">Mon texte n° 1</p>
<p class="normal">Mon texte n° 2</p>
<p class="normal">Mon texte n° 3</p>
<h2 class="normal">Mon sous-titre n° 2</h2>
<p class="normal">Mon texte n° 4</p>
<p class="normal">Mon texte n° 5</p>

Comment struturez-vous le formatage des balises h1, h2, p que vous utilisez le plus sur vos sites : avec une class, sans class, dans une div ?

 

[Marie-Aude]

Eh bien pour les balises "de base" avec le formatage courant tu fais dans ton css

h1 {blabla}

et ensuite soit tu fais

<div class="normal"><h1>balbla</h1>
<p>blabl</p>

avec en css div.normal h1 {bablba} et div.normal p {blabla}

soit si c'est plus précis, tu fais comme tu as dit

 

[poupilou]

Ca marche pas ta solution, essaie :

h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}
div.acceuil h1{
font-size:100%;
padding:5px;
margin-left:20px;
margin-right:20px;
color:red;
border:solid 1px black;
}

puis :

<h1>Salut c'est moi !</h1>
<div class="acceuil"><h1>Salut c'est encore moi !</h1></div>

Le deuxième h1 du div.accueil a un fond gris

 

[Marie-Aude]

Ben oui banane si tu ne veux pas de fonds gris, mais bleu, il faut que tu redéfinisse le background dans le div.accueil h1, ce que tu n'as pas fait

 

[poupilou]

banane, banane, 8O :? 8) :lol: Ben non... ce que je souhaite faire c'est ne pas hériter du formatage du premier h1, je ne veux donc pas d'abord "effacer-gommer" le formatage du premier h1 puis reformarter mon 2ième h1 : je veux que les h1 soient indépendants des uns des autres dans leur mise en forme, qu'ils n'héritent pas du formatage des autres !

Voici donc une solution qui marche (que je donne pour toutes les bananes comme moua :wink: ) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<style type="text/css">
#monBloc{
width:580px;
}
div#monBloc h1{
background-color:#C0C0C0;
padding:10px;
width:180px;
margin-left:50px;
border:2px solid #FF0000;
color:blue;
}
div#monBloc h2{
background-color:#00FF80;
padding:10px;
width:380px;
margin-left:150px;
border:2px solid #FF0000;
color:red;
}
div#monBloc p{
color:black;
margin-left:50px;
}

#monAutreBloc{
width:380px;
}
div#monAutreBloc h1{
font-size:100%;
padding:5px;
margin-left:20px;
margin-right:20px;
color:red;
border:solid 1px black;
}
div#monAutreBloc h2{
background-color:aqua;
padding:10px;
width:480px;
margin-left:250px;
border:2px solid #FF0000;
color:blue;
}
div#monAutreBloc p{
color:red;
margin-left:150px;
}
</style>
</head>
<body>

<div id="monBloc">
<h1>Mon premier titre</h1>
<h2>Mon premier sous-titre</h2>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
</div>

<div id="monAutreBloc">
<h1>Mon deuxième titre</h1>
<h2>Mon premier sous-titre</h2>
<p>Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,
Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici, Mon texte ici,</p>
</div>

</body>
</html>

La solution était donc d'utiliser le bloc parents du <h1> pour déterminer son style.

Avec cette méthode il n'y a donc pas besoin de mettre de <div class="ma_class"><h1>mon titre</h1></div> dans le code html pour formater le h1, un simple <h1>mon titre</h1> suffit pour formater le h1 qui est localisé dans l'id de la div parent.

 

[mrpat]

si tu redéfinis le background de H1 c'est normal que cette propriété soit "cascadée" sur le h1 de div.accueil car comme tu l'a écris, le background va s'appliquer à TOUTES les balises h1, qu'elles soient dans une div, ou pas. Comme le dis marie-aude, dans ton cas et pour cet exemple, tu dois redéfinir l'attribut background de tous tes h1.

Je me répéte, mais tu devrais vraiment chercher à mieux comprendre le principe de cascade des CSS, ton problème est là.

 

[poupilou]

Le fait d'utiliser le bloc parents du <h1> (comme expliqué ci-dessus) pour déterminer son style permet d'annuler la problématique de l'héritage du formatage des h1, h2, p etc... chaque h1 est formaté en fonction de son bloc parent.