28172 sujets

CSS et mise en forme, CSS3

Priorité des feuilles de style css

Hello,
J'avais en tête que la mise en forme se base (par ordre d'importance croissante) sur :
- la feuille de style externe,
- la feuille de style interne,
- la feuille de style personnalisée définie par l'internaute,
- la mise en forme codée en dur dans la page.

Pourtant dans le code suivant :
<html>
<head>
<title>Document sans nom</title>
<style type="text/css">
*{
	font-family: Verdana, Arial, sans-serif;
	font-size:10px;
}
</style>
</head>

<body>
	<div>
		<font face="Tahoma" size="6">
			Verdana
		</font>
	</div>
</body>
</html>


Dans cet exemple : c'est la feuille de style css interne qui prend le dessus. J'aurai donc tout faux ? ? ? ?
Bonjour,

J'ai remanié un peu ton exemple de test:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<html lang="fr">
<head>
<title>Document sans nom</title>
<style type="text/css">
body, span#un, font#deux, font#trois {
	font-family: Verdana;
	font-size: 100px;
}
font#trois span {
	font-family: Georgia;
	font-size: 25px;
}
</style>
</head>
<body>
	<span style="font-family: Georgia; font-size: 25px;" id="un">
		Ceci est un test
	</span>
	<br>
	<font face="Georgia" size="5" id="deux">
		Ceci est un test
	</font>
	<br>
	<font face="Georgia" size="5" id="trois">
		Ceci est un <span>test</span>
	</font>
</body>
</html>

Constat:
- les styles CSS inline (via attribut HTML style) sont prioritaires;
- les attributs de font prennent le pas sur les styles de l'élément parent;
- les styles appliqués directement à un élément font (via une classe, un identifiant, ou même simplement le sélecteur font {...}) prennent le pas sur les attributs de l'élément font concerné;
- même chose pour les styles appliqués à un enfant d'un élément font.

Bref, on constate que les attributs de mise en forme de l'élément font n'ont pas la même priorité que les styles inline (via attribut HTML style). Ce qui n'est pas particulièrement, vu que ce ne sont pas des styles inline, mais des attributs de mise en forme que les CSS sont censés remplacer.

Bref, rien de bien surprenant. Smiley smile
mlo a écrit :
J'avais en tête que la mise en forme se base (par ordre d'importance croissante) sur :
- la feuille de style externe,
- la feuille de style interne,
- la feuille de style personnalisée définie par l'internaute,
- la mise en forme codée en dur dans la page.

Le dernier point est à corriger.
Edit: euh... non, en fait c'est un peu tout faux. L'ordre croissant serait plutôt:
- la feuille de style par défaut du navigateur (styles agent utilisateur);
- les styles de la page (styles auteur), qu'ils soient internes ou externes ou inline;
- les styles définis par l'utilisateur (styles utilisateur).

Exception: un style auteur peut prendre le pas sur un style utilisateur si le style auteur est doté de la déclaration !important (et tant que le style utilisateur n'est pas marqué !important également).

Ensuite, à l'intérieur de ces trois groupes, les styles sont pondérés par la priorité des sélecteurs. Les styles inline ont la plus forte priorité possible (1000). Par contre, il n'y a pas la moindre différence entre une feuille de style interne et une feuille de style externe.

Enfin, si deux sélecteurs s'appliquant à un élément ont la même priorité, c'est celui qui vient en second qui a le dessus.

Tout ceci étant mieux expliqué dans l'article de référence suivant:
http://openweb.eu.org/articles/cascade_css/
Modifié par Florent V. (06 Sep 2007 - 17:44)
Sujet clos
Aller à