Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

CSS 3 Amin NAIRI — ESGI Style intégré Un fichier HTML peut charger du style via

CSS 3 Amin NAIRI — ESGI Style intégré Un fichier HTML peut charger du style via une feuille de style externe, mais il est aussi possible d’écrire du code CSS directement dans une page HTML. Cela est pratique pour pouvoir charger du code dès l’interprétation de la page HTML afin d’afficher un composant de chargement rapidement si la page est très lourde car charger une feuille de style peut prend plus de temps dans ce cas là. Cependant, il est généralement déconseillé d’utiliser cette manière d’écrire du code pour des raisons d’organisation et de lisibilité. On utilise la balise style qui est un nœud enfant à la balise head pour pouvoir ajouter du style intégré à un document HTML. Style par élément Une troisième manière d’intégrer du style sur une page HTML consiste à intégrer celui-ci directement sur un élément HTML en utilisant la balise globale style. Cette balise s’utilise sur un nœud enfant graphique comme un paragraphe, un titre ou un bouton. Cela peut être pratique pour rapidement avoir un aperçu de ce que fait un style sur un élément, mais il n’est généralement pas conseillé de procéder de cette manière car la maintenance du style s’en voit grandement complexifié par rapport à une feuille de style externe. Fichier CSS Un fichier CSS est écrit avec l’extension .css. Dans ce fichier CSS, on retrouve du code qui permet de styliser une page HTML. Cela veut aussi dire qu’un fichier CSS n’existe qu’au sein d’une page HTML. Pour lier une feuille de style avec un fichier HTML, on utilise la balise link, qui est un nœud enfant à la balise head. Cette balise prend un attribut href qui est le chemin vers la feuille de style et un attribut rel qui est le type de lien à utiliser, qui aura toujours la valeur stylesheet dans ce cas. On peut avoir plusieurs feuilles de style pour une même page HTML, mais il est généralement conseillé d’avoir une feuille de style globale et une feuille de style par page HTML. C’est la manière la plus recommandée pour styliser une page HTML, mais il en existe d’autres. Commentaire Un commentaire permet de documenter son code, masquer certaines règles CSS (pour déboguer son code) et permet de revenir sur un projet en suspens plus rapidement car il y a besoin de moins de temps pour comprendre ce que fait une feuille de style. Un commentaire peut s’écrire sur une seule ligne ou plusieurs lignes successives à la fois. Vous pouvez écrire vos commentaires en français, cependant l’utilisation de l’anglais est recommandé, surtout lorsque vous avez besoin d’aide (sur StackOverflow par exemple) et la plupart des exemples sont écrits en anglais. Quel que soit le choix ici, tâchez de rester consistent. Règle Une règle en CSS est un ensemble composé d’un sélecteur et d’une ou plusieurs instructions. Un fichier CSS peut comporter plusieurs règles qui se suivent les unes après les autres, créant une cascade de règles, c’est ce qu’on appelle une feuille de style en cascade (Cascading StyleSheet). Sélecteur En CSS, on utilise des sélecteur afin de pouvoir faire correspondre un type avec un ou plusieurs élément HTML sur notre page. Il existe différentes catégories de sélecteur. Sélecteur — type Un type est une référence directe à un élément HTML sur une page. Cela permet de viser une ou plusieurs balise que l’on souhaite styliser. Sélecteur — Classe Il est possible de sélectionner une classe HTML, permettant ainsi de styliser uniquement les éléments HTML dont l’attribut class contient la classe que l’on souhaite styliser. Sélecteur — Identifiant Il est possible de sélectionner un identifiant HTML, permettant ainsi de styliser uniquement les éléments HTML dont l’attribut id contient l’identifiant que l’on souhaite styliser. Sélecteur — Universel Parfois, on a besoin de viser toutes les balises quel qu’elle soit. Pour cela, on peut utiliser le sélecteur universel. Cela est pratique par exemple si l’on souhaite supprimer toutes les marges intérieures et extérieures que le navigateur applique par défaut à certains éléments HTML. Sélecteur — Attribut Si l’on souhaite uniquement viser certains éléments HTML qui ont un attribut spécifique, on peut utiliser le sélecteur d’attribut. Par exemple, cela est pratique pour ne styliser que les éléments HTML qui ont un attribut personnalisé. Sélecteur — Pseudo-classe Une pseudo-classe est un identifiant spécial qui va nous permettre de styliser un élément selon des événements prédéfinis dans le DOM. On peut par exemple styliser uniquement les liens qui ont déjà été visités, les champs à cocher qui ont été cochés par l’utilisateur ou encore les éléments qui sont survolés. Sélecteur — Pseudo-élément Un pseudo-élément est un élément spécial dans le DOM puisqu’il n’existe qu’après que le DOM ait été créé. Cela signifie notamment qu’il n’est pas possible de créer des éléments HTML qui sont de type pseudo- élément : uniquement le navigateur les crée. Par exemple, on peut styliser la première ligne d’un texte, la première lettre ou la zone de texte qui est sélectionné par l’utilisateur à l’aide de sa souris. Il est possible de combiner pseudo-classe et pseudo-éléments, dans ce cas là, il est important de toujours utiliser la pseudo-classe avant le pseudo- élément dans la syntaxe. Combinateur Il est intéressant de disposer de plusieurs manière de viser des éléments HTML, mais parfois, on se rends compte que la plupart de notre code commence à se répéter souvent pour différents sélecteurs. Pour cela, on peut utiliser des combinateurs de sélecteurs qui vont nous aider à factoriser notre code. Il est possible d’utiliser plusieurs combinateurs à la fois et le style est toujours appliqué au dernier selecteur visé par le ou les combinateurs. Combinateur — Général Descendant Si l’on souhaite viser tous les enfants, sous-enfants, sous-sous-enfants, ou à n’importe quel niveau de profondeur n’importe quel enfant d’un élément parent, on va alors utiliser un combinateur général descendant. Il est simplement noté en espaçant les sélecteurs. On peut ainsi combiner deux sélecteurs entre eux. À noter que l’on peut descendre autant de fois que l’on veut, et donc combiner autant de sélecteurs que l’on souhaite. Combinateur — Enfant Direct Parfois, un combinateur général devient trop permissif et ne correspond pas à une architecture HTML complexe. Il est donc nécessaire d’avoir un sélecteur plus stricte. On peut utiliser un combinateur d’enfant direct. Cela permet de ne viser que les éléments directement après un autre. Comme pour tous les combinateurs, on peut en utiliser autant de fois que l’on souhaite, et donc les enchaîner autant de fois que l’on veut. Combinateur — Conjonction Un combinateur par conjonction va nous permettre de rassembler des sélecteurs différents utilisant un ensemble de règles communes. On utilise une virgule afin de séparer les différents sélecteurs que l’on souhaite viser par cette règle. Combinateur — Voisin Direct Un combinateur par voisin direct va nous permettre de rassembler des sélecteurs différents étant des voisins directs, c’est-à-dire existant au même niveau HTML et étant définis les uns après les autres. Cette dernière distinction est essentielle puisque si l’ordre du combinateur est inversé, il risque de ne plus correspondre à la structure du DOM et donc d’appliquer le style souhaité. Combinateur — Voisin Général Un combinateur par voisin général est similaire au combinateur par voisin direct, à ceci près qu’il permet d’avoir des éléments HTML entre les deux (tant que l’ordre est respecté). Exercice 1 ● Comment faire pour styliser le span dans le p ? ● Comment faire pour styliser le titre dans la section à l’intérieur de l’article ? ● Comment faire pour styliser le label lorsque la case à cocher est cochée ? Unité Pour certaines propriétés CSS, il est important de pouvoir utiliser des unités qui vont nous permettre de personnaliser l’important qu’une propriété va avoir sur un élément. Par exemple, on peut vouloir avoir envie de redimensionner la taille d’un élément selon une taille particulière. Unité — Absolue — Pixel Un pixel est un point éléctronique affiché à l’ écran qui s’illumine et, lorsqu’il est combiné à d’autres pixels, permet d’afficher des images à l’ écran. C’est une unité qui est utilisé par le langage afin de mesurer finement des dimensions. Certaines propriétés l’utilise comme lorsque l’on souhaite redimensionner la largeur et la hauteur d’un élément. Unité — Relative — Pourcentage Parfois, une unité comme le pixel n’est pas assez large ou général et ne permet pas d’avoir une unité relative sur laquelle se baser. L’unité pourcentage permet de résoudre ce problème et octroie la possibilité d’avoir une unité qui est relative par rapport à l’élément parent. Par exemple, on peut vouloir avoir envie de redimensionner un paragraphe relativement par rapport à une section. Unité — Relative — Taille d’un caractère Il est possible d’utiliser une fraction de la taille d’un caractère comme unité de référence. Pour cela, on utilisera l’unité em. La valeur qui est attribuée est un multiplicateur, donc 1em équivaudra à 1 fois la taille, 15em équivaudra à 15 fois la taille etc... Cette unité est calculée en fonction de la taille d’un caractère, à partir du style de l’élément parent. Par uploads/s3/ cours 13 .pdf