28173 sujets

CSS et mise en forme, CSS3

Question rapide sur la priorité CSS [résolu]

Bonjour,
Ceci est une petite question rapide à propos d'un truc somme toute assez bête, mais que j'aimerais biens savoir.

Admettons que j'ai ceci :
Oui je sais, c'est un exemple à la mords moi le ***.

[b]Une simple feuille CSS fichier.css[/b]
body { font-size:0.9em; }

[b]Extrait d'une page HTML quelconque[/b]
<!doctype ...... >
<html>
<head>
...
<link rel="stylesheet" href="fichier.css" />
<style type="text/css">
body { font-size:0.7em; }
</style>
...
</head>
<body style="font-size:0.8em;">
...
</body>
</html>



J'aimerais savoir ce qui se passe dans un tel cas.
a) Le inline style a la priorité sur les deux autres déclarations et donc la taille est fixée une fois pour toute à 0.8em, et en enlevant le 0.8em, c'est le 0.7em du style dans head qui prendrait le dessus. Le 0.9em restant en dernier recours si jamais les deux autres étaient supprimés.

b) On prend tous les style en compte ce qui fixe la taille à 0.9 * 0.8 * 0.7 = env. 0.5 (ce qui donne ridiculeusement petit j'imagine)

c) Ou alors un mix des deux solutions précédentes, ou par exemple on ne prend en compte que deux indications sur les trois ?

Voilà. Je vous l'accorde, c'est complètement idiot comme exemple.
Merci.
Modifié par QuentinC (06 Sep 2006 - 20:41)
Bonjour,

La bonne réponse est la première (a) : les sélecteurs sont de poids identiques, l'ordre d'apparition des deux feuilles de styles détermine leurs priorités respectives, et le style en ligne a la priorité sur les styles externes et internes.

Pour se retrouver dans la solution b, il faudrait un sélecteur visant des éléments imbriqués, comme un div {font-size:0.8em;} et un HTML du type :

<div>
   <div>
      <div>
          texte de taille 0.8 * 0.8 * 0.8 em
      </div>
    </div>
</div>


Pour la solution c, ajouter un style interne au code HTML ci-dessus...
Modifié par Laurent Denis (06 Sep 2006 - 19:58)
Sujet clos
Aller à