CSS3 Cascading Style Sheets PDF

CASCADING STYLE SHEETS CSS Cascading...

CASCADING STYLE SHEETS CSS Cascading Style Sheets Feuilles de Style en Cascade Année Universitaire : 2024-2025 Un mécanisme simple pour ajouter un style aux documents Web Mohammed Reda CHBIHI Garantie d’une grande économie de travail dans l’élaboration de documents Web [email protected] 2 CASCADING STYLE SHEETS CASCADING STYLE SHEETS CSS Cascading Style Sheets Structuration des documents sur le Web Feuilles de Style en Cascade L’utilisation des styles HTML devenait très difficile surtout pour les grands sites Web Possibilité d’en créer plusieurs, et que les styles peuvent être hérités en cascade (sur plusieurs niveaux) (plusieurs pages à gérer avec des styles différents et qui se répètent) 3 4  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Niveau Date Description CSS 1 17 décembre Consensus entre les différents intervenants dans l’élaboration Besoin d’un langage qui répond aux contraintes suivantes : 1996 d’une première spécification CSS Recommandation du W3C Obtention d’une présentation homogène sur tout un site en faisant CSS 2 Mai 1998 Amélioration de la précédente version. Plusieurs intervenants : MS, Apple, IBM, Google, Adobe, appel sur toutes les pages à une même définition de style, Opera, Mozilla, … Changement de l'aspect d'un site complet entier par la seule Recommandation du W3C modification de quelques lignes, CSS 2.1 Révision de la précédente version. Le code du langage de style devra être lisible sans qu’il soit confondu Plusieurs corrections effectuées (la dernière est en Juillet avec le code HTML (une syntaxe différente). 2007). Recommandation candidate CSS 3 Début du travail en 1999 parallèlement à CSS 2.1 Structuration modulaire des différents composants Plusieurs problèmes freine son passage au statut de 5 6 recommandation CASCADING STYLE SHEETS CASCADING STYLE SHEETS Le CSS 3 rencontre plusieurs problèmes : Priorité accordée au CSS 2.1 au détriment du CSS 3 Grand nombre de modules (proposés par plusieurs intervenants) Complexité des propriétés 7 8  CASCADING STYLE SHEETS Syntaxe Déclaration Valeurs P {font-size:18px;font-weight:bold} Sélecteur Propriétés 9 10 CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe 1 L’insertion d’un style CSS au sein d’une page Web se fait de trois manières : Titre de la page HTML 1. La balise pour un style interne h1 {color:#FCA;font-size:50px} 2. La balise pour un style externe 3. L’attribut global style (le sélecteur n’est pas spécifié) Page avec Style interne 11 12  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Titre de la page HTML Titre de la page HTML 3 Page avec Style Externe Page avec Style interne (inline) h1 { color:#FCA; font-size:50px; 2 } 13 14 CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Priorité des styles Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, 1. Style en ligne (utilisation de l’attribut global style) Il existe plusieurs types de sélecteurs : 2. Style interne (inclus dans le )  Sélecteur d’élément 3. Style externe 4. Style par défaut du navigateur h1 { color:#FCA; font-size:50px; } Priorité CSS 15 16  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, éléments HTML, Il existe plusieurs types de sélecteurs : Il existe plusieurs types de sélecteurs :  Sélecteur d’élément  Sélecteur d’identifiant (valeur de l’attribut id d’un élément) #identifiant{ color:#FCA; font-size:50px; Possibilité de définir des balises avec des noms } personnalisés h1#identifiant{color:#F00;} 17 18 CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, éléments HTML, Il existe plusieurs types de sélecteurs : Il existe plusieurs types de sélecteurs :  Sélecteur de classe (valeur de l’attribut class d’un élément)  Sélecteur de groupage p, h1, div {.nom_classe { color:#FCA; color:#FCA; font-size:50px; font-size:50px; } } p.nom_classe_2 { color:green; } 19 20  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, éléments HTML, Il existe plusieurs types de sélecteurs : Il existe plusieurs types de sélecteurs :  Autres Sélecteurs  Autres Sélecteurs div h1 { div>h1 { Toutes les balises color:#FCA; Toutes les balises color:#FCA; incluses dans une balise font-size:50px; dont la balise mère est font-size:50px; } une balise } 21 22 CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, éléments HTML, Il existe plusieurs types de sélecteurs : Il existe plusieurs types de sélecteurs :  Autres Sélecteurs  Autres Sélecteurs div + h1 { div ~ h1 { Toutes les balises qui sont color:#FCA; Toutes les balises color:#FCA; placées immédiatement après font-size:50px; qui sont précédées par une font-size:50px; une balise } balise } 23 24  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, éléments HTML, Il existe plusieurs types de sélecteurs : Il existe plusieurs types de sélecteurs :  Autres Sélecteurs  Autres Sélecteurs video[src] { border-color:#ABC; a[target=_parent] { Toutes les balises qui border-style:solid; Toutes les balises qui ont color:#123456; ont un attribut src border-width:2px; un attribut target avec la valeur font-family:calibri; } « _parent » } 25 26 CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, éléments HTML, Il existe plusieurs types de sélecteurs : Il existe plusieurs types de sélecteurs :  Autres Sélecteurs  Autres Sélecteurs img[alt~=test] { div[class^=test] { border-color:#ABC; border-color:#ABC; Toutes les balises qui ont Toutes les balises qui ont border-style:solid; border-style:solid; un attribut alt contenant le mot border-width:1px; un attribut class qui commence border-width:1px; « test » } par la chaine « test » } 27 28  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Le rôle des sélecteurs est de sélectionner et de manipuler les éléments HTML, éléments HTML, Il existe plusieurs types de sélecteurs : Il existe plusieurs types de sélecteurs :  Autres Sélecteurs  Autres Sélecteurs Toutes les balises qui ont div[class|=test] { img[src$=.jpg] { border-color:#ABC; border-color:#ABC; un attribut class qui commence Toutes les balises qui ont border-style:solid; border-style:solid; par la chaine « test » ou la border-width:1px; un attribut src qui se termine border-width:1px; même chaine suivie par le } par la chaine «.jpg » } caractère « - » 29 30 CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Le rôle des sélecteurs est de sélectionner et de manipuler les Pseudo-classes & Pseudo-éléments éléments HTML, Il existe plusieurs types de sélecteurs :  Autres Sélecteurs Utilisées pour définir un état div[class*=test] { spécifique pour un élément Toutes les balises qui ont background-color:#ABC; un attribut class qui contient la border-style:solid; Utilisés pour ajouter un style chaine « test » } à une partie d’un élément 31 32  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Pseudo-classes & Pseudo-éléments Pseudo-classes & Pseudo-éléments Pseudo-classe Description link cible les liens non visités Utilisé pour définir un état hover cible un élément survolé spécifique pour un élément active cible un élément activé par l’utilisateur Intervient entre la pression sur le bouton de la sourie et son relâchement Syntaxe focus cible un élément pointé avec la touche tab du clavier, ou après le relâchement du bouton gauche de la souris sur un élément pouvant être ciblé de la sorte Sélecteur : pseudo-classe visited cible un lien déjà visité par l’utilisateur lang() cible un élément en fonction de sa langue (spécifié par l’attribut lang) 33 34 first-child cible le premier élément enfant CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Pseudo-classes & Pseudo-éléments Pseudo-classes & Pseudo-éléments Pseudo-classe Description Pseudo-classe Description only-child cible un élément s’il est l’unique enfant nth-child(N) cible le Nième élément enfant only-of-type cible un élément s’il est l’unique élément ce de type dans sa hiérarchie nth-last-child(N) cible le Nième élément enfant depuis la fin (ordre inverse) root cible l’élément racine du document nth-of-type(N) cible le Nième élément d’un type donné au même niveau d’hierarchie empty cible un élément sans enfant nth-last-of-type(N) cible le Nième élément d’un type donné depuis de la fin (ordre inverse) target cible un élément pointé par son identifiant dans l’URL (ancre) last-child cible le dernier élément enfant enabled cible les éléments de l’interface qui sont activés first-of-type cible le premier élément d’un type donné dans sa hiérarchie (équivaut à nth-of-type(1)) disabled cible les éléments de l’interface qui sont désactivés last-of-type cible le dernier élément d’un type donnée dans sa hiérarchie (équivaut à checked cible les éléments cochés (bouton radio ou case à cocher) 35 36 nth-last-of-type(1)) required cible les éléments de formulaire définis comme requis (attribut required)  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Pseudo-classes & Pseudo-éléments Pseudo-classes & Pseudo-éléments Pseudo-classe Description optional cible les éléments de formulaire qui ne sont pas définis comme requis valid cible les éléments de formulaire respectant la valeur attendue The ONE !! invalid cible les éléments ne respectant pas la valeur attendue Second Third div:last-child{ read-only cible les éléments de formulaire en lecture seule (attribut readonly) Fourth background-color:red; read-write cible les éléments de formulaire en mode lecture et écriture } in-range cible les éléments de formulaire dont les valeurs sont dans l’intervalle LAST spécifié (attributs min & max des inputs de type range & number) out-range contraire de in-range not(selector) cible les éléments qui ne correspondent pas au sélecteur entre 37 38 parenthèses CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Pseudo-classes & Pseudo-éléments Pseudo-classes & Pseudo-éléments tr:nth-child(2n+1) p:nth-child(4n+1) { color: navy; } tr:nth-child(odd) p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } tr:nth-child(2n+0) p:nth-child(4n+4) { color: purple; } tr:nth-child(even) 39 40  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Pseudo-classes & Pseudo-éléments Pseudo-classes & Pseudo-éléments Pseudo-élément Description Utilisé pour ajouter un style à before permet d’insérer un contenu avant un élément et de le styler « à la volée » une partie d’un élément after permet d’insérer un contenu après un élément et de le styler « à la volée » first-letter permet de styler la première lettre d’un élément Syntaxe first-line permet de styler la première ligne d’un bloc Sélecteur :: pseudo-élément selection permet de styler du texte sélectionné (couleur de fond, couleur de texte). marker représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément en plus de l’élément 41 42 ) CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Pseudo-classes & Pseudo-éléments Pseudo-classes & Pseudo-éléments The ONE !! The ONE !! Second div::selection{ Second #two::after { Third background-color:yellow; Third content: " *"; Fourth color:blue; Fourth color:red; } } LAST LAST 43 44  CASCADING STYLE SHEETS CASCADING STYLE SHEETS Syntaxe Syntaxe Les sélecteurs Les sélecteurs Pseudo-classes & Pseudo-éléments Grace au mécanisme d’héritage (du HTML5) entre balises, il est possible d’appliquer un style sur plusieurs éléments fils