28173 sujets

CSS et mise en forme, CSS3

Bonjour,

En voulant preter aide sur un problème d'héritage de text-decoration de lien, il m'est revenu une question purement théorique:
Si techniquement je crois savoir que le code suivant fonctionne pour rompre l'héritage d'un bloc imbriqué dans un autre,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">



<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />

<style type="text/css">
#id1 {
width: 50%;
}

#id1 a{
text-decoration: underline;
float: left;
margin-left: 50px;
}

#id1 img{
border: 5px solid orange;
}

#class2 a  {
text-decoration: none;

}

#class2 img {
border: 0;
}
</style>
</head>
<body>
<div id="id1">
<a href="#"><img src="image.jpg" ></a> 
<a href="#">Coucou</a>
<div id="class2">
<a href="#"><img src="image.jpg" ></a>
<a href="#" >coucou</a>
 </div>	</div>
</body>
</html>


Pourquoi, si au lieu d'attribuer un id à class2, j'attribue un .class ça ne fonctionne plus, je croyais naïvement qu'id et .class avaient les mêmes propriétés ( sauf d'utiliser qu'un même id par page)

Voilou, juste un problème pour comprendre
Modifié par ghost (18 Sep 2006 - 17:09)
Bonjour,

1. On ne "brise" pas un héritage, l'héritage est toujours définitivement acquis.

2. En revanche on peut "surcharger" (au sens de la POO) une propriété héritée pour modifier sa valeur.

Dans ton exemple, tu surcharges la propriété text-decoration pour lui donner la valeur "none" pour le lien imbriqué.

3. Ce phénomène s'appelle la "cascade" qui obéit à un ensemble de règles et qui s'exprime avec la notion de spécificité des sélecteurs et de "poids" des règles CSS.

Sans entrer dans les détails :

Le poids d'une règle est un nombre de 4 chiffres (ABCD) qui s'exprime de la manière suivante :

A vaut 1 si la règle s'exprime au travers d'un attribut style.
Ce qui explique qu'une propriété déclarée dans un attribut style écrase toujours les propriété déclarées au moyen de sélecteurs.

Si A vaut 0 (on utilise que des sélecteurs):

B vaut le nombre de sélecteur d'id
C vaut le nombre de sélecteur de classe et de pseudo-classe
D vaut le nombre de sélecteur de type (élément) et de pseudo-élément

La règle de la cascade :
La règle de poids la plus forte s'applique, si deux règles de poids égal sont en concurrence, la dernière règle déclarée s'applique.

Dans ton exemple il y à 4 règles :

#idl poids = 0100 (1 id, 0 classe, 0 élément)
#idl a poids = 0101 (1 id, 0 classe, 1 élément)
#idl img poids = 0101 (1 id, 0 classe, 1 élément)
#class2 a poids= 0101 (1 id, 0 classe, 1 élément)
#class2 img poids=0101 (1 id, 0 classe, 1 élément)

Le même phénomène étant répété pour les bordures de tes images et le soulignement de tes liens, intéressons nous uniquement aux liens :

Deux règles gère le style "souligné" de tes liens :

#ild a (0101) (1 id, 0 classe, 1 élément)
#class2 a (0101) (1 id, 0 classe, 1 élément)

Ces deux règles ont le même poids, la dernière déclarée s'applique, ton lien "imbriqué" n'à plus de soulignement.

Si tu inverse la déclaration :
#class2 a (0101) (1 id, 0 classe, 1 élément)
#ild a (0101) (1 id, 0 classe, 1 élément)

La dernière règle s'applique et ton lien imbriqué est souligné

Si tu emplois une classe on obtiens :
#idl a (0101) (1 id, 0 classe, 1 élément)
.class2 a (0011) (0 id, 1 classe, 1 élément)

La règle #idl a à un poids plus fort, c'est elle qui s'applique, ton lien imbriqué reste souligné.

Autre cas : tu utilise une classe de cette manière :

#ild a (0101) (1 id, 0 classe, 1 élément)
#idl .class2 a (0111) (1 id, 1 classe, 1 élément)

La règle 2, du fait de la présence d'un sélecteur d'id obtiens un poids plus fort et s'applique : ton lien n'est plus souligné.

La cascade, le poids et la spécifité des sélecteurs est une base indispensable pour comprendre CSS.

Consulte ce document : Cascade CSS et priorité des sélecteurs d'inspiration monacale ce qui est un gage de qualité et d'illumination divine... Smiley smile

Jean-pierre
Modifié par jpv (18 Sep 2006 - 16:30)
Merci pour ces explications, ça a au moins le mérite de revoir ses fondamentaux que l'on a souvent tendance a enterrer sous des tonnes de recettes par ce qu'on a " l'habitude " que ça marche comme ça !

Merci encore