LIF4 - Programmation Web - CSS

LIF4 - Programmation Web - CSS Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2015-2016 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/59

Rappel du cours (ou du week-end) précédent Et le CSS dans tout ça? http://www.luc-damas.fr/humeurs/ 2/59

Rappel du cours (ou du week-end) précédent Et le CSS dans tout ça? Glaçons, parasol, alcool/sirop à mélanger avec la bière, etc. http://www.luc-damas.fr/humeurs/ 2/59

Contexte Avant : mise en forme et mise en page dans le code HTML, avec les données (balises obsolètes <center>, <font>, etc.) Avantages de séparer données et mise en forme/page : Facilité de maintenance Facilité de portage pour un autre site Simplification et lisibilité du code Uniformisation du code entre les pages du même site et entre différents médias (e.g., impression, écran) Améliorer l accessibilité 3/59

Contexte Avant : mise en forme et mise en page dans le code HTML, avec les données (balises obsolètes <center>, <font>, etc.) Avantages de séparer données et mise en forme/page : Facilité de maintenance Facilité de portage pour un autre site Simplification et lisibilité du code Uniformisation du code entre les pages du même site et entre différents médias (e.g., impression, écran) Améliorer l accessibilité Mise en forme/page avec les Cascading Style Sheets 3/59

Cascading Style Sheets CSS pour Cascading Style Sheets : Langage de présentation/de rendu des données Origine : 1994-1995 (standard W3C en 1996) Toujours en développement (CSS3 depuis 2010) Extension d un fichier CSS :.css http://fr.wikipedia.org/wiki/feuilles_de_style_en_cascade http://fr.openclassrooms.com/informatique/css/cours http://css.mammouthland.net/ http://fr.html.net/tutorials/css/ 4/59

Une page web sans CSS, puis avec CSS 5/59

Plan Introduction aux CSS Mise en forme avec CSS Mise en page en CSS 6/59

Différents niveaux d insertion On peut placer du code CSS à cinq niveaux : Dans une balise, via un attribut (inline) Dans un script intégré dans l entête de la page web (interne) Dans une feuille externe Dans plusieurs feuilles externes L utilisateurice possède sa feuille (cas très rare) 7/59

Différents niveaux d insertion On peut placer du code CSS à cinq niveaux : Dans une balise, via un attribut (inline) Dans un script intégré dans l entête de la page web (interne) Dans une feuille externe Dans plusieurs feuilles externes L utilisateurice possède sa feuille (cas très rare) Quel est le niveau d insertion recommandé? 7/59

Différents niveaux d insertion On peut placer du code CSS à cinq niveaux : Dans une balise, via un attribut (inline) Dans un script intégré dans l entête de la page web (interne) Dans une feuille externe Dans plusieurs feuilles externes L utilisateurice possède sa feuille (cas très rare) Quel est le niveau d insertion recommandé? Idéalement plusieurs feuilles externes (e.g., pour chaque média), mais généralement dans une seule feuille externe 7/59

Différents niveaux d insertion (2) CSS inline (dans une balise) avec l attribut style : <balise style="...">...</balise> CSS interne (entête de la page HTML) avec balise <style> : <head> <style>... </style> </head> 8/59

Différents niveaux d insertion (2) CSS inline (dans une balise) avec l attribut style : <balise style="...">...</balise> CSS interne (entête de la page HTML) avec balise <style> : <head> <style>... </style> </head> Limiter l utilisation de ces deux niveaux d insertion! 8/59

Différents niveaux d insertion (3) CSS dans plusieurs feuilles externes : <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/ 9/59

Différents niveaux d insertion (4) CSS dans une seule feuille externe : <link rel="stylesheet" type="text/css" href="styles.css"> Solution à privilégier (pour les projets) : Bénéficie des avantages du CSS (séparation données/mise en forme, facilité de maintenance, etc.) Moins complexe que l utilisation de plusieurs feuilles Possibilité de découper en plusieurs feuilles externes plus tard 10/59

Notion de cascades Les styles peuvent être en cascades, i.e., la possibilité de combiner des déclarations de styles externe, interne ou inline Priorité accordée à la déclaration la plus proche de l élément à styliser, en cas de conflit sur une même propriété Ordre décroissant de priorité : [feuille utilisateurice,] inline, interne, externe Exemple de cascades Si on déclare une balise paragraphe avec des propriétés de style fond rouge, alignement centré, et qu une feuille externe contraint les balises paragraphes au style fond vert, police taille 12, quel est le style du paragraphe? 11/59

Notion de cascades Les styles peuvent être en cascades, i.e., la possibilité de combiner des déclarations de styles externe, interne ou inline Priorité accordée à la déclaration la plus proche de l élément à styliser, en cas de conflit sur une même propriété Ordre décroissant de priorité : [feuille utilisateurice,] inline, interne, externe Exemple de cascades Si on déclare une balise paragraphe avec des propriétés de style fond rouge, alignement centré, et qu une feuille externe contraint les balises paragraphes au style fond vert, police taille 12, quel est le style du paragraphe? fond rouge, alignement centré, police taille 12 11/59

Héritage Imbrication des éléments HTML : 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/ses parents, sauf les propriétés redéfinies pour cet élément Exemple d héritage Si on déclare une balise <body> avec une couleur de fond bleue, un paragraphe sans style spécifique et dont le parent direct est la balise <body> aura une couleur de fond bleue 12/59

Syntaxe du CSS (externe ou interne) sélecteur 1 { propriété 1 : valeur 1 ; propriété 2 : valeur 2 ; } sélecteur 2 { propriété 3 : valeur 3 ;... } Un sélecteur se voit attribué un ensemble de paires (propriété, valeur) 13/59

Commentaires Commentaires en CSS : /* Fichier de style styles.css Version septembre 2015 */ p { /* Paragraphes en vert */ color : green ; } 14/59

Sélecteurs Sélecteur : pattern qui sélectionne l élément ou le groupe d éléments sur lesquels va s appliquer le style Types de sélecteur possibles : Une balise Un nom de classe (introduit par.) Un identifiant d élement (introduit par #) Une combinaison d éléments (e.g., les balises imbriquées dans une autre) Des éléments qui satisfont une condition (e.g., possédant un certain attribut) 15/59

Sélecteurs (2) Sélecteur de type balise : balise { propriété 1 : valeur 1 ; propriété 2 : valeur 2 ; } Applique un style à tous les éléments dont le nom de balise est balise 16/59

Sélecteurs (3) Rappel : les balises HTML ont un attribut class Sélecteur de type nom de classe :.classe { propriété 1 : valeur 1 ; propriété 2 : valeur 2 ; } Applique un style à tous les éléments dont l attribut class vaut classe Plusieurs éléments (et de balises différentes) peuvent appartenir à la même classe 17/59

Sélecteurs (4) Rappel : les balises HTML ont un attribut id Sélecteur de type identifiant : #identifiant { propriété 1 : valeur 1 ; propriété 2 : valeur 2 ; } Applique un style à l élément de la page dont l attribut id vaut identifiant Unique pour chaque page! 18/59

Sélecteurs (5) Combinaison et comparaison avec les sélecteurs : /* tous les éléments <balise 1 > et <balise 2 > */ balise 1, balise 2 {... } /* tous les éléments balise 2 imbriqués dans un élément balise 1 */ balise 1 balise 2 {... } /* tous les éléments balise 2 dont le parent est un élément balise 1 */ balise 1 >balise 2 {... 19/59

Sélecteurs (6) /* tous les éléments balise ayant l attribut attrib */ balise [attrib] {...} /* tous les éléments balise ayant un attribut attrib dont la valeur vaut val */ balise [attrib = "val"] {...} Beaucoup d autres possibilités, voir les références! http://www.w3.org/style/css3-selectors-updates/ WD-css3-selectors-20010126.fr.html#selectors http://www.w3schools.com/cssref/css_selectors.asp 20/59

Propriétés et valeurs Nombreuses propriétés en CSS3, se référer à la documentation pour savoir quelles propriétés sont acceptées par une balise Les valeurs dépendent évidemment de la propriété (généralement liste restreinte) http://www.w3schools.com/cssref/default.asp 21/59

Priorités Plusieurs insertions de CSS, plusieurs types de sélecteurs... qui a la priorité? Liste du plus prioritaire au moins prioritaire : Style dans la balise HTML (e.g., <h1 style="color : black">) Utilisation d un identifiant (e.g., h1#id {color : black ;} ) Utilisation d une classe (e.g.,.noir {color : black ;} ) Imbrication d éléments (e.g., div h1 {color : black ;} ) Elément HTML (e.g., h1 {color : black ;} ) Exception avec la mention!important en fin de déclaration (qui devient la déclaration à appliquer) : propriété : valeur!important ; 22/59

En résumé Déclaration CSS : sélecteur {propriété: valeur;} Notion d héritage : un élément hérite des propriétés de ses parents Priorité selon les styles en cascades et les types de sélecteurs 23/59

Plan Introduction aux CSS Mise en forme avec CSS Mise en page en CSS 24/59

Généralités Quelles propriétés, quelles valeurs pour une déclaration CSS? Consulter la documentation! Une majorité de ces propriétés possède une liste restreinte de valeurs On peut appliquer ces couples {propriété, valeur} à de nombreux éléments HTML pour les besoins suivants : choix des couleurs (texte, arrière plan,...) choix des polices de caractères... Il existe environ 250 propriétés en CSS3 sur les différents éléments! Dans la suite : quelques propriétés de texte, bordures, liens,... http://www.w3.org/style/css/learning.fr.html http://www.w3schools.com/cssref/default.asp 25/59

Propriétés de police Propriété pour la taille de police : font-size : 100% ; ou font-size : 1em ; Taille de police à 100% ou taille normale à 1em (taille inférieure entre 0 et 1, e.g., 0.6em) Éviter les mesures en px, cm, pt qui utilisent des valeurs absolues (inadaptées pour certains lecteurs) Propriété pour la couleur de police : color : #000000 ; Police de couleur noire (#000000 en code hexa) 26/59

Propriétés de police (2) Propriété pour la famille de police : font-family : arial, times new roman, sans-serif ; Police en Arial ou Times, famille sans serif Si la première police n est pas trouvée sur le sytème, remplacement par les polices suivantes ou une police de la même famille On peut aussi faire télécharger une police à l utilisateur avec la déclaration @font-face Propriété pour le style de police : font-style : normal italic oblique ; Valeurs : normal (défaut), italique, ou oblique 27/59

Propriétés de police (3) Propriété pour la variante de police : font-variant : normal small-caps ; Valeurs : normal (défaut) ou petites majuscules Propriété pour l épaisseur de police : font-weight : normal bold bolder lighter ; Valeurs : normal (défaut), gras, très gras ou peu gras 28/59

Propriétés de texte Propriété pour l alignement de contenu (dont texte) : text-align : left right center justify ; Valeurs : alignement à gauche, droite, centré ou justifié Propriété pour la décoration du texte : text-decoration : none underline overline line-through blink ; Valeurs : rien, souligné, surligné, barré, clignotant 29/59

Propriétés de texte (2) Propriété pour transformer un texte : text-transform : none capitalize uppercase lowercase ; Valeurs : rien, tout en capitalisé, tout en majuscules, tout en minuscules Propriété pour la hauteur de ligne : line-height : normal nombre pourcentage ; Valeurs : normal, une valeur numérique ou un pourcentage 30/59

Notion de boîtes Toutes les balises HTML sont contenues dans des boîtes : Ces boîtes sont invisibles la plupart du temps Possibilité de configurer leurs propriétés (bordure, marge, espacements, etc.) http://fr.html.net/tutorials/css/ 31/59

Propriétés de bordure Que dire sur le style de la bordure? 32/59

Propriétés de bordure Que dire sur le style de la bordure? Insertion du CSS : inline (par l attribut style) Style appliqué à une liste numérotée spécifique Deux propriétés de bordure utilisées : border-style, avec pour valeur dotted (pointillés) border-width, ici avec une épaisseur de 5px 32/59

Propriétés de liens Que dire sur le style des liens? 33/59

Propriétés de liens Que dire sur le style des liens? Insertion du CSS : interne (balise <style>) Style appliqué à tous les liens lors de leur survol par la souris (pseudo classe :hover) Trois propriétés utilisées : color, pour la couleur du texte en rouge text-decoration, pour supprimer toute décoration background-color, pour une couleur de fond en noir 33/59

Propriétés d image de fond Quel dire sur le style du tableau? 34/59

Propriétés d image de fond Quel dire sur le style du tableau? Insertion du CSS : externe (balise <link> pour lier la feuille de style à la page HTML) Style appliqué à l élément dont l attribut id vaut tdspecial Trois propriétés utilisées : color, pour la couleur du texte en rouge background-color, pour une couleur de fond blanc background-image, pour une image de fond bluefish.png Comment le tableau peut-il avoir des bordures? 34/59

En résumé Fiche récapitulative de tous les sélecteurs et propriétés http://visibone.com/html http://visibone.com/ 35/59

En résumé (2) Utiliser une feuille de style externe Utiliser les nombreuses possibilités des sélecteurs pour appliquer des styles au format { propriété : valeur; } Démo avec demo1-inline.html, demo1-interne.html, demo1-externe.html (code source sur la page du LIF4) 36/59

Plan du cours Introduction aux CSS Mise en forme avec CSS Mise en page en CSS 37/59

Rappels Document HTML = imbrication de boîtes (balises) Balises du document (e.g., <html>, <head>, <body>) Balises structurantes (e.g., <header>, <nav>, <aside>) et neutres (<span>, <div>) Autres balises (e.g., <strong>, <a>, <img>) Quelles balises structurantes sont utilisées sur cette page? Quelles autres balises? 38/59

Rappels Document HTML = imbrication de boîtes (balises) Balises du document (e.g., <html>, <head>, <body>) Balises structurantes (e.g., <header>, <nav>, <aside>) et neutres (<span>, <div>) Autres balises (e.g., <strong>, <a>, <img>) Quelles balises structurantes sont utilisées sur cette page? Quelles autres balises? Comment indiquer que la zone verte est en haut? Que le menu est collé à gauche, sous la zone verte? 38/59

Rappels Document HTML = imbrication de boîtes (balises) Balises du document (e.g., <html>, <head>, <body>) Balises structurantes (e.g., <header>, <nav>, <aside>) et neutres (<span>, <div>) Autres balises (e.g., <strong>, <a>, <img>) Quelles balises structurantes sont utilisées sur cette page? Quelles autres balises? Comment indiquer que la zone verte est en haut? Que le menu est collé à gauche, sous la zone verte? La mise en page CSS permet de positionner et dimensionner les zones 38/59

Notion de flux Flux : ordre dans lequel les éléments HTML sont lus par le navigateur et affichés Exemple de flux possible : chaque élément HTML est affiché l un après l autre selon l ordre de lecture par le navigateur 39/59

Comment afficher un élément HTML? L affichage d un élément dépend de plusieurs paramètres : Son ordre d apparition dans le flux (niveau HTML) Son "type de rendu" (comportement de la balise) Son positionnement Ses dimensions (hauteur et largeur, mais aussi les marges intérieures/extérieures) http://fr.openclassrooms.com/informatique/cours/ apprenez-a-creer-votre-site-web-avec-html5-et-css3/ http://openweb.eu.org/articles/initiation_flux/ 40/59

Comment afficher un élément HTML? L affichage d un élément dépend de plusieurs paramètres : Son ordre d apparition dans le flux (niveau HTML) Son "type de rendu" (comportement de la balise) Son positionnement Ses dimensions (hauteur et largeur, mais aussi les marges intérieures/extérieures) Il faut donc personnaliser les trois derniers paramètres en CSS pour afficher correctement un élément HTML! http://fr.openclassrooms.com/informatique/cours/ apprenez-a-creer-votre-site-web-avec-html5-et-css3/ http://openweb.eu.org/articles/initiation_flux/ 40/59

Type de rendu d un élément Type de rendu : comportement d un élément HTML en termes d affichage et de relation avec ses éléments voisins Chaque élément a un type de rendu par défaut, pour rappel : block : éléments les uns en dessous des autres, avec retours-chariot avant et après (e.g., <p>, <h1>, <div>) inline : éléments les uns à côté des autres (e.g., <a>, <img>, em, <span>) Possibilité de modifier le type de rendu d un élément avec la propriété display display : block inline inline-block list-item table table-row table-cell none ; 41/59

Type de rendu d un élément (2) Type de rendu block : display : block ; Élément placé sous un autre (succession verticale) : Occupe toute la largeur de son conteneur Redimensionnable avec les propriétés width, height, min-width, min-height, max-width et max-height Peut avoir des marges verticales Éléments HTML bloc ont par défaut ce type de rendu CSS 42/59

Type de rendu d un élément (3) Type de rendu inline : display : inline ; Élément placé à côté d un autre (succession horizontale) : Largeur déterminée par leur contenu (texte, image, etc.) Pas redimensionnables (en théorie) Éléments HTML inline ont par défaut ce type de rendu CSS 43/59

Type de rendu d un élément (4) Type de rendu inline-block (cas de la balise <input>) : display : inline-block ; Identique au rendu inline, mais les éléments sont redimensionnables Type de rendu list-item (cas de la balise <li>) : display : list-item ; Élement de type block avec des propriétés liées aux puces 44/59

Type de rendu d un élément (5) Types de rendu table, table-row, table-cell : display : table table-row table-cell ; Même comportement que les balises HTML table, tr, td Peuvent être utilisées pour la mise en page Type de rendu none : display : none ; Élément caché, qui n apparait pas 45/59

Dimensions d un élément Propriétés de dimensions à régler : Hauteur (height) et largeur (width) Hauteurs et largeurs minimales et maximales (min-height, min-width, max-height, max-width) Marges internes (padding) et externes (margin), qui s ajoutent aux dimensions width et height Unités de mesure : em, %, px, ex, cm, mm, in, pt, pc (privilégier em, % ou px à cause de la plasticité!) width : 50% ; /* largeur de l élément */ min-height : 400em ; /* hauteur minimale de l élément */ margin : 0em ; /* marge extérieure */ padding-top : 2em ; /* marge intérieure du haut */ http://www.w3.org/style/examples/007/units.fr.html 46/59

Dimensions d un élément (2) Centrage automatique d un élément (horizontalement) : margin : auto ; Si le contenu d un élément dépasse de l élément conteneur, utilisation de la propriété overflow ou word-wrap : overflow : visible scroll hidden auto ; word-wrap : normal break-word ; Valeurs pour le contenu trop grand : dépassement (défaut), ascenseur, caché, automatique (i.e., choix par le navigateur). Les mots trop longs (e.g., URL) peuvent être coupés avec word-wrap : break-word; 47/59

Dimensions d un élément (3) #paragraphe1 { width : 350px ; height : 110px ; text-align : justify ; border : 2px solid black ; overflow : auto ; } #paragraphe2 { width : 350px ; height : 110px ; text-align : justify ; border : 2px solid black ; } 48/59

Positionnement d un élément Techniques pour positionner un élément HTML sur une page : Absolu / fixe Relatif Flottant Par tableau Avec inline-block 49/59

Positionnement d un élément Techniques pour positionner un élément HTML sur une page : Absolu / fixe Relatif Flottant Par tableau Avec inline-block On considère la page comme un repère orthonormé : Point de coordonnées d origine (0, 0) en haut à gauche Placement des éléments par leurs coordonnées dans le repère Précis, mais fastidieux 49/59

Positionnement absolu Positionnement absolu avec la propriété position : position : absolute ; L élément déclaré en position absolue est retiré du flux : Positionnement par rapport au premier ancêtre positionné en absolu/fixe/relatif (sinon la fenêtre du navigateur) Propriétés top, left, bottom, right pour indiquer l écart entre le côté représenté par la propriété et l élément Superposition au-dessus des autres éléments (si plusieurs éléments en absolu, la propriété z-index indique l ordre de superposition (l élément avec le plus grand z-index sera au-dessus) 50/59

Positionnement absolu (2) http://www.pompage.net/img/html/page_modele09.html 51/59

Positionnement fixe Positionnement fixe avec la propriété position : position : fixed ; Idem que la position absolue, mais avec fixation : Positionnement par rapport au premier ancêtre positionné en absolu/fixe/relatif (sinon la fenêtre du navigateur) Propriétés top, left, bottom, right pour indiquer l écart entre le côté représenté par la propriété et l élément Même avec une barre de défilement, l élément fixe gardera toujours la même position dans la page 52/59

Positionnement relatif Positionnement relatif avec la propriété position : position : relative ; Décale l élément par rapport à sa position initialement prévue dans le flux : Les autres éléments considèrent que celui-ci est toujours à sa position initiale dans le flux Utile pour servir de référence ancêtre à un élément positionné en absolu Complexe à utiliser quand le nombre d élements croît 53/59

Positionnement flottant Positionnement flottant avec la propriété float : float : left right ; L élément enroule son voisin à gauche ou à droite Effet d habillage Largeur dictée par son contenu Annulation de l effet flottant : clear : left right both ; Propriété clear pour annuler l effet côte à côte imposé par un ou des éléments voisins http://openweb.eu.org/articles/initiation_float/ 54/59

Positionnements relatif et flottant http://www.pompage.net/img/html/page_modele10.html 55/59

Positionnement par tableau Possibilité de faire de la mise en page par tableau avec CSS : La déclaration display: table; indique que l élément est un tableau La déclaration display: table-cell; indique que l élément est une cellule Avantage de ces tableaux émulés : les cellules ont la même hauteur quelque soit le contenu http://css.mammouthland.net/mise-en-page-avec-display-table.php 56/59

Positionnement avec inline-block Il faut transformer les éléments concernés avec la propriété display (valeur inline-block) : Ils se positionnent les uns à côté des autres On peut les redimensionner Réglage de l alignement vertical des éléments inline-block : vertical-align : baseline top bottom middle X% Xpx ; Valeurs de l alignement vertical : avec l élément parent (défaut), en haut, en bas, au milieu, à X% ou X pixels de la baseline 57/59

En résumé Choisir le type de rendu d un élément (propriété display), le dimensionner (propriétés height et width) et le positionner (propriétés position, float) Ne pas abuser des balises div ou span Démo avec demo2.html (code source sur la page du LIF4) 58/59

Bilan Utilisation de CSS pour la mise en forme et la mise en page d une page Web : Utiliser une feuille de style externe Sélecteurs pour appliquer une mise en forme commune sur plusieurs pages Bien penser à la mise en page (flux, types de rendu, technique de positionnement) 59/59

Bilan Utilisation de CSS pour la mise en forme et la mise en page d une page Web : Utiliser une feuille de style externe Sélecteurs pour appliquer une mise en forme commune sur plusieurs pages Bien penser à la mise en page (flux, types de rendu, technique de positionnement) Prochain cours : le langage PHP 59/59