[RESOLU] Héritage de style

Bonjour, ce n'est pas vraiment un problème mais je trouve çà etrange.

Prenons une page avec une feuille de style, sur cette feuille de style je definis :

*
{
  font : 12px/14px Trebuchet MS;
  margin : 0px;
  padding : 0px;
  color:#666666;
}

.size14
{
  font-size : 14px;
}

.color978A87
{
  color : #978A87;
}

.colorC10C13
{
  color : #C10C13;
}

.color333333
{
  color : #333333;
}

Jusque là tout va bien, ensuite je crée un tableau en utilisant les classe sur les cellules comme ceci :

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td class="size14 color978A87">
   Du texte, mis en <span class="color333333">couleur</span> !
  </td>
</tr>
</table>

Ce que je trove bizarre c'est le resultat : l'endroit qui est mis en couleur retourne en une taille de 12px. Comment se fait il que cela ne garde pas le 14?

Je sais çà doit venir sans doute d'une question basique mais voilà ca m'a surpris aujourd'hui Merci ^^.
Modifié par Shinji (16 Oct 2007 - 15:35)

Salut Shinji ,

tel que tu le définis dans ta css, un élément auquel est affecté une class="size14" aura bien un font-size de 14px, ce qui est le cas du <td>. Par contre le <span> n'est pas impacté car il n'est que le descendant tu <td> et n'hérite pas de sa class. Pour que toute la ligne (<tr>) ait bien un font-size de 14px tu aurais pu faire :

[b]css[/b]
.size14 * { /* cible tous les descendants d'un élément ayant la class "size14" */
  font-size : 14px;
}

[b]html[/b]
<tr class="size14">
  <td class="color978A87">
   Du texte, mis en <span class="color333333">couleur</span> !
  </td>
</tr>

Pour plus d'infos, voir cette page sur les sélecteurs.

A+

Oki je vois je pense que j'aurais aussi pu faire :

.size14 span
{
  font-size : 14px;
}

Le etoile etant pratique pour tout cibler d'un coup.

Merci bein ^^.

Je me permet de reprendre ce sujet pour reposer une petite question qui m'intrigue tout autant.

soit une feuille de style :

#contenu
{
  width:200px;
}

#contenu a {text-decoration:none;font-weight:bold;}
#contenu a:link {text-decoration:none;font-weight:bold;}
#contenu a:visited {text-decoration:none;font-weight:bold;}
#contenu a:hover {color:#000000;text-decoration:none;font-weight:bold;}

a.lien_section , a:link.lien_section , a:visited.lien_section , a:hover.lien_section 
{
  font-size : 12px;
  font-weight : bold;
  text-decoration : none;
  color : #F28E00;
}

Et dans le code HTML

<div id="contenu">
<a class="lien_section" href="mapage.html">Le Lien</a>
</div>

Voilà ce qui me surprend : Tel quel quand je passe ma souris sur le lien, il devient Gras et en noir, ce qui signifie que c'est le style par défaut qui est appliqué, alors que pourtant je spécifie bien une classe à mon lien.

le problème sans trouve résolu si je mets :

#contenu a.lien_section , #contenu a:link.lien_section , #contenu a:visited.lien_section , #contenu a:hover.lien_section 
{
  font-size : 12px;
  font-weight : bold;
  text-decoration : none;
  color : #F28E00;
}

Alors est ce normal??? peut être n'ai pas déclaré correctement mes styles?

Merci pour votre aide .

Re-salut,

tout d'abord le principe des css est de pouvoir modifier les éléments en cascade ce qui veut dire que chaque déclaration qui cible un même élément et qui n'entre pas en conflit avec une déclaration précédente vient s'ajouter. Par exemple :

#contenu a {text-decoration:none;font-weight:bold;}

va modifier toutes les balises <a> contenues dans un élément ayant un id "contenu".

Puis :

a.lien_section {
  font-size : 12px;
  font-weight : bold;
  text-decoration : none;
  color : #F28E00;
}

vient s'ajouter et modifiera le font-size et le color pour les balises <a> ayant une class "lien_section".

Lorsque des déclarations entrent en conflit (d'abord "font-weight:bold" et plus loin "font-weight:normal"), c'est la déclaration qui a la priorité la plus importante qui est prise en compte (voir le tuto d'openweb sur la priorité des sélecteurs). Comme #contenu a (id) a une priorité plus importante que a.lien_section (class) c'est la première déclaration qui prime. Le fait de rajouter #contenu augmente la priorité de la seconde déclaration et c'est alors celle-ci qui est prise en compte .

A noter que si la priorité est la même, c'est la dernière qui prévaudra. Par exemple avec :

a.lien_section {
  font-size : 12px;
}

[b]puis[/b]

a.lien_section {
  font-size : 14px;
}

le font-size sera de 14px.

A+

He bien encore merci pour cette reponse et ce lien auquel je vais pouvour me referer.

Hello c'est envore moi toujours avec mes héritages .

Apres avoir compris le mécanisme de poids avec le lien (tres utile merci ^^), je me posais une question de simplicité en fait.

Voici les styles utilisés :

a, a:link, a:hover, a:visited {
  color:#000000;
  text-decoration:underline;
}

.color333333
{
  color:#333333;
}

Et donc un lien utilisé de la sorte

<a href="#" class="color333333">Mon Lien</a>

Grace au lien d'Heyoan j'ai compris que le style du a était supérieur a la classe color333333, c'est bien çà?

Donc mon lien est en noir.

Quel serait donc le moyen le plus simple de le mettre en #333333. Pour ma part j'ai utilisé une balise style sur le lien a pour dé"finir la couleur car elle surclasse la balise class.

Y a til un moyen simple de le faire en classe?

Merci et à Bientôt.

Salut,

un petit a.color333333 .