Introduction à CSS Généralités

Introduction Beaucoup de documents XML sont destinés à être présentés. Les information du fichier seul (avec ou sans DTD) ne le prmettent évidemment pas. Une couche de présentation est rajouté pour le formatage. Parmi les langages qui permettent cela, on note : -CSS (étudié dans les transparents qui suivent) -XSL-FO : basé sur XSLT (étudié aussi plus tard) et permettant la production de documents PDF.

Introduction CSS est un langage très simple qui ne nécessite pas la connaissance de HTML. Permet de faire du formatage de manière pratique mais… ne transforme pas le document. Impossible de changer l’ordre des éléments dans la présentation par exemple ! Il y a actuellement trois niveaux de recommandation pour CSS : level 1, 2 3. La 3eme est encore en cours de discussion. On va faire un tour rapide du langage (level 2) dans ce qui suit.

Exemple Considérons le fichier XML suivant : Bonjour, comment allez-vous ? Bien, merci. Quel est votre nom ? Arnaud.

Exemple 2 On lui associe la feuille de style suivante (voir le résultat) : questionreponse { background-color : yellow; } question:before{ content : "Question :"; font-weight: Bold; background-color : blue; } question{ display : block; font-style : italic; } reponse:before{ content : "Réponse :"; font-weight: Bold; } reponse{ display : block; font-style : italic; }

Généralités La feuille de style précédente contient 5 règles de style. Pour chacune l’élément à formaté est nommé suivie d’une paire d’accolades entourant les propriétés de style à appliquer. Exemple : l’élément « question » est affiché en « block » en italique. Chaque propriété a un nom et est suivie d’une valeur à appliquer. Exemple : font-size : 20pt; font-type : Arial, Helvetica, sans-serif; Ici, la première valeur « arial » est essayée, Puis « Helvetica » si la fonte n’est pas disponible, puis ….

Associer XML et CSS On associe une feuille de style CSS à un document XML en ajoutant une instruction de ce type en en-tête du fichier XML: xml-stylesheet est l’instruction de traitement cherchée par le navigateur pour savoir ce qu’il doit faire de la page. Un certain nombre d’attributs sont disponibles : type, href, charset (nom de l’encodage utilisé), title (titre de la feuille de style); media (permet d’améliorer la lisibilité en choisissant le média de sortie comme screen, tty, tv, etc…), alternate.

Sélectionner les éléments On l’a vu, chaque règle donne une liste de transformation à appliquer à une balise sélectionnée, jusque là par son nom. Un certain nombre de fonctions de CSS, les sélecteurs, permettent d’affiner la sélection en désignant les éléments plus ou moins directement : par leur emplacement relatif par rapport à d’autres éléments, par la valeur de leurs attributs, etc…. Toutefois cette capacité de sélection reste limité (comparé à la syntaxe de XSLT).

Sélecteur universel, descendants Sélecteur universel : *{background-color : yellow;} La règle sera appliquée à tout élément du document pour lequel aucune règle n’entre en concurrence. Descendants : film resume {font-family : Arial;} S’applique aux éléments « resume » descendants de « film » mais pas aux autres.

Sélecteur universel, descendants Descendants (suite) : film > role {font-family : Arial;} Le second élément doit être un enfant immédiat (un sous-élément) du premier. Cette règle s’appliquera à tous les éléments vérifiant la propriété (tous les « roles »). film + role {font-family : Arial;} Le second élément doit être le sous-élément suivant immédiatement le premier. La règle s’applique à lui seul.

Sélecteur de pseudo-élément Ces sélecteurs repèrent des positions ou objets qui ne correspondent pas à des éléments. Il y en a quatre : first-letter, first-line, after, before. First-letter : film:first-letter { font-size : 30pt;} Sélectionne la première lettre d’un élément (ici de « film ») et lui applique la règle (passe cette lettre en 30pt). First-letter : resume:first-line { font-size : 30pt;} Applique un formatage à la première ligne de l’élément sélectionné (ici « résumé »). Attention : le contenu exact de la première ligne dépend du navigateur (et de sa dimension).

Sélecteur de pseudo-élément Before, after : roles:before { content : ‘‘Liste des rôles :’’;} film:after { content : ‘‘fin de la description’’;} Sélectionne les points immédiatement avant (resp. après) l’élement mentionné (ici « role » et « film ») et applique la règle. On peut cumuler les sélecteurs : role>intitule:before {content : ‘‘Intitulé :’’;} Place l’expression « Intitulé : » avant chaque sous-élément « intitulé » de « role ».

Sélecteur d’attribut On peut sélectionner un élément par ses attributs (présence ou absence, valeur). specif[nb_cd] {display : none} N’affiche pas les balises « specif » qui ont un attribut « nb_cd » de spécifié. specif[nb_cd=‘‘2’’] {font-weight : bold} Met en gras les éléments « specif » dont l’attribut « nb_cd » vaut 2.

Sélecteur d’attribut On peut utiliser trois opérateurs pour aider à la sélection : ~=, |=, # specif[type~=‘‘Best’’] {display : none} Cherche les balises « specif » dont l’attribut « type » contient « Best ». specif[type=|‘‘Best’’] {display : none} Cherche les balises « specif » dont l’attribut « type » contient une valeur commençant par « Best » suivi d’un « - ». employe[num_secu=# ] {display : none} Cherche un « employe » par une valeur de clé (d’attribut ID).

Sélecteur de pseudo-classes Ces sélecteurs repèrent des éléments suivant une condition n’impliquant pas leur nom. Il y en a 7 : first-child, link, visited, active, hover, focus, lang. On détaille seulement: First-child : film:first-child {font-weight : bold;} Sélectionne le premier-élément de « film » et l’affiche en gras. Les autres sélecteurs se rapportent au fait que l’on a visité ou pas certaines balises, à la langue, etc…

La propriété display Indique comment les éléments sont disposés sur la page. Plusieurs valeurs possibles. inline : place l’élément à la position suivante disponible (valeur par défaut) block : place l’élément en le séparant de ses frères (avant et après) par un saut de ligne. liste-item : placé comme élément bloc mais avec une « puce » en début de bloc. Affiné par l’utilisation de list-style-type (qui contrôle le caractère ou l’image utilisé comme puce) et list-style-position (qui en contrôle l’indentation).

La propriété display none : dans ce cas, l’élément est caché. Dix valeurs différentes peuvent aussi indiquer que l’élément est ou fait partie d’un tableau : table, inline-table, table-row-group, table-header-group, table-footer-group, table-column-group table-row, table-column, table-cell, table-caption La sémantique est évidente : si un élément est formaté comme ligne de table, il doit avoir un parent « table » etc…

Fontes On peut, bien évidemment, donner un certain nombre d’indication sur les fontes. Parmi les plus fréquentes : font-family, font-weight, font-style, font-size De même on peut donner des indications sur la position des éléments. Par exemple : margin-left, margin-bottom, margin-top, etc,…. Mais aussi : line-height, border-width, left, top, etc…

Propriétes du texte et couleur Certaines propriétés du texte ne se règle pas en changeant simplement les fontes. Par exemple : text-indent : taille de l’indentation du premier élément d’un bloc. text-align : justification du texte (left, right, etc,…). On peut aussi régler le couleurs : color (couleur du texte), background-color, border-color. La couleur peut se spécifier directement (16 valeurs parmi lesquelles : yellow, blue, green, …) ou via ses trois composantes RVB (ex : #00FF00 pour vert).