Aller au contenu

La technique pour personnaliser l’affichage d’un fichier XML grace aux feuilles de style CSS

Dans ce nouveau cours sur XML, apprenez à utiliser les feuilles de style CSS pour afficher du XML.

Le XML n’est pas très beau à voir, mais il est possible de le rendre beaucoup plus sympa avec un peu de CSS.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La technique pour personnaliser l’affichage d’un fichier XML grâce aux feuilles de style CSS

Bonjour à tous et bienvenu sur Développement Facile.

Ici Matthieu expert en développement applicatif, on continu ensemble cette série de cours dédiée au langage XML. Dans ce cours vous allez apprendre à créer des pages de style et à les utiliser avec XML. Je ne sais pas si vous avez déjà essayé mais les navigateurs Web savent afficher le contenu XML, typiquement les flux RSS, mais si vous lancez l’affichage d’un document XML dans votre navigateur, la présentation ne sera pas très jolie, pas très ergonomique, pas très lisible pour un non informaticien et le but des feuilles de style c’est justement de faire la mise en forme du contenu de l’information contenue dans un document XML. C’est ce que nous allons voir ensemble.

Les sélecteurs d’éléments

Il y a des informations CSS qui sont interprétées, utilisées par le document XML pour la mise en forme, si vous avez déjà vu les cours CSS, ça va vous parler ce cours, parce que c’est un récapitulatif, c’est les mêmes balises donc ça va vous parler, sinon, si vous avez besoin de plus d’informations parce que dans ce cours je vais aller volontairement vite parce que, si vous me suivez depuis longtemps, vous connaissez le CSS 3, si vous ne connaissez pas, que vous avez besoin de plus d’explications, je vous renvoie au cours sur CSS 3, tout simplement.

Le CSS il y a un sélecteur et des propriétés valeur, propriété valeur, toujours sélecteur donc div, p ou un sélecteur que vous avez créé, info, propriété valeur, color valeur, font family valeur, etc.

* ça sert à sélectionner tous les éléments,

Ensuite A si vous mettez A sa sélectionne tous les éléments A,

A > B ça sélectionne tous les éléments B dont l’élément parent est le A,

A+ B ça va sélectionner tous les éléments B si les éléments A et B ont le même parent et A précède directement B, donc A+ B, AB ça sélectionne tous les éléments B descendants, fils, petit-fils de l’élément A, vous avez là et les éléments B ici.

Ça c’est un récapitulatif de CSS, ce que vous allez utiliser tout de suite avec le langage XML.

Les sélecteurs d’attributs

Vous avez entre crochets att ça sélectionne tous les éléments avec un attribut ATT très pratique,

ATT = val toujours entre crochets, ça sélectionne tous les éléments avec un attribut ATT de valeur votre valeur,

ATT ~= val ça sélectionne tous les éléments avec un attribut ATT toujours dont la valeur contient val cette fois, précédemment c’était égal val donc là c’est dans la valeur contient val

et ATT /= val ça sélectionne tous les éléments avec un attribut ATT dont la valeur val ou la valeur commence par val suivie du –, donc ça aussi ça va vous aider c’est un petit récapitulatif.

Les sélecteurs de pseudo classes

Vous avez aussi des sélecteurs de pseudo classe CSS

: first-child comme son nom l’indique ça sélectionne le premier élément enfant,

: first–line ça sélectionne la première ligne,

: first–letter comme son nom l’indique ça permet de sélectionner le premier caractère, la première lettre d’un paragraphe, d’un mot, d’une phrase,

:before et : after si vous connaissez l’anglais, ça se positionne soit au début before soit à la fin after d’un élément, donc ces deux sélecteurs ça va vous permettre d’ajouter des éléments, du contenu directement via le code CSS.

Exemple

Je vous montre quelques exemples, vous allez voir quelques exemples, par exemple pour mettre en forme la première lettre d’un texte, vous créez votre balise perso, donc une balise CSS que vous créez, vous définissez, bienvenu sur développement facile, vous refermez la balise perso, donc c’est comme du langage XML balise ouvrante, balise fermante, et le CSS qui va avec, donc le sélecteur perso, propriété valeur, donc propriété display valeur bloc, propriétés font size valeur 14 pixels, la hauteur de la police, perso : first letter donc là on sélectionne la première du contenu donc le B de bienvenu sur développement facile, on prend le B, on met une taille de caractères font size à 33, font style italique, B sera affiché en italique, font weight bold, l’épaisseur de la police sera en gras, c’est un petit exemple de CSS comme je vous l’ai dit, il y a une trentaine de cours sur CSS, que vous pouvez consulter gratuitement, profitez-en aussi si vous avez besoin de plus d’explications.

Mise en forme d’un document XML

En associant style CSS comme je vous le disais en tout début de ce cours, avec un document XML, vous pouvez, avec un navigateur, afficher votre document XML mise en forme, d’une manière beaucoup plus ergonomique et plus jolie, grâce à votre feuille de style CSS. Pour cela pour ajouter une ligne de code dans vos documents XML, vous la voyez s’afficher sur votre écran là juste ici, XML style sheet type text CSS, on donne le chemin vous donnez le chemin vers votre feuille de style CSS qui s’applique à votre document XML, tout simplement.

Exemple de code

C’est partit, je vous montre un exemple de code source en direct, voici justement un exemple concret ou vous avez le contenu de votre fichier XML tout simplement, la balise d’entête avec l’encodage en iso, vous avez les différentes balises XML, content tuto,  content avec le contenu, un attribut id, content avec le contenu et à l’intérieur un autre nœud pour citation, le titre, le nom de l’auteur et ici la balise XML –style sheet ou vous faites référence à votre feuille de style CSS, tout simplement, avec le href, soit une valeur absolue, soit une valeur relative, c’est tout ça, vous construisez votre fichier XML, comme vous avez appris dans les cours précédents, donc comme d’habitude, avec des nœuds, des attributs, le contenu du nœud, le nœud intégré dans d’autres nœud et vous rajoutez bien cette ligne XML qui –style sheet avec le lien vers votre fichier CSS. Ensuite vous avez votre fichier CSS qui est vraiment très simple, c’est un fichier CSS basique comme vous avez vu dans les cours dédiés aux balises CSS 3, là on utilise par exemple content first letter pour la première lettre du contenu, ici content balise content first letter, première lettre C, quote ici, citation couleur verte écrit en italique, le contenu quote ici sera écrite en italique, vous avez le tuto, le titre, affichage, le type d’affichage bloc, on affiche pas le nom de l’auteur, ici on affiche le titre en majuscules avec une taille de 20 pixels, si on regarde la balise title ici, ce serait écrit en majuscules et ensuite vous avez juste, en faisant votre fichier XML, je vous répète une dernière fois et en intégrant la feuille de style CSS qui est ici, vous avez juste à effectuer l’affichage du fichier XML dans votre navigateur, voyez le titre du tuto est en majuscules, la première lettre du contenu est bien entourée en rouge en gras et avec une taille de police 33, vous avez bien la citation écrite en vert et en italique et le contenu content à chaque fois, le contenu numéro 1, le contenu numéro 2, c’est vraiment très simple, vous créez votre fichier XML, vous lui dites le lien avec XML –style sheet vers votre feuille de style CSS, une fois vous allez afficher votre fichier XML dans un navigateur, celui-ci sera mis en forme automatiquement, en respectant toutes les instructions CSS que vous lui avez donné, c’est aussi simple que ça.

Votre plan d’actions !

Maintenant c’est à vous de jouer, vous avez déjà suivi plusieurs cours sur le langage XML, vous allez faire de plus en plus de choses, maintenant vous pouvez mettre directement en forme vos documents XML en utilisant les feuilles de style, profitez-en. En attendant si vous avez des questions, posez les directement sous cette vidéo et moi je vous invite dès maintenant à consulter la deuxième vidéo, dans la deuxième vidéo vous allez aller beaucoup plus loin avec le langage XML, notamment comment le faire interagir avec PHP, le faire interagir avec JavaScript, vous allez découvrir les bases de données, si vous avez besoin de connaître CSS 3, toutes les nouveautés les nouvelles balises, vous allez découvrir tout ça dans la vidéo de bien évidemment quand on parle de CSS 3 ça va avec HTML 5, tout ça c’est dans la deuxième vidéo, vous cliquez juste l’image là juste au-dessus de moi, lancez la vidéo deux, cliquez sur cette image et on se retrouve tout de suite dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

Téléchargement du code source Exemple de fichier XML présenté avec du CSS

Cliquez ici pour télécharger le code source Exemple de fichier XML présenté avec du CSS

Avez vous des questions sur le CSS appliqué au XML ?

Utilisez la zone commentaire pour poser ici toutes vos question sur le XML

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>