priorité de styles css ?

Répondre
croco
le 31/07/2007 à 11:05
croco
Déconnecté
Bonjour,

J'essaie de comprendre comment sont appliqués les styles selon qu'on utilise des class ou id ou rien, et plus précisément dans quels cas un style défini en class ou id semble s'appliquer à un élément qui ne fait pas appel à class ou id.

Voici l'exemple :

Fichier html, avec 2 zones de test comportant des listes
  1.  
  2. <HTML>
  3. <HEAD>
  4. <link rel="stylesheet" href="style-typographie.css" type="text/css">
  5. <!-- <link rel="stylesheet" href="style-sommairegauche.css" type="text/css" media="projection, screen, tv"> -->
  6. <link rel="stylesheet" href="style-page.css" type="text/css" media="projection, screen, tv">
  7.  
  8. </HEAD
  9.  
  10. <BODY>
  11.  
  12. <div ID="zone-1">
  13.  
  14. ZONE 1
  15. <p>
  16. Liste zone 1
  17. <ul>
  18.    <li>donn&eacute;e a</li>   
  19.    <li>donn&eacute;e b</li>      
  20.    <li>donn&eacute;e c</li>      
  21. </ul>
  22. D&eacute;finition zone 1
  23. <dl>
  24.    <dt>Titre A</dt>
  25.       <dd>le texte A de d&eacute;finition</dd>
  26. </dl>
  27.  
  28. </div>
  29.  
  30. <div ID="zone-2">
  31.  
  32. ZONE 2
  33. <p>
  34. Liste zone 2
  35. <ul>
  36.    <li>donn&eacute;e A</li>   
  37.    <li>donn&eacute;e B</li>      
  38.    <li>donn&eacute;e C</li>      
  39. </ul>
  40. D&eacute;finition zone 2
  41. <dl id="noir">
  42.    <dt>Titre B</dt>
  43.       <dd >le texte B de d&eacute;finition</dd>
  44. </dl>
  45.  
  46. </div>
  47. </BODY>
  48. </HTML>
  49.  


Et le fichier css :
  1.  
  2. #zone-1 {
  3.    position: absolute;
  4.    top: 25px;
  5.       left: 100px;
  6.    height: 300px;
  7.    width: 500px;
  8.    background-color:#FFC0C0;
  9. }
  10.  
  11. #zone-2 {
  12.    position: absolute;
  13.    top: 350px;
  14.       left: 100px;
  15.    height: 400px;
  16.    width: 400px;
  17.    background-color:#C0C0FF;
  18. }
  19.  
  20. /* définit une liste de définition avec le dd en noir */
  21. dl#noir dd {
  22.    color:black;
  23. }
  24.  
  25. /* définit le style général des listes non ordonnées */
  26. ul, li .liste {
  27.    list-style-type: circle;
  28. }
  29.  
  30. /* définit le style général des listes de définitions */
  31. dt, dl {
  32.    font-weight:bold;
  33.    color:red;
  34. }
  35.  
  36. dd {
  37.    font-weight:normal;
  38.    font-style:italic;
  39.  


De cette manière cela fonctionne, j'ai bien mes listes de définition en rouge sauf le dd de la zone 2 qui est en noir grâce à #noir.

Mais si je place
  1. dl#noir dd {
  2. color:black; 
en fin de css, il n'est plus pris en compte, alors que l'appel de cet ID est explicite avec <dl id="noir">.
Comment se fait-il qu'un style non explicitement appelé (.liste) soit prioritaire sur un style appelé ?
Quelle est la règle ?
C'est ici un exemple simple pour tester les effets, mon problème réel se situe dans un site dynamique de structure plus complexe, avec un style de liste défini pour des menus déroulants qui interragissent avec des listes faisant partie du contenu de certaines pages.
JuTs
le 31/07/2007 à 16:08
JuTs
Déconnecté
JuTs
Salut

J'ai essayé mais je n'ai pas constaté de différence.

Une page avec des explications sur la priorité des CSS : http://www.openweb.eu.org/articles/cascade_css/
croco
le 31/07/2007 à 17:07
croco
Déconnecté
Merci, page très intéressante et qui peut éviter quelques tatonnements !

Cependant la règle
Les règles CSS située « après » dans une feuille de style l'emportent sur celles situées « avant »
ne semble pas correspondre à ce que je constate dans mon exemple pourtant simple, puisque mon style n'est plus pris en compte s'il est déclaré après.
Enfin, en pratique, le mieux est de systématiquement utiliser un style dans les éléments à afficher, ça évite d'avoir des doutes sur ce qui est appliqué par défaut...
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Php - Breizh Blog