THÉORIE ET PRATIQUE DU WEB

THÉORIE ET PRATIQUE
DU WEB
Mohamed Sellami
http://perso.isep.fr/msellami/
[email protected]
Théorie et pratique du Web
Sources
•  Diapositives (fortement) inspirées par :
•  http://pierre-giraud.com/html-css/cours-complet/
2
Théorie et pratique du Web
LE LANGAGE CSS
Mise en forme de textes
3
Théorie et pratique du Web
4
La propriété CSS font-family
•  Définir la police de notre texte : La propriété CSS font-family
•  Les navigateurs ne supportent pas tous les mêmes polices :
•  Nous indiquerons toujours plusieurs noms de police à utiliser en séparant
chaque valeur par une virgule.
•  Ainsi, le navigateur va lire les polices renseignées dans l’ordre et utiliser la
première qu’il supporte.
•  Si un nom de police contient des espaces, vous devrez le mettre entre guillemets
ou apostrophes.
Théorie et pratique du Web
5
Exemple
•  Exemple :
Fichier HTML
Fichier CSS
Résultat
Théorie et pratique du Web
6
Web safe fonts et familles génériques
•  Les web safe fonts : ensemble de polices lues par tous les
navigateurs.
•  Les familles génériques : regroupent un ensemble de polices ayant
une allure similaire.
è On indique toujours une police appartenant aux web safe fonts
ainsi que la famille générique associée.
Famille générique
Police
Serif
Times New Roman, Georgia
Sans-serif
Arial, Verdana
Monospace
Courier New, Lucida Console
Cursive
Comic sans MS
•  Liste de Web safe fonts : http://www.cssfontstack.com
Théorie et pratique du Web
7
Intégration des Google Fonts
•  Google Fonts : liste de polices d’écriture développées par Google.
•  Utilisation :
1.  Choisir la police sur https://fonts.google.com,
2.  Faire un lien en HTML vers la police Google désirée, et
3.  Utiliser la police comme valeur de la propriété font-family en CSS.
•  Avantages :
•  ne dépendent d’aucun navigateur,
•  une très longue liste de polices.
Théorie et pratique du Web
8
Intégration des Google Fonts -Exemple
https://fonts.google.com/specimen/Open+Sans
Théorie et pratique du Web
LE LANGAGE CSS
LES PROPRIETES CSS DE TYPE FONT
9
Théorie et pratique du Web
10
Les propriétés de type font
•  Les propriétés CSS de type font- permettent de modifier
l’apparence de nos textes.
•  Les propriétés de type font- les plus utilisées :
•  font-size pour modifier la taille de nos textes ;
•  font-style pour modifier le style de nos textes ;
•  font-weight pour modifier le poids de nos textes.
Théorie et pratique du Web
11
La propriété CSS font-size
•  La propriété font-size permet de modifier la taille de la police.
•  Deux types de valeurs acceptés :
•  des tailles absolues ou fixes exprimées en px (pixels) ou en pt (points),
•  La taille est fixée : elle ne bougera jamais.
•  des tailles relatives ou variables exprimées en % (pourcentage) ou en em.
•  La taille va s’adapter relativement aux préférences enregistrées dans le navigateur
ou par rapport à la taille d’un élément parent.
Théorie et pratique du Web
La propriété CSS font-size - Exemple
Fichier HTML
Résultat
Fichier CSS
12
Théorie et pratique du Web
13
La propriété CSS font-style
•  La propriété CSS font-style permet de forcer le style de la police.
•  Quatre valeurs acceptés :
•  normal (par défaut) ;
•  italic (italique) ;
•  oblique (penché) ;
•  inherit (l’élément ciblé hérite du style de son élément parent).
Théorie et pratique du Web
14
La propriété CSS font-style - Exemple
Fichier HTML
Résultat
Fichier CSS
Théorie et pratique du Web
15
La propriété CSS font-weight
•  La propriété CSS font-weight permet de définir le poids d’une
police (son épaisseur).
•  Les valeurs acceptées :
•  normal (valeur par défaut) ;
•  lighter (la police sera plus fine) ;
•  bold (la police sera plus épaisse) ;
•  bolder (la police sera très épaisse) ;
•  une centaine entre 100 (police très fine) et 900 (police très épaisse). 400
correspond à la valeur « normal » et 700 à « bold » ;
•  inherit (l’élément hérite du style de son parent) ;
•  initial (définit la propriété sur sa valeur d’origine).
Théorie et pratique du Web
16
La propriété CSS font-weight - Exemple
Fichier HTML
Résultat
Fichier CSS
Théorie et pratique du Web
LE LANGAGE CSS
COULEUR ET OPACITE D’UN TEXTE
17
Théorie et pratique du Web
18
La couleur en CSS
•  La propriété color permet de changer la couleur d’un texte .
•  color accepte différents types de valeurs :
•  Un nom de couleur (red, blue, etc.) ;
•  Une valeur hexadécimale (#AA8811, etc.) ;
•  Une valeur RGB ou RGBa.
Théorie et pratique du Web
19
Les noms de couleurs
(+) La façon la plus simple : le nom d’une couleur (en anglais) en
valeur de la propriété color.
(-) Limités dans le choix des couleurs.
Théorie et pratique du Web
20
Les valeurs hexadécimales
(+) 16 millions de nuances de couleurs.
•  la propriété CSS color va accepter des valeurs hexadécimales :
•  Commençant par un #
•  Ensuite trois couple de valeurs entre 00 et FF
•  Sélecteur de couleur : http://htmlcolorcodes.com/fr/selecteur-de-couleur/
Théorie et pratique du Web
21
Les valeurs RGB
•  RGB signifie « Red Green Blue » (rouge, vert, bleu)
•  (+) 16 millions de nuances de couleurs.
•  (+) permet de gérer l’opacité des couleurs
•  Pour créer une couleur RGB, nous indiquons trois intensités de
rouge, de vert et de bleu :
•  L’intensité est entre 0 et 255, et non pas entre 00 et FF.
•  Sélecteur de couleur : http://htmlcolorcodes.com/fr/selecteur-de-couleur/
Théorie et pratique du Web
22
L’opacité des textes
•  Deux manières de gérer l’opacité (transparences) des textes:
•  La propriété CSS opacity : une valeur entre 0 (texte totalement
transparent) et 1 (texte totalement opaque).
•  Indiquer une quatrième valeur définissant l’opacité dans nos notations RGB
(RGBa) entre 0 et 1.
Théorie et pratique du Web
LE LANGAGE CSS
Les propriétés CSS de type « text- »
23
Théorie et pratique du Web
24
Les propriétés CSS de type « text- »
•  text-align : définir l’alignement de notre texte
•  Cinq valeurs possibles : left, right, center, justify, et inherit.
•  text-transform : transformer un texte en majuscules ou en
minuscules
•  Cinq valeurs possible : lowercase, uppercase, capitalize,
inherit, none.
•  text-decoration : définir des décorations pour notre texte.
•  Six valeurs possible : underline, overline, line-through,
inherit, initial, et none.
•  Cas d’utilisation : enlever le soulignement automatique d’un lien.
Théorie et pratique du Web
25
Les propriétés CSS de type « text- »
•  text-indent : gérer l’indentation d’un texte
•  Accepte des valeurs absolues (en px par exemple), des valeurs relatives (en %
ou em par exemple), et des valeurs négatives.
•  text-shadow : créer des ombres autour de nos textes
•  Quatre valeurs à indiquer :
1.  La projection horizontale de l’ombre (en px) ;
2.  La projection verticale de l’ombre (en px) ;
3.  Le rayon de propagation de l’ombre (le « radius », en px) ;
4.  La couleur de l’ombre.
Théorie et pratique du Web
LE LANGAGE CSS
Le modèle des boites
26
Théorie et pratique du Web
27
Le modèle des boites en CSS
•  Le modèle des boîtes est un concept essentiel et central pour la
mise en page d’une page web.
« Tout élément HTML (block ou inline) peut être considéré
comme une boîte rectangulaire »
•  Autour de la « boîte » contenant l’élément en soi, on va pouvoir
dessiner d'autres boîtes contenant la marge intérieure (padding),
les bordures et la marge extérieure de l'élément.
Théorie et pratique du Web
28
Le modèle des boites en CSS
•  La boîte centrale représente le contenu de l’élément.
•  La deuxième boîte la marge intérieure de l’élément (padding).
•  La troisième boîte la bordure de l’élément.
•  La dernière boîte la marge extérieure de l’élément.
Théorie et pratique du Web
29
Le modèle des boites en CSS - Exemple
Théorie et pratique du Web
30
Hauteur et largeur en CSS
•  Tout élément HTML possède une largeur et une hauteur.
•  La hauteur par défaut d’un élément HTML est déterminée par son contenu.
•  La largeur d’un élément, est déterminée par son type :
•  les éléments de type block occuperont par défaut tout l’espace disponible.
•  Les éléments de type inline, n’occuperont que la largeur nécessaire à leur contenu.
•  Pour modifier la hauteur d’un élément : la propriété height.
•  Pour modifier la largeur d’un élément : la propriété width.
•  Ces propriétés peuvent prendre des valeurs :
•  absolues,
•  relatives (utiles dans le cas d’un site responsive), ou
•  la valeur « auto » (calculée automatiquement par le navigateur).
Théorie et pratique du Web
31
Hauteur, largeur et modèle des boîtes
Important
Vous ne définissez que la hauteur et la largeur du contenu de
l’élément en soi. Les tailles des marges intérieures, extérieures et des
bordures viendront s’ajouter à cette hauteur et à cette largeur afin
de former la taille totale de l’élément.
height
width
Théorie et pratique du Web
32
Hauteur, largeur et modèle des boîtes
•  Exemple de mauvaise utilisation :
Testez le code :
https://jsfiddle.net/mohamed_sellami/gpa8q2f7/
Théorie et pratique du Web
33
Les bordures en CSS
•  Définir des bordures de couleurs, épaisseurs ou types différents
autour de nos éléments HTML.
•  En utilisant border-style, border-width et bordercolor
•  En utilisant la notation courte border.
Théorie et pratique du Web
Les styles de bordures
border-style
34
Théorie et pratique du Web
35
Bordures haute, droite, basse et gauche
•  Il est possible de définir des bordures différentes au dessus, à
droite, en dessous et à gauche de nos éléments HTML.
•  Ajouter les mots clefs top (haut), right (droit), bottom (bas) et left
(gauche) dans le nom de nos propriétés.
Testez le code :
https://jsfiddle.net/mohamed_sellami/n7ya0v0o/1/
Théorie et pratique du Web
36
Les bordures arrondies
•  Pour créer des bordures arrondies : la propriété border-radius.
•  prend une valeur en pixels qui va correspondre à la valeur du rayon de la
bordure.
•  Exemples :
Théorie et pratique du Web
37
Les marges en CSS
•  Deux types : intérieures (le padding) et extérieures (le margin)
•  padding, padding-top, padding-right, padding-bottom et
padding-left.
•  margin, margin-top, margin-right, margin-bottom et
margin-left.
Théorie et pratique du Web
38
Les ombres des boites
•  Pour créer des ombres autour de nos boîtes : box-shadow.
•  La propriété prend quatre valeurs dans l’ordre suivant :
1.  Le déplacement horizontal (vers la droite ou la gauche) de l’ombre ;
2.  Le déplacement vertical (vers le bas ou le haut) de l’ombre ;
3.  Le rayon de propagation de l’ombre ;
4.  La couleur de l’ombre.
Théorie et pratique du Web
39
La propriété CSS display
•  Par défaut, les éléments HTML s’affichent soit sous forme de «
bloc », soit « en ligne ».
•  Eléments block : <p>, <div>,<h1>, etc.
•  Eléments inline : <strong>, <span>, etc.
•  La propriété display permet de maîtriser la façon dont un
élément va être affiché, et ainsi de gérer la mise en page de nos
éléments.
•  Les valeurs possibles : inline, block, inline-block, et
none
Théorie et pratique du Web
40
Display : inline
•  display: inline
•  l’élément ciblé va se comporter comme un élément de type inline et donc
n’occuper que la largeur qui lui est strictement nécessaire.
•  Exemple :
Théorie et pratique du Web
41
Display : block
•  display: block
•  l‘élément ciblé va se comporter comme un éléments de type block et ainsi
prendre toute la largeur disponible.
•  Exemple:
Théorie et pratique du Web
42
Display : inline-block
•  display : inline-block
•  l’élément ciblé va être de type inline, tandis que ce qu’il contient (« l’intérieur
de la boîte ») va être considéré comme étant de type block.
•  Exemple :
Théorie et pratique du Web
Display : none
•  display : none
•  l’élément ciblé ne sera pas affiché
•  Utile pour faire du responsive design
43
Théorie et pratique du Web
44
La propriété CSS position
•  La propriété position permet de gérer le positionnement des
éléments HTML
•  de façon absolue,
•  relativement par rapport à d’autres éléments HTML, ou
•  par rapport à leur place d’origine.
•  Quatre valeurs possibles : static , relative , fixed , et
absolute :
•  position est utilisée conjointement avec les propriétés top, right,
bottom et left afin de positionner précisément les éléments.
•  Ces quatre propriétés vont prennent des valeurs en pixels (px)
Théorie et pratique du Web
Position : static
•  position: static
•  Positionnement par défaut des éléments HTML dans une page.
•  Pas affecté par les propriétés top, right, bottom et left.
45
Théorie et pratique du Web
46
Position : relative
•  position: relative
•  Positionnement relative par rapport à la position par défaut de l’élément.
Théorie et pratique du Web
47
Position : fixed
•  position: fixed
•  Positionnement « fixe ». L’élément HTML va toujours rester à la même place,
même si l’on descend dans la page.
•  Utile pour conserver un un menu constamment visible par
exemple.
Testez le code :
https://jsfiddle.net/mohamed_sellami/okdvuj1r/
Théorie et pratique du Web
48
Position : absolute
•  position: absolute
•  Permet de positionner un élément de façon relative par rapport à son parent
le plus proche auquel on a appliqué un positionnement (relative, fixed ou
absolute).
•  Si l’élément ne possède pas d’élément parent positionné spécifiquement,
celui-ci va se positionner par rapport à la page entière.
Testez le code :
https://jsfiddle.net/mohamed_sellami/67xzb18b/
Théorie et pratique du Web
49
Le z-index
•  En utilisant la propriété position, des éléments peuvent se
chevaucher.
•  La propriété z-index permet de choisir quel élément va apparaître
au dessus de quel.
•  La propriété z-index prend un nombre en valeur : un nombre plus
grand positionnera un élément devant un autre ayant un z-index
plus petit.
•  Exemple d’utilisation : un menu déroulant (afin que les rubriques s’affichent
devant le reste de la page)
Testez le code :
https://jsfiddle.net/mohamed_sellami/q6rmmeud/
Théorie et pratique du Web
50
Alignement des éléments HTML
•  Centrer horizontalement avec la propriété margin
•  une valeur pour les marges haute et basse (au choix)
•  la valeur auto pour les marges gauche et droite
•  L’élément à centrer doit être de type block et posséder une largeur définie
pour pouvoir être centré correctement.
Testez le code :
https://jsfiddle.net/mohamed_sellami/5g0anzya/2/
Théorie et pratique du Web
51
Alignement des éléments HTML
•  Aligner horizontalement avec la propriété position
•  Utiliser la valeur absolute de la propriété position.
•  Utiliser les propriétés left et right
Testez le code :
https://jsfiddle.net/mohamed_sellami/5rb8f40w/
Théorie et pratique du Web
Références
•  Une liste complète de propriétés CSS avec des exemples:
•  http://www.w3schools.com/cssref/
52