Avec la règle traitant de l'hérédité, vous retrouvez ici une des différences principales entre le HTML qui sert à structurer un document, et en premier le CSS qui impose au navigateur sa propre mise en forme du document et se trouve donc prioritaire. (subtil, j'en conviens !)
Avant de continuer il est important pour ne pas dire crucial de comprendre ce système d"hérédité ", qui malgré quelques exceptions signalées au passage, reste une caractéristique bien pratique. Inutile d'avoir à répéter certaines déclarations et le code source est plus clair.
A retenir : l'élément enfant hérite des propriétés de l'élément parent (sauf dans certains cas comme pour les propriétés de "bloc" telles que padding, marging...), mais par exemple dans un tableau vous trouverez "td" enfant de "tr" qui est à son tour enfant de "table" et en remontant.
Dans le même esprit pour les pseudo- classes, le sélecteur "a.link" énonce une règle complète, et ensuite les enfants :visited, :active et :hover en sont naturellement les héritiers ce qui évite d'avoir à reprendre les parties communes ( par exemple text-decoration:underline ; background-color: #FFFFFF ; ). Vous trouvez les pseudo-classes page 19.
Code source dans HEAD
</TITLE>
<STYLE TYPE="text/css">
body
{
font-size: 10pt ;
font-family: arial, verdana, sans-serif ;
color: black ;
text-align: justify ;
background-color: #FFFFFF ;
}
p.un
{
text-align: center ;
}
p.deux
{
color: red ;
}
h2
{ font-size: 16pt ;
font-family: times, verdana, sans-serif ;
color: green ;
}
</STYLE>
</HEAD>
Code 1 dans BODY
<p>Vous trouvez ici un texte en noir, un corps 10 pt et la déclaration text-align: justify ; qui n'a pas encore été expliquée mais qui fait que le texte est aligné coté gauche et coté droit du paragraphe. </p>
Résultat exemple 1
Vous trouvez ici un texte en noir avec des polices, un corps 10 pt et la déclaration text-align: justify ; qui n'a pas encore été expliquée mais qui fait que le texte est aligné coté gauche et coté droit du paragraphe.
En définitive un paragraphe normal qui est mis en forme par la règle "p".
Code 2 dans BODY
<p class= "un">Vous trouvez ici un texte en noir, un corps 10 pt et la déclaration text-align: center ; qui n'a pas encore été expliquée mais qui fait que le texte est centré. Vous trouvez ici un texte en noir avec des polices, un corps 10 pt et la déclaration text-align: center ; qui n'a pas encore été expliquée mais qui fait que le texte est centré.</p>
Résultat exemple 2
Vous trouvez ici un texte en noir, un corps 10 pt et la déclaration text-align: center ; qui n'a pas encore été expliquée mais qui fait que le texte est centré. Vous trouvez ici un texte en noir avec des polices, un corps 10 pt et la déclaration text-align: center ; qui n'a pas encore été expliquée mais qui sert à centrer le texte..
A remarquer que la classe "un" demande un texte centré alors qu'il
était justifié au départ dans le sélecteur de base "p". C'est
la seule modification qui est réalisé car pour le reste l'enfant "p.un"
hérite de son parent "p".(police, corps, couleur de texte et de fond,
sans qu'il soit nécessaire de les répéter)
Mais il existe en même temps ce qui s'appelle un conflit,
vu que l'enfant s'oppose avec succès au choix initial du parent dans
ce problème d'alignement de texte, le dernier qui parle ayant raison.
Il vous faut retenir que les enfants héritent des règles définies pour les parents, mais ils expriment et réalisent toujours en priorité leurs propres règles qui prévalent comme vous le constatez dans ce conflit.
Code 3 dans BODY
<p class= "deux"> Vous trouvez ici un texte en rouge, un corps 10 pt et les autres déclarations directement héritées du parent "p". Il ne semble pas qu'il y ait de difficultés à définir une classe dans ces conditions.</p>
Résultat exemple 3
Vous trouvez ici un texte en rouge, un corps 10 pt et les autres déclarations directement héritées du parent "p". Il ne semble pas qu'il y ait de difficultés à définir une classe dans ces conditions.
Observez cette fois que la classe "deux" enfant du sélecteur normal "p" ,hérite de ce dernier mais impose en même temps sa caractéristique de règle avec une couleur de texte qui de noir passe en rouge. L'enfant "p.deux" hérite de son parent "p".(police, corps, alignement, sans qu'il soit nécessaire de les répéter).
Bis repetita : les enfants héritent des sélections de leur parent, mais ils expriment et réalisent toujours en priorité leurs propres sélections qui prévalent comme vous le constatez.
Code 4 dans BODY
<H2> un dernier exemple rapide, d'imbrication autorisée mais... <i> attention toutes les balises ne le permettent pas ! </i></h2>
Résultat exemple 4
un dernier exemple rapide, d'imbrication autorisée mais... <i> attention toutes les balises ne le permettent pas ! </i>
Pour le dernier exemple de cette page vous constatez que H2 est déclaré avec une police Times de corps 16 et couleur verte, et à l'intérieur du texte le corps en " italique i " qui a hérité de son " parent h2 " pour la police, la couleur et le corps.
