Post on 22-Oct-2019
BDW1 - Programmation web - CSS
Fabien Duchateau
fabien.duchateau [at] univ-lyon1.fr
Université Claude Bernard Lyon 1
2018 - 2019
http://liris.cnrs.fr/fabien.duchateau/BDW1/
Positionnement dans BDW1
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 2 / 31
Rappel du cours (ou du week-end) précédent
Et le CSS dans tout ça ?
Glaçons, parasol, etc.
http://www.luc-damas.fr/humeurs/BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 3 / 31
Rappel du cours (ou du week-end) précédent
Et le CSS dans tout ça ?Glaçons, parasol, etc.
http://www.luc-damas.fr/humeurs/BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 3 / 31
Plan
Le CSS
Concepts
Sélecteurs
Généralités
Avant, mise en forme et mise en page mélangées avec lastructuration des données (balises obsolètes <font>, etc.)
Aujourd’hui, séparation entre structuration des données et miseen forme / mise en page :
I Simplification et lisibilité du code (maintenance)I Uniformisation du code entre les pages du même site et entre
différents médias (e.g., impression, écran)I Améliorer l’accessibilitéI Facilité de portage pour un autre site
Mise en forme/page avec les Cascading Style Sheets
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 5 / 31
Généralités
Avant, mise en forme et mise en page mélangées avec lastructuration des données (balises obsolètes <font>, etc.)
Aujourd’hui, séparation entre structuration des données et miseen forme / mise en page :
I Simplification et lisibilité du code (maintenance)I Uniformisation du code entre les pages du même site et entre
différents médias (e.g., impression, écran)I Améliorer l’accessibilitéI Facilité de portage pour un autre site
Mise en forme/page avec les Cascading Style Sheets
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 5 / 31
Cascading Style Sheets
CSS pour Cascading Style Sheets :
I Langage de présentation/de rendu des données
I Origine : 1994-1995 (standard W3C en 1996)
I Toujours en développement (CSS3 depuis 2010)
I Extension d’un fichier CSS : .css
http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascadeBDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 6 / 31
Une page web sans CSS, puis avec CSS
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 7 / 31
Quelques ressources
Des tutoriels ”jeux” pour apprendre le CSS, comme Flukeout
https://flukeout.github.io/https://developer.mozilla.org/en-US/docs/Learn/CSShttp://www.w3schools.com/css/http://css.mammouthland.net/
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 8 / 31
Plan
Le CSS
Concepts
Sélecteurs
Le CSS Concepts Sélecteurs
Généralités
Le CSS permet de personnaliser certains éléments d’une page weben leur appliquant un style
I Où insérer du CSS ?I Comment écrire un style CSS ?I Quel est l’impact des styles en cascade et de l’héritage ?
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 10 / 31
Le CSS Concepts Sélecteurs
Cinq niveaux d’insertion de code CSS
I Dans une balise, via un attribut (inline)
I Dans un script intégré dans l’entête de la page web (interne)
I Dans une feuille externe
I Dans plusieurs feuilles externes
I Dans une feuille utilisatrice (cas très rare)
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 11 / 31
Le CSS Concepts Sélecteurs
Niveau d’insertion inline
CSS inline : déclaration avec l’attribut style dans la balise surlaquelle le style s’applique
<balise style=”…”>…</balise>
7 <body style="background-color:#CCEEBB;">
Extrait de demo1-css-inline.html
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 12 / 31
Le CSS Concepts Sélecteurs
Niveau d’insertion interne
CSS interne : déclaration dans l’entête <head> de la page HTMLavec la balise <style>
<head><style>...</style></head>
7 <style type="text/css">8 body {9 background-color: #CCEEBB;
10 }
Extrait de demo1-css-interne.html
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 13 / 31
Le CSS Concepts Sélecteurs
Niveau d’insertion externe (une feuille)
CSS dans une seule feuille externe : la page HTML et sa feuilleCSS externe sont liées avec une balise <link> (dans l’entête<head> de la page HTML)
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
2 body {3 background-color: #CCEEBB;4 }
Extrait de demo1-style.css
7 <link href="demo1-style.css" rel="stylesheet" media="all" type="text/css">
Extrait de demo1-css-externe.html
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 14 / 31
Le CSS Concepts Sélecteurs
Niveau d’insertion externe (plusieurs feuilles)CSS dans plusieurs feuilles externes : la page HTML et ses feuillesCSS externes sont liées avec des balises <link> (dans l’entête<head> de la page HTML)
<link rel=”stylesheet” type=”text/css” href=”types.css”><link rel=”stylesheet” type=”text/css” href=”layout.css”><link rel=”stylesheet” type=”text/css” href=”color.css”>
http://www.alistapart.com/articles/progressiveenhancementwithcss/BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 15 / 31
Le CSS Concepts Sélecteurs
Niveau d’insertion recommandé
En théorie, utilisation de plusieurs feuilles externes (e.g., pourchaque média),
En pratique, utilisation d’une seule feuille externe :I Bénéficie des avantages du CSS (séparation données/mise en
forme, facilité de maintenance, etc.)I Moins complexe que l’utilisation de plusieurs feuillesI Possibilité de découper en plusieurs feuilles externes plus tardI Limiter l’utilisation des niveaux d’insertion inline et interne
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 16 / 31
Le CSS Concepts Sélecteurs
Syntaxe du CSS
Un style est un ensemble de paires sous la forme (propriété,valeur)
En inline, le style s’applique à la balise courante
<balise style=”propriété1 : valeur1; propriétén : valeurn;”>…</balise>
45 <td style="background-color: #2277FF; margin-right: 34em;">cellule 2</td>
Extrait de demo1-css-inline.html
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 17 / 31
Le CSS Concepts Sélecteurs
Syntaxe du CSS interne ou externe
En insertion interne ou externe, il faut spécifier sur quels élémentss’applique chaque style : c’est le rôle du sélecteur
sélecteur {propriété1 : valeur1 ;…propriétén : valeurn ;
}
22 #tdSpecial {23 background-color: #2277FF;24 margin-right: 34em;25 }
Extrait de demo1-style.css
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 18 / 31
Le CSS Concepts Sélecteurs
Notion de cascades
Les styles sont ”en cascades”, i.e., les déclarations de stylesexterne, interne et/ou inline se combinent
I Priorité accordée à la déclaration la plus proche de l’élément àstyliser, en cas de conflit sur une même propriété
I Ordre de priorité (liste par priorité décroissante) :[feuille utilisatrice,] inline, interne, externe
Exemple : si on déclare une balise paragraphe avec des propriétésde style fond rouge, alignement centré, et qu’une feuille externecontraint les balises paragraphes au style fond vert, police taille 12,quel est le style du paragraphe ?
⇒ fond rouge, alignement centré, police taille 12
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 19 / 31
Le CSS Concepts Sélecteurs
Notion de cascades
Les styles sont ”en cascades”, i.e., les déclarations de stylesexterne, interne et/ou inline se combinent
I Priorité accordée à la déclaration la plus proche de l’élément àstyliser, en cas de conflit sur une même propriété
I Ordre de priorité (liste par priorité décroissante) :[feuille utilisatrice,] inline, interne, externe
Exemple : si on déclare une balise paragraphe avec des propriétésde style fond rouge, alignement centré, et qu’une feuille externecontraint les balises paragraphes au style fond vert, police taille 12,quel est le style du paragraphe ?⇒ fond rouge, alignement centré, police taille 12
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 19 / 31
Le CSS Concepts Sélecteurs
Notion d’héritage
Imbrication des éléments HTML :I La balise <html> contient les balises <head> et <body>, la
balise <body> contient des balises <section>, <nav>, etc.
En CSS, un élément imbriqué hérite des propriétés de son/sesparents, sauf les propriétés redéfinies pour cet élément
Exemple : si on déclare une balise <body> avec une couleur defond bleue, un paragraphe sans style spécifique et dont le parentdirect est la balise <body> aura une couleur de fond bleue
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 20 / 31
Le CSS Concepts Sélecteurs
Commentaires en CSS
Commentaires multi-lignes avec lanotation /* … */
/*Fichier de style styles.cssVersion septembre 2018
*/p {/* Paragraphes en vert */color: green;
}
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 21 / 31
Le CSS Concepts Sélecteurs
En résumé
I Utiliser une feuille de style externeI Un style = des paires (propriété : valeur)I Cascade : plusieurs styles peuvent s’appliquer à un élémentI Héritage : un élément hérite des propriétés de ses parents
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 22 / 31
Plan
Le CSS
Concepts
Sélecteurs
Le CSS Concepts Sélecteurs
Sélecteurs
Sélecteur : motif (”pattern”) qui sélectionne le ou les éléments surlesquels va s’appliquer un style
Quelques types de sélecteur :I Une baliseI Un nom de classe (introduit par .)I Un identifiant d’élement (introduit par #)I Une combinaison d’éléments (e.g., les balises imbriquées dans
une autre)I Des éléments qui satisfont une condition (e.g., possédant un
certain attribut)I …
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 24 / 31
Le CSS Concepts Sélecteurs
Sélecteur de type balise
balise {propriété1: valeur1;…propriétén: valeurn;
}
I Le style défini par les propriétés propriété1, …, propriétén estappliqué à tous les éléments dont le nom de balise est balise
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 25 / 31
Le CSS Concepts Sélecteurs
Sélecteur de type classe (.)
.classe {propriété1: valeur1;…propriétén: valeurn;
}
I Pour rappel, une balise HTML peut avoir un attribut classqui contient une ou plusieurs classes
I Le style défini par les propriétés propriété1, …, propriétén estappliqué à tous les éléments dont l’attribut class possède lavaleur classe
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 26 / 31
Le CSS Concepts Sélecteurs
Sélecteur de type identifiant (#)
#identifiant {propriété1: valeur1;…propriétén: valeurn;
}
I Pour rappel, une balise HTML peut avoir un attribut id quiidentifie l’élément sans ambiguïté dans la page
I Le style défini par les propriétés propriété1, …, propriétén estappliqué à tous les éléments dont l’attribut id a pour valeuridentifiant
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 27 / 31
Le CSS Concepts Sélecteurs
Sélecteurs basés sur la structure
/* tous les éléments <balise1> et <balise2> */balise1, balise2 { … }
/* tous les éléments balise2 imbriqués dans un élément balise1 */balise1 balise2 { … }
/* tous les éléments balise2 dont le parent est un élément balise1*/balise1 > balise2 { … }
/* tous les éléments possédant une classe uneClasse qui sontimbriqués dans un élément balise1 */balise1 .uneClasse { … }
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 28 / 31
Le CSS Concepts Sélecteurs
Sélecteurs de type attribut
/* tous les éléments balise ayant l’attribut attrib */balise [attrib] { … }
/* tous les éléments balise ayant un attribut attrib dont la valeurvaut val */balise [attrib = ”val”] { … }
/* tous les éléments balise ayant un attribut attrib dont la valeurcontient la chaîne sous-chaine */balise [attrib *= ”sous-chaine”] { … }
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 29 / 31
Le CSS Concepts Sélecteurs
Priorités des styles en CSS
Plusieurs niveaux d’insertion, plusieurs types de sélecteurs... qui ala priorité ? Liste du plus prioritaire au moins prioritaire :
I Style dans la balise HTML (e.g., <h1 style=”color: black”>)I Utilisation d’un identifiant (e.g., h1#id {color: black;})I Utilisation d’une classe (e.g., .noir {color: black;})I Imbrication d’éléments (e.g., div h1 {color: black;})I Élément HTML (e.g., h1 {color: black;})
Exception avec la mention !important en fin de déclaration (quidevient la déclaration à appliquer) :
propriété : valeur !important ;
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 30 / 31
Le CSS Concepts Sélecteurs
En résumé
I Déclaration CSS : sélecteur {propriété: valeur;}I Nombreux types de sélecteurs, notamment les pseudo-classes
(e.g., élément survolé, lien visité)I Priorité des styles selon le niveau de CSS et le type de
sélecteur
http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors
http://www.w3schools.com/cssref/css_selectors.asp
http://wumo.com/wumo
BDW1 - Bases de données et programmation web // Programmation web - CSS UCBL Lyon 1 31 / 31