Feuilles de style, cascade et héritage

 

Mais au fait ! que veut dire CSS ? : Cascade Style Sheet... feuilles de style en cascade

Le style peut donc se répartir sur plusieurs feuilles intervenant en cascade, ...

Plusieurs feuilles dites-vous ? et si les déclarations y sont contradictoires, quel style apparaitra au final ?

 

Entrons dans le vif du Sujet

I Trois façons d'insérer du CSS

Il ya trois manières d'insérer une feuille de style:

  1. Par une feuille de style externe
  2. Par une feuille de style interne
  3. Par un attribut de style (style en ligne)
Syntaxe CSS
selecteur et regles

II Quelles différences entre externe, interne, en ligne ?

Pour un site Web professionnel, une même feuille de style doit être réutilisée sur les diffférentes pages du site pour unifier sa présentation, et surtout pour pouvoir la faire évoluer en cohérence sur l'ensemble du site.

Si la feuille est interne, un style doit être répété dans chaque page. Dès la modification du site, modifier toutes les pages devient rédibitoires et sources d'incohérence (une des pages sera vraisemblablement oubliée).

Ainsi pour les sites professionnels, le style doit être placer en feuille externe.

En revanche, certaines situations comme les newsletters nécessitent de placer le style en interne afin qu'il reste toujours attaché à la page de la newsletter.

Enfin, il n'existe pas de justification à l'emploi d'un style en ligne, sauf si correctif temporaire pour tester un style.

III L'ordre de priorité des feuilles de style

Des règles contradictoires peuvent apparaître, par exemple

  1. le navigateur définira la couleur des liens (<a>) en bleu,
  2. une feuille de style externe en rouge,
  3. une feuille de style interne en vert,
  4. un style en ligne en jaune.

De quelle couleur sera alors le lien ?

Pour faire court, c'est le dernier qui parle qui a raison... !

On aura donc par ordre de priorité de la plus basse à la plus haute :

  1. Navigateur par défaut
  2. Feuille de style externe
  3. Feuille de style interne (dans la section head)
  4. Style de ligne (dans un élément HTML)

Ainsi, un style en ligne (à l'intérieur d'un élément HTML) a la priorité la plus élevée, ce qui signifie qu'il va remplacer un style défini dans la balise <head>, ou dans une feuille de style externe, ou dans un navigateur (une valeur par défaut).

Remarque: Si le lien vers la feuille de style externe est placé après la feuille de style interne <head> HTML, la feuille de style externe remplace la feuille de style interne!

IV Ordre de priorité suivant la nature des sélecteurs de la règle

Exemple

les 3 types de sélecteurs (balise, id, classe) cible le même conteneur, de quelle couleur sera le texte ???

La priorité sera donné à la règle la plus spécifique, c'est à dire :

"sélecteur id" > "sélecteur class" > "sélecteur balise"

Ainsi pour l'exemple du code précédent, on visaualisera priorité des css

Mais si le sélecteur est composé , il existe un algorithme de calcul un peu compliqué que nous n'avons pas le temps d'exposer (demander le si c'est vraiment nécessaire). Le raisonnement reste toutefois construit sur la même base : un sélecteur présentant un identifiant l'emportera toujours sur un sélecteur n'en présentant pas, etc...

V    !important ;

Placer à la fin d'une déclaration, la notation !important ; la rend prioritaire sur toutes les autres. A n'employez qu'avec parcimonie, la présence de "!important ;" trop nombreux dénote d'une feuille de style mal structurée (patch à la va-vite)

Exemple
important

VI Héritage

Il faut distinguer "Héritage" et "cascade". Certaines propriétés comme la couleur, la taille des polices,  l'alignement du texte, etc.. sont héritées par les descendants c'est à dire se transmettent automatiquement des blocs HTML "parents" vers leurs "enfants". D'autres styles tels que la bordure, et les marges ne s'héritent pas.

Exemple
important
Dans la page de cette exemple , tous les éléments (a fortiori descendants de body) hériteront de la typographie, de la taille, et de la couleur définies sur le body (si ce style n'a pas été défini par défaut par le navigateur sur les balises enfants comme a, h1, etc.)


Il reste des exceptions, car Internet Explorer sous Windows et Netscape ont quelques problèmes avec l'héritage des tailles de police dans les tableaux
(indiquer explicitement qu'ils doivent hériter des tailles de police - font-size: inherit , ou définir séparément).

VII Feuille de style par défaut du navigateur

Chaque navigateur applique une CSS par défaut, intégrée au navigateur. Il fournit un minimum de mise en page, même lorsqu’il n’y a pas de CSS ! c'est celle que vous voyez quand une page n'a aucun style de défini ( : gros titre en gras, paragraphes espacés, liens en bleu souligné, des puces aux listes, lien en bleu soulignés… )

Ainsi les liens n'hériteront pas de la couleur défini sur le body (puisqu'elle est définit par défaut sur le navigateur), il faudra la redéfinir explicitement.

Avez-vous atteint les objectifs ?
Vous devez :
Testez-vous

De quelle couleur seront les titres de la page suivante ?

test

Questions de réflexion :

la priorité d'une règle s'hérite-t-elle aux descendants ? Réponse