le 31/07/2007 à 11:05
priorité de styles css ?
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
Et le fichier css :
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 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.
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
<HTML>
<HEAD>
<link rel="stylesheet" href="style-typographie.css" type="text/css">
<!-- <link rel="stylesheet" href="style-sommairegauche.css" type="text/css" media="projection, screen, tv"> -->
<link rel="stylesheet" href="style-page.css" type="text/css" media="projection, screen, tv">
</HEAD
<BODY>
<div ID="zone-1">
ZONE 1
<p>
Liste zone 1
<ul>
<li>donnée a</li>
<li>donnée b</li>
<li>donnée c</li>
</ul>
Définition zone 1
<dl>
<dt>Titre A</dt>
<dd>le texte A de définition</dd>
</dl>
</div>
<div ID="zone-2">
ZONE 2
<p>
Liste zone 2
<ul>
<li>donnée A</li>
<li>donnée B</li>
<li>donnée C</li>
</ul>
Définition zone 2
<dl id="noir">
<dt>Titre B</dt>
<dd >le texte B de définition</dd>
</dl>
</div>
</BODY>
</HTML>
Et le fichier css :
#zone-1 {
position: absolute;
top: 25px;
left: 100px;
height: 300px;
width: 500px;
background-color:#FFC0C0;
}
#zone-2 {
position: absolute;
top: 350px;
left: 100px;
height: 400px;
width: 400px;
background-color:#C0C0FF;
}
/* définit une liste de définition avec le dd en noir */
dl#noir dd {
color:black;
}
/* définit le style général des listes non ordonnées */
ul, li .liste {
list-style-type: circle;
}
/* définit le style général des listes de définitions */
dt, dl {
font-weight:bold;
color:red;
}
dd {
font-weight:normal;
font-style:italic;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
dl#noir dd {
color:black;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.
