Cours feuille de style en cascade

Cours feuille de style en cascade, tutoriel & guide de travaux pratiques en pdf.

URL + URN = URI

Les URLs (Uniform Resource Locators, voir [RFC1738] et [RFC1808]) indiquent l’adresse d’une ressource sur le Web. Une nouvelle appellation destinée à identifier une ressource est l’URN (Uniform Resource Name). Les deux réunis forment ce qu’on nomme les URIs (Uniform Resource Identifiers, voir [URI]).
Les valeurs d’URI dans cette spécification sont dénotées par <uri>. On utilise la notation fonctionnelle « url() » pour désigner les URIs dans les valeurs de propriétés, comme ici :
Exemple(s) :
BODY { background: url(« http://www.bg.com/pinkish.gif ») }
Une valeur d’URI est formée par les caractères ‘url(‘ suivis par un blanc facultatif, suivi par un guillemet facultatif simple (‘) ou double (« ), suivis par l’URI lui−même, suivi par un guillemet fermant simple ou double, s’il y a lieu, suivi par un blanc facultatif et enfin par ‘)’. Les guillemets doivent être de la même sorte.
Exemple(s) :
Un exemple sans guillemets :
LI { list−style: url(https://www.redballs.com/redball.png) disc }
Les parenthèses, les virgules, les blancs et les guillemets simples ou doubles qui apparaissent dans un URI doivent être échappés avec une barre oblique inverse, ex. ‘\(‘, ‘\)’, ‘\,’, etc.
Selon le type d’URI, il doit aussi être possible d’écrire les caractères précédents sous forme d’échappement URI, où « ( » = %28, « ) » = %29, etc., tel que décrit dans [URI].
Pour créer des feuilles de style modulaires indépendantes de l’adresse absolue d’une ressource, les auteurs peuvent employer des URIs relatifs. Les URIs relatifs (décrits dans [RFC1808]) sont résolus en URIs complets à partir d’un URI de base. L’algorithme normatif de ce processus est défini au chapitre 3 de RFC 1808. Pour les feuilles de style CSS, l’URI de base correspond à celui de la feuille de style, et non à celui du document source.
Exemple(s) :
Supposons par exemple que la règle suivante :
BODY { background: url(« yellow ») }
se trouve dans une feuille de style désignée par l’URI :
http://www.myorg.org/style/basic.css
L’arrière−plan de l’élément BODY dans le document source sera carrelé avec l’image issue de la ressource désignée par cet URI :
http://www.myorg.org/style/yellow
La manière de gérer les URIs qui pointent vers des ressources non disponibles ou inappropriées peut varier d’un agent utilisateur à l’autre.

Les compteurs

Les compteurs sont dénotés par des identifiants (voir les propriétés ‘counter−increment’ et ‘counter−reset’). On se réfère à la valeur d’un compteur au travers des notations ‘counter(<identifiant>)’ ou ‘counter(<identifiant>, <list−style−type>)’. La valeur par défaut étant ‘decimal’.
Pour référencer une séquence de compteurs imbriqués, on utilise les notations ‘counters(<identifiant>, <chaîne>)’ ou ‘counters(<identifiant>, <chaîne>, <list−style−type>)’. Voir « Les compteurs imbriqués et leur portée » dans le chapitre sur le contenu généré.
En CSS2, on ne peut se référer aux valeurs des compteurs qu’avec la propriété ‘content’. Noter que la valeur ‘none’ est admise pour <list−style−type> : ‘counter(x, none)’ résulte en une chaîne vide.
Exemple(s) :
Voici une feuille de style qui numérote les paragraphes (P) pour chacun des chapitres (H1). Les paragraphes utilisent une numérotation en chiffre romains, suivis par un point et un espace :
P {counter−increment: par−num} H1 {counter−reset: par−num} P:before {content: counter(par−num, upper−roman) « . « }
Les compteurs qui sont hors du champs d’action d’une propriété ‘counter−reset’ sont considérés avoir été remis à zéro par la propriété ‘counter−reset’ de l’élément racine.