28173 sujets

CSS et mise en forme, CSS3

Comment afficher differemment 2 balises h1 ? [Résolu]

Bonjour au board des alsacreateurs !

Question con j'imagine, je m'excuse d'avance :

J'ai un site dans lequel j'ai insérer des balises h1 pour mes titres, j'ai déja modifié cette balise en css pour qu'elle colle au look désiré,...

Mais j'ai une autre section de site legerement colorée differement, ou je souhaite egalement nommé mes titres en utilisant cette meme balise h1 pour la question de referencement, de hierarchie, MAIS lui donner une autre couleur.

Puis à un endroit ou un autre modifier soit dans mon html soit dans ma feuille de style cette "sous css" ??

Merci beaucoup ! Smiley cligne
Modifié par matt.t (08 Dec 2006 - 12:21)
Il n'y a pas de question conne.

Tu peux utiliser des classes CSS afin de distinguer plusieurs <h1>.
exemple : 

h1.titre{...}
h1.autreTitre{...}

Et dans le code HTML :

<h1 class="titre">Mon premier titre</h1>
<h1 class="autreTitre">Mon second titre</h1>


Sinon, tu utilises le bloc parents du <h1> pour déterminer son style : 

div#monBloc h1{...}
div#monAutreBloc h1{...}

Et dans le HTML : 

<div id="monBloc"><h1></h1></div>
<div id="monAutreBloc"><h1></h1></div>
Administrateur
Hello matt.t,

Pour que deux éléments puissent être stylés différemment, il te suffit de nommer l'un deux par une classe (s'il y'en a plusieurs dans le document) ou un id (s'il est unique).

C'est le principe de base des CSS, je t'invite à profiter du week-end pour te replonger dans les bases Smiley cligne
Merci à vous deux, je voulais en effet rajouter une classe à h1 mais intuitivement je ne trouvais pas cela très pro(pre) alors j'ai préféré demander.

Et vive les kiwis! Smiley biggrin
Administrateur
matt.t a écrit :
Merci à vous deux, je voulais en effet rajouter une classe à h1 mais intuitivement je ne trouvais pas cela très pro(pre) alors j'ai préféré demander.
Tu as eu raison de demander, car pour éviter de multiplier les classes inutiles, il est préférable de procéder comme l'a expliqué Zeke.

Au fait, ton problème est [Résolu] ? Smiley cligne
Administrateur
matt.t a écrit :
Problème Résolu en effet !

Euh eh bien je ne le vois pas dans le titre de ton sujet ?
Aurais-tu oublié la règle du forum à ce sujet ? Smiley cligne
même s'il est résolu, j'aurais bien une question en rapport avec cela ... Smiley murf
supposons qu'il ait utilisé un conteneur

<div id="bloc">
<h1>titre</h1>
</div>


et dans la CSS :
#bloc h1
{ text-decoration:underline; }


s'il met son deuxième h1 dans ce même bloc, le 2ème h1 héritera des propriétés du #bloc h1.

supposons qu'il mette une class :
<div id="bloc">
<h1>titre</h1>
<h1 class="titre">titre2</h1>
</div>

avec la CSS appropriée :
#bloc h1
{ text-decoration:underline; }

.titre
{ color : #FF0000; }

alors le titre 1 sera souligné et le titre 2 sera souligné et écrit en rouge.
Existe-t-il une propriété CSS qui pourrait annuler d'office tout héritage ?
Ici il suffirait de mettre un text-decoration:none; dans la classe "titre", mais pour le cas d'héritages plus complexes (ou plus fournis) ?
genre <h1 class="titre" style="no-herit">titre2</h1> Smiley sweatdrop Smiley biggol patapé si je dis une bêtise ? Smiley rolleyes
Sujet clos
Aller à