Successfully reported this slideshow.
Technologies et
Développement Web

Cours 3 – Les Feuilles de Styles (CSS)
Copyright © 2013, Mostefai Mohammed Amine
Technologies et Développement Web

Objectifs du module

2

 Faire un tour d’horizon du langage CSS, ses propriétés et ses...
Technologies et Développement Web

Plan du module

3

 Introduction

 Images

 Sélecteurs CSS

 Transitions et Transfo...
4

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 1 : Introduction

Copyright © 2013, ...
Technologies et Développement Web

Qu’est-ce que le CSS ?

 Un langage de règles permettant d’affecter un style à des
élé...
Technologies et Développement Web

Comment ça fonctionne ?

6

 Le comportement du style diffère selon l’affichage de l’é...
Technologies et Développement Web

Syntaxe

7

Déclaration

p {
border : 1px solid red;
font-family :Arial;
}

Section 1 :...
Technologies et Développement Web

Syntaxe - Suite

8

 Une déclaration peut s’appliquer à plusieurs sélecteurs s’ils son...
Technologies et Développement Web

Syntaxe, suite

9

Propriétés

Courrs 3 - Les Feuilles de Styles (CSS)

Valeurs

h1, h2...
Technologies et Développement Web

Syntaxe - Suite

10

 Les valeurs concernent quelle valeur affecter à un aspect (par
e...
Technologies et Développement Web

CSS intégré dans le fichier HTML

11

 Le CSS peut être intégré dans le HTML en utilis...
Technologies et Développement Web

CSS externe

12

 La feuille de style peut être dans un fichier externe dont l’extensi...
Technologies et Développement Web

La balise link

13

<link href="external.css" rel="stylesheet" type="text/css" />

Sect...
Technologies et Développement Web

CSS externe

14

 Il vaut mieux mettre les feuilles de style dans des fichiers externe...
Technologies et Développement Web

Exercice 1

Intégrez une feuille de style externe et un style interne à votre
page pers...
16

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 2 : Sélecteurs CSS

Copyright © 201...
Technologies et Développement Web

Introduction
 Les sélecteurs permettent de sélectionner des éléments ayant un
critère ...
Technologies et Développement Web

Sélecteurs CSS

18

Description

Exemple

Sélecteur universel

Sélectionne tous les élé...
Technologies et Développement Web

Sélecteurs CSS - Suite

19

Description

Exemple

Descendant
direct

Les éléments qui s...
Technologies et Développement Web

Sélecteurs avancés

20

Description

:link

Liens pas encore visités

:visited

Lien vi...
Technologies et Développement Web

Sélecteurs avancés

21

Description

Exemple

nth-child(n)

Nème descendant

n-child(2)...
Technologies et Développement Web

Cascade
 Si plusieurs règles s’appliquent un élément, les mécanismes suivants
sont app...
Technologies et Développement Web

23

Courrs 3 - Les Feuilles de Styles (CSS)

Exercice 1

Appliquez les sélecteurs sur v...
24

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 3 : Les Couleurs

Copyright © 2013,...
Technologies et Développement Web

Qu’est-ce qu’une couleur ?

25

 La propriété « color » définit la couleur de texte
 ...
Technologies et Développement Web

Valeur des couleurs

26

 On peut affecter une couleur par nom, par exemple « red » ou...
Technologies et Développement Web

Couleurs standard - Exemples

27

div#byName > span:nth-child(1) {
}

Courrs 3 - Les Fe...
Technologies et Développement Web

Couleurs CSS3 - HSL
 La fonction hsl (hue + saturation + lightness) définit une couleu...
Technologies et Développement Web

Couleurs HSL - Exemples

29

div#byHSL > span:nth-child(1) {
Courrs 3 - Les Feuilles de...
Technologies et Développement Web

Couleurs CSS3 - Transparence
 En plus des fonctions rgb et hsl, CSS3 définit deux nouv...
Technologies et Développement Web

Transparence : Exemples

31

Section 3 : Les Couleurs

Courrs 3 - Les Feuilles de Style...
Technologies et Développement Web

32

Courrs 3 - Les Feuilles de Styles (CSS)

Couleurs : démonstration

Section 3 : Les ...
Technologies et Développement Web

Couleurs : démonstration

En utilisant les différentes fonctions de couleur, faites viv...
34

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 4 : Le Texte

Copyright © 2013, Mos...
Technologies et Développement Web

Polices de caractère - Typologie
 Une police de caractère serif est une police avec de...
Technologies et Développement Web

Polices de caractère - Typologie
 Une police courbée (cursive) est une police qui ress...
Technologies et Développement Web

Polices de caractère - Typologie

37

Courrs 3 - Les Feuilles de Styles (CSS)

Police ...
Technologies et Développement Web

Polices de caractère - Typologie

Police cursive Monotype Corsiva
Police fantaisiste ...
Technologies et Développement Web

39

 Lorsqu’une page web utilise un texte écrit avec une police
données, il faut que c...
Technologies et Développement Web

40

 La propriété font-family spécifie la police de caractères. La police
doit être in...
Technologies et Développement Web

Font-Family

41

 Permet de spécifier plusieurs polices séparées par des virgules. Si
...
Technologies et Développement Web

Font-family Syntaxe

42

ul li:nth-child(1) {
}
ul li:nth-child(2) {
font-family: Tahom...
Technologies et Développement Web

43

Courrs 3 - Les Feuilles de Styles (CSS)

Font-family

Section 4 : Le Texte

Copyrig...
Technologies et Développement Web

Taille du texte

 La taille du texte est spécifiée en utilisant font-size. La taille e...
Technologies et Développement Web

Taille du texte

 La taille peut être spécifiée en (em) où « em » correspond à la tail...
Technologies et Développement Web

Font-size Syntaxe

46

ul li:nth-child(2) {
font-size: 14px;
Courrs 3 - Les Feuilles de...
Technologies et Développement Web

47

Courrs 3 - Les Feuilles de Styles (CSS)

Font-size

Section 4 : Le Texte

Copyright...
Technologies et Développement Web

La règle @font-face (CSS3)

 La balise @font-face permet de télécharger des polices qu...
Technologies et Développement Web

Formats de polices de caractères

49

 Le format « opentype embedded » (extension eot)...
Technologies et Développement Web

Formats de polices de caractères - suite

50

 Certes polices sont soumises à des lice...
Technologies et Développement Web

@font-face syntaxe

51

font-family: 'blackjack';
src: url('Fonts/black_jack-webfont.wo...
Technologies et Développement Web

52

Courrs 3 - Les Feuilles de Styles (CSS)

@font-face

Section 4 : Le Texte

Copyrigh...
Technologies et Développement Web

Autres propriétés de texte (textcss.html)
Description

font-weight

Permet de créer un ...
Technologies et Développement Web

Autres propriétés de texte (textcss.html) - suite
Description

text-align

Alignement d...
Technologies et Développement Web

55

Courrs 3 - Les Feuilles de Styles (CSS)

Autres propriétés texte

Section 4 : Le Te...
Technologies et Développement Web

Text-Shadow (css3)

56

 Syntaxe : texte-shadow dh dv couleur;
 dh : décalage horizon...
Technologies et Développement Web

Exercice

En utilisant les différentes propriétés de texte, restylez votre
page personn...
Technologies et Développement Web

Cours 3 – Les Feuilles de Styles (CSS)

58

Section 5 : Boîtes, Listes et
Tableaux

Cop...
Technologies et Développement Web

Taille des éléments

 Par défaut, un conteneur change sa taille pour s’adapter à son
c...
Technologies et Développement Web

Contrôler les dépassements

 Lorsque les tailles sont définies, il y a un risque que l...
Technologies et Développement Web

Bordures et Marges

61

Marge Extérieure (Margin)
Courrs 3 - Les Feuilles de Styles (CS...
Technologies et Développement Web

Bordures et Marges

 Un élément (boîte) a la largeur et le placement contrôlés par les...
Technologies et Développement Web

Bordures

63

Description

border-width

Spécifie la largeur de la bordure. Cette large...
Technologies et Développement Web

Bordure raccourci

64

div p:nth-child(3) {
Courrs 3 - Les Feuilles de Styles (CSS)

bo...
Technologies et Développement Web

Marges

65

 Les marges intérieures sont définies avec la propriété « padding »
 Les ...
Technologies et Développement Web

Affichage des éléments

66

 La valeur « collapse » de « visibility » s’applique aux t...
Technologies et Développement Web

Propriété display

67

Description

none

L’élément ne sera pas affiché

block

L’éléme...
Technologies et Développement Web

Bordures de type image (CSS3)
 CSS3 permet de définir de nouvelles bordures
 L’image ...
Technologies et Développement Web

Bordures de type image (CSS3), Syntaxe

69

border-image: url(Images/border.png) 30 30 ...
Technologies et Développement Web

Ombre Portée (box-shadow)

70

 La règle ajoutant l’ombre est « box-shadow »
 La synt...
Technologies et Développement Web

Ombre Portée (box-shadow), Suite

71

Description

d-horizontal

Décalage horizontal, l...
Technologies et Développement Web

Coins arrondis (CSS 3)

72

 La propriété « border-radius » permet d’arrondir avec une...
Technologies et Développement Web

Démonstration

73

Courrs 3 - Les Feuilles de Styles (CSS)

 Démonstrations dans « New...
Technologies et Développement Web

Style de liste

74

Description

list-style-type

Permet de définir le type alloué aux ...
Technologies et Développement Web

Styles de listes (Démonstration, Lists.html)

75

list-style: square;
Courrs 3 - Les Fe...
Technologies et Développement Web

Styler les tableaux

 Toutes les règles du CSS s’appliquent aux tableaux, notamment
« ...
Technologies et Développement Web

77

Courrs 3 - Les Feuilles de Styles (CSS)

Styler les tableaux (Voir tableaux.html)

...
Technologies et Développement Web

Styler les formulaires

78

 Utiliser les listes ordonnées pour une meilleure indexati...
Technologies et Développement Web

79

Courrs 3 - Les Feuilles de Styles (CSS)

Styler les formulaires (Démonstration, for...
80

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 6 : Disposition

Copyright © 2013, ...
Technologies et Développement Web

Introduction

 HTML est composé d’éléments en mode en ligne et d’autres en
mode bloc
...
Technologies et Développement Web

Disposition simple
 HTML est composé d’éléments en mode en ligne et d’autres en mode
b...
Technologies et Développement Web

Positionnement relatif
 Une position relative déplace un élément par rapport à sa posi...
Technologies et Développement Web

Positionnement absolu

 Lorsqu’une position absolue est attribuée à un élément, il est...
Technologies et Développement Web

Positionnement fixe

 La position fixe est semblable au positionnement absolu sauf que...
Technologies et Développement Web

86

Courrs 3 - Les Feuilles de Styles (CSS)

Positionnement

Section 6 : Disposition

C...
Technologies et Développement Web

Éléments flottants

 Un élément flottant est pris de sa position « normale » puis mis ...
Technologies et Développement Web

88

Courrs 3 - Les Feuilles de Styles (CSS)

Éléments flottants

Section 6 : Dispositio...
Technologies et Développement Web

Éléments flottants pour la disposition

89

 Les éléments flottants aident à mettre en...
Technologies et Développement Web

90

Courrs 3 - Les Feuilles de Styles (CSS)

Disposition (Dispositions.html)

Section 6...
Technologies et Développement Web

91

Courrs 3 - Les Feuilles de Styles (CSS)

Disposition (Album.html)

Section 6 : Disp...
Technologies et Développement Web

Boîte Flexible (Flexbox, CSS3)

92

 Nouveau mode de positionnement basé sur CSS3
Cour...
Technologies et Développement Web

93

 La version standard n’est pas encore compatible avec les
navigateurs récents
 Ut...
Technologies et Développement Web

Possibilité du flexbox (voir flex.html)

94

Description

flex-direction

Peut être row...
Technologies et Développement Web

Possibilité du flexbox - Suite

95

Description

align-items

Deuxième axe d’alignement...
96

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 7 : Les images

Copyright © 2013, M...
Technologies et Développement Web

Introduction

97

 Les propriétés « width » et « height » définissent la largeur et ha...
Technologies et Développement Web

Arrière plan de type image

 La propriété « background-image » permet de définir une i...
Technologies et Développement Web

Position de l’arrière plan

 La position de l’arrière plan est définie avec « backgrou...
Technologies et Développement Web

Alias

 Toutes les valeurs de l’arrière plan peuvent être utilisées avec l’alias
« bac...
Technologies et Développement Web

Dégradés CSS3

 CSS3 introduit la possibilité de définir des dégradés directement en
u...
Technologies et Développement Web

Dégradés linéaires

102

 x, y : direction (to left / to right, to top, to bottom, to ...
Technologies et Développement Web

Dégradés radiaux

 background : radial-gradient(ellipse at x, y, couleur1, couleur2,
c...
Technologies et Développement Web

104

Courrs 3 - Les Feuilles de Styles (CSS)

Images et dégradés

Section 7 : Les image...
Technologies et Développement Web

Cours 3 – Les Feuilles de Styles (CSS)

105

Section 8 : Les transitions et les
transfo...
Technologies et Développement Web

Introduction

 Les transitions CSS3 permettent aux développeurs d’effectuer des
animat...
Technologies et Développement Web

Propriétés

107

Description

transition-property

Propriétés à animer. Peut être « all...
Technologies et Développement Web

Propriétés animables

 La liste des propriétés animables est disponibles sur
http://ww...
Technologies et Développement Web

transition-timing-function

109

Description

ease

Rapide au début, lent à la fin

lin...
Technologies et Développement Web

110

 Les transitions peuvent être déclenchée par JavaScript simplement
en changeant u...
Technologies et Développement Web

Introduction aux transformations

 Les transformations sont des actions géométriques (...
Technologies et Développement Web

Transformations (transformations.html)
Description

none

Pas de transformation

transl...
Technologies et Développement Web

Transformations (transformations.html) - Suite
Description

rotate(a)

Où a est un angl...
Technologies et Développement Web

Introduction aux transformations

 Les transformations sont des actions géométriques (...
Technologies et Développement Web

Origine des transformations

115

 La propriété transform-origin définit l’origine de ...
Technologies et Développement Web

116

Courrs 3 - Les Feuilles de Styles (CSS)

Transitions et Transformations

Section 8...
Technologies et Développement Web

Cours 3 – Les Feuilles de Styles (CSS)

117

Section 9 : Animations (CSS3)

Copyright ©...
Technologies et Développement Web

Introduction

 Contrairement aux transitions qui animent une seule propriété sur
une p...
Technologies et Développement Web

Déclaration des cadres

119

@keyframes nom_de_l_animation
from

Courrs 3 - Les Feuille...
Technologies et Développement Web

Propriétés d’animation (Voir animations.html)
Description

animation-name

Nom de l’ani...
Technologies et Développement Web

121

Courrs 3 - Les Feuilles de Styles (CSS)

Animations

Section 9 : Animations

Copyr...
Technologies et Développement Web

Bibliographie

122

 Jon Duckett, HTML & CSS, Wiley Editions
 Tutoriaux Alsacréation
...
Prochain SlideShare
Chargement dans…5
×

Le Langage CSS

2 601 vues

Publié le

The CSS 3 Language

Publié dans : Technologie

Le Langage CSS

  1. 1. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
  2. 2. Technologies et Développement Web Objectifs du module 2  Faire un tour d’horizon du langage CSS, ses propriétés et ses règles  Appliquer CSS sur des pages web Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
  3. 3. Technologies et Développement Web Plan du module 3  Introduction  Images  Sélecteurs CSS  Transitions et Transformations  Couleur  Animations  Texte  Boîtes  Disposition Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
  4. 4. 4 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  5. 5. Technologies et Développement Web Qu’est-ce que le CSS ?  Un langage de règles permettant d’affecter un style à des éléments  Ce style peut être une couleur, une police de caractères, une position, …etc.  Les règles peuvent être déclarées à l’intérieur du fichier HTML ou à l’extérieur en utilisant un fichier CSS séparé Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 5
  6. 6. Technologies et Développement Web Comment ça fonctionne ? 6  Le comportement du style diffère selon l’affichage de l’élément est en mode bloc (p, h1,…) ou en mode en ligne (span, b,…)  Demo : inline-block.html Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Chaque élément est dans une « boîte invisible »
  7. 7. Technologies et Développement Web Syntaxe 7 Déclaration p { border : 1px solid red; font-family :Arial; } Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  8. 8. Technologies et Développement Web Syntaxe - Suite 8  Une déclaration peut s’appliquer à plusieurs sélecteurs s’ils sont séparés par des virgules  Les déclarations indiquent les styles à appliquer aux éléments appartenant au sélecteur Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Le sélecteur indique à quels éléments appliquer le style
  9. 9. Technologies et Développement Web Syntaxe, suite 9 Propriétés Courrs 3 - Les Feuilles de Styles (CSS) Valeurs h1, h2 { margin: 5px; font-family :Arial; color :Yellow; } Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  10. 10. Technologies et Développement Web Syntaxe - Suite 10  Les valeurs concernent quelle valeur affecter à un aspect (par exemple, bleu à couleur)  Exemple : voir syntaxe.html Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Les propriétés concernent l’aspect à styler : taille, couleur, police,…
  11. 11. Technologies et Développement Web CSS intégré dans le fichier HTML 11  Le CSS peut être intégré dans le HTML en utilisant la balise « style » Courrs 3 - Les Feuilles de Styles (CSS)  La balise a un attribut « type » qui dit être à « text/css » <style type="text/css"> p { font-family: 'Trebuchet MS‘; margin-bottom: 5px; } h1, h2 { color: blue; } </style> Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  12. 12. Technologies et Développement Web CSS externe 12  La feuille de style peut être dans un fichier externe dont l’extension est « css » Courrs 3 - Les Feuilles de Styles (CSS)  Le lien entre le fichier HTML se fait à travers la balise link  L’attribut « href » spécifie l’URL du fichier CSS  L’attribut « type » doit être à « text/css »  L’attribut « rel » doit être à « stylesheet » Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  13. 13. Technologies et Développement Web La balise link 13 <link href="external.css" rel="stylesheet" type="text/css" /> Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Voir « external.html »
  14. 14. Technologies et Développement Web CSS externe 14  Il vaut mieux mettre les feuilles de style dans des fichiers externes pour faciliter la maintenance Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Un fichier HTML peut référencer plusieurs fichiers CSS
  15. 15. Technologies et Développement Web Exercice 1 Intégrez une feuille de style externe et un style interne à votre page personnelle. Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 15
  16. 16. 16 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine
  17. 17. Technologies et Développement Web Introduction  Les sélecteurs permettent de sélectionner des éléments ayant un critère particulier : par exemple tous les éléments, appartenant à la même balise, même classe,…  Les sélecteurs CSS sont sensibles à la casse  Voir démonstrations dans selctors,html et advancedselectors.html Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 17
  18. 18. Technologies et Développement Web Sélecteurs CSS 18 Description Exemple Sélecteur universel Sélectionne tous les éléments. Utilise le symbole « * » * {} : tous les éléments Sélecteur de type Concerne tous les éléments appartenant à la même balise h2{} : tous les « h2 » p, span{} tous les paragraphes et les spans Sélecteurs de classe Concerne tous les éléments appartenant à une certaine classe (identifiés par l’attribut « classe ». Un élément HTML peut appartenir à plusieurs classes. span.nuance : tous les span dont la classe est « nuance » .couleurVerte{} : n’impote quel élément ayant la classe « couleurVerte » Sélecteur d’id Concerne un seul élément identifié par son attribut « id » span#spanId {} : le span qui a l’attribut id à « spanId » #unElement {} : n’importe quel élément ayant comme id « unElement » Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  19. 19. Technologies et Développement Web Sélecteurs CSS - Suite 19 Description Exemple Descendant direct Les éléments qui sont descendants directs d’un autre élément. Le symbole « > » est utilisé. La fonction nth-child spécifie quel élément choisir. div > p : paragraphes descendants directs d’une div div->a:nth-child(2) : le deuxième lien descendant direct d’un div div->a:nth-child(2n+1) : tous les 2nème + 1 descendants directs : 1er, 3ème, 5ème,…etc Descendants indirects Tous les éléments qui sont des enfants (pas forcément directs) d’autres éléments div span.spanInterne : les span avec la classe « spanInterne » qui sont des descendants d’un div Frère direct Un éléments adjacent à un autre élément et qui sont au même niveau (symbole +) h2+p : le paragraphe qui vient directement après un h2 Frère indirect Les éléments se trouvant au même niveau qu’un autre élément (symbole ~) li~li : un élément adjacent à un autre élément de liste. Exclut le premier. Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  20. 20. Technologies et Développement Web Sélecteurs avancés 20 Description :link Liens pas encore visités :visited Lien visité :hover Élément qui est survolé par la souris :focus Élément qui détient le focus input:focus : contrôle qui reçoit le focus [attribut=valeur] Sélectionne des élément ayant des attributs avec une certaine valeur a[target=_blank] {} : sélectionne les liens qui ouvrent dans une nouvelle fenêtre [attribut^=valeur] Sélectionne les éléments ayant un attribut commençant par une valeur a[href^=http] : sélectionne les liens ayant une URL commençant par HTTP [attribut*=valeur] Sélectionne les éléments ayant un attribut contenant la valeur a[href*=ynt] : sélectionne des liens qui contiennent « ynt » dans l’URL :only-child Sélectionne l’élément qui est l’unique descendant d’un autre élément div p:only-child : sélectionne le paragraphe unique à l’intérieur d’un div Section 2 : Sélecteurs CSS Exemple Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  21. 21. Technologies et Développement Web Sélecteurs avancés 21 Description Exemple nth-child(n) Nème descendant n-child(2) : deuxième descendant n-child(2n+1), tous les descendants impairs :first-child Premier enfant :first-line Première ligne d’un paragraphe :first-letter Première lettre d’un paragraphe :before Ajoute du contenu avant l’élément :after Ajoute du contenu après l’élément not Sélectionne les éléments qui ne sont pas un élément donné Section 2 : Sélecteurs CSS p > not(a) tous les éléments sauf les liens Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Sélecteur
  22. 22. Technologies et Développement Web Cascade  Si plusieurs règles s’appliquent un élément, les mécanismes suivants sont appliqués (voir cascade.html)  Si deux règles sont identiques, la dernière est prise  Si une règle est plus spécifique que l’autre, elle est prise sur l’autre. h1 est spécifique sur *. span#id est spcifique à span. Span,maClasse est spécifique à .maClasse.  Si on veut prioriser une règle, on la marque avec le mot clé « !important » Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 22
  23. 23. Technologies et Développement Web 23 Courrs 3 - Les Feuilles de Styles (CSS) Exercice 1 Appliquez les sélecteurs sur votre page personnelle. Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  24. 24. 24 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  25. 25. Technologies et Développement Web Qu’est-ce qu’une couleur ? 25  La propriété « color » définit la couleur de texte  La propriété « background-color » définit la couleur de fond  La propriété « border-color » définit la couleur de bordure  Pour choisir une couleur : http://www.w3schools.com/tags/ref_colorpicker.asp Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Un mix entre trois valeurs : rouge, vert et bleu
  26. 26. Technologies et Développement Web Valeur des couleurs 26  On peut affecter une couleur par nom, par exemple « red » ou « darkcyan ». CSS prend en charge 147 noms de couleurs.  Par valeur hexadécimale de RGB. Par exemple #20977a;  Par valeur hexadécimale raccourcie : #f60 qui est équivalent à #ff6600.  Par la fonction rgb qui demande trois paramètres : rouge, vert et bleu. Cette fonction demande trois paramètres allant de 0 à 255 Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Voir « couleurs.html »,
  27. 27. Technologies et Développement Web Couleurs standard - Exemples 27 div#byName > span:nth-child(1) { } Courrs 3 - Les Feuilles de Styles (CSS) border-color: red; div#byHex > span:nth-child(1) { background-color: #982222;} div#byShortHex > span:nth-child(1) { border-color: #bb1; } div#byRGB > span:nth-child(1) { color: rgb(11,11,11); } Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  28. 28. Technologies et Développement Web Couleurs CSS3 - HSL  La fonction hsl (hue + saturation + lightness) définit une couleur à partir de la teinte, saturation et brillance  La teinte est une valeur de 0 à 360, la roue de couleur. 120 correspond à vert et 240 à bleu.  La saturation est une valeur de 0 à 100%. 0% correspond à un niveau de gris. 100% correspond à la couleur d’origine.  La luminosité est une valeur de 0 à 100%. 0% correspond à noir, 100% correspond à blanc. Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 28
  29. 29. Technologies et Développement Web Couleurs HSL - Exemples 29 div#byHSL > span:nth-child(1) { Courrs 3 - Les Feuilles de Styles (CSS) background-color: hsl(120,30%,50%); color: hsl(0,100%,50%); border-color: hsl(0,100%,25%); } Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  30. 30. Technologies et Développement Web Couleurs CSS3 - Transparence  En plus des fonctions rgb et hsl, CSS3 définit deux nouvelles fonctions prenant un quatrième paramètres (alpha) qui sont rgba et hsla  Alpha peut être entre 0 et 1. 0 pour complètement transparent et 1 pour complètement opaque.  L’opacité peut être aussi définie en utilisant la propriété CSS3 « opacity » Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 30
  31. 31. Technologies et Développement Web Transparence : Exemples 31 Section 3 : Les Couleurs Courrs 3 - Les Feuilles de Styles (CSS) div#byRGBA > span:nth-child(2) { background-color: rgba(0,0,0,0.5); } div#byHSLA > span:nth-child(2) { background-color: hsla(250,75%,50%,0.5); } div#byOpacity > span:nth-child(2) { background-color: darkolivegreen; opacity : 0.5; } Copyright © 2013, Mostefai Mohammed Amine
  32. 32. Technologies et Développement Web 32 Courrs 3 - Les Feuilles de Styles (CSS) Couleurs : démonstration Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  33. 33. Technologies et Développement Web Couleurs : démonstration En utilisant les différentes fonctions de couleur, faites vivre votre site personnel en utilisant les couleurs Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 33
  34. 34. 34 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  35. 35. Technologies et Développement Web Polices de caractère - Typologie  Une police de caractère serif est une police avec des traits additionnels sur les caractères. Ces polices sont appréciées en lectures car très lisibles. Les petits traits supplémentaires sont appelés « serifs »  Les polices sans-serif sont des polices sans les traits supplémentaires. Elles sont très claires sur un dispositif comme l’écran.  Les polices monospace sont des polices où tous les caractères ont la même largeur. Une des utilisation des polices monospace est le code source Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 35
  36. 36. Technologies et Développement Web Polices de caractère - Typologie  Une police courbée (cursive) est une police qui ressemble à l’écriture de main  Une police fantaisiste (fantasy) est une police ayant un caractère décoratif Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 36
  37. 37. Technologies et Développement Web Polices de caractère - Typologie 37 Courrs 3 - Les Feuilles de Styles (CSS) Police serif cambria Police sans serif Arial Police mono-space consolas Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  38. 38. Technologies et Développement Web Polices de caractère - Typologie Police cursive Monotype Corsiva Police fantaisiste Haettenschweiler Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 38
  39. 39. Technologies et Développement Web 39  Lorsqu’une page web utilise un texte écrit avec une police données, il faut que cette police soit installé dans le PC du navigateur pour qu’elle soit correctement affichée  Certaines polices standard sont installés sur la plupart des ordinateurs / tablettes (times, georgia, times new roman, arial, verdana, helvetica,…)  Les navigateurs doivent supporter au moins une police générique par groupe (serif, sans serif, …)  CSS3 offre un moyen de contourner cette limitation Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Utilisation des polices de caractères dans les pages web
  40. 40. Technologies et Développement Web 40  La propriété font-family spécifie la police de caractères. La police doit être installée sur le poste du navigateur  CSS3 a introduit la règle font-face qui permet de télécharger une police si celle-ci n’est pas installé sur le poste du navigateur Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Application d’une police dans une page
  41. 41. Technologies et Développement Web Font-Family 41  Permet de spécifier plusieurs polices séparées par des virgules. Si une police n’existe pas, elle est remplacée par la suivante.  Peut inclure une police générique (par exemple serif). Cherche la police par défaut correspondante à cette police.  Voir la démonstration « fontfamily.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Spécifie la police de caractères à utiliser dans une page
  42. 42. Technologies et Développement Web Font-family Syntaxe 42 ul li:nth-child(1) { } ul li:nth-child(2) { font-family: Tahoma, Geneva, Verdana, sans-serif; } ul li:nth-child(3) { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) font-family: Verdana;
  43. 43. Technologies et Développement Web 43 Courrs 3 - Les Feuilles de Styles (CSS) Font-family Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  44. 44. Technologies et Développement Web Taille du texte  La taille du texte est spécifiée en utilisant font-size. La taille est faite en pixels.  L’affichage du texte dépend de la résolution. Moins la résolution est grande, plus les caractères sont grands.  La taille du texte peut être spécifiée en pourcentage (%) par rapport au parent. La taille par défaut dans les navigateurs est 100%.  La taille des caractères peut être spécifiée en points pour de meilleurs résultats sur des supports imprimés. Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 44
  45. 45. Technologies et Développement Web Taille du texte  La taille peut être spécifiée en (em) où « em » correspond à la taille en cours de la police sur le navigateur. Par défaut 1em équivaut à 16px.  1 em est équivalent à la largeur de la lettre « m »  La taille peut être spécifiée en utilisant les alias : « xx-small », « x-small », « small », « medium », « x-large », « xx-large », « smaller » et « larger »  L’alias inherit permet d’hériter du parent  Démonstration « fontsize.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 45
  46. 46. Technologies et Développement Web Font-size Syntaxe 46 ul li:nth-child(2) { font-size: 14px; Courrs 3 - Les Feuilles de Styles (CSS) } ul li:nth-child(3) { font-size: 14pt; } ul li:nth-child(4) { font-size: 150%; } ul li:nth-child(5) { font-size: 2em; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  47. 47. Technologies et Développement Web 47 Courrs 3 - Les Feuilles de Styles (CSS) Font-size Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  48. 48. Technologies et Développement Web La règle @font-face (CSS3)  La balise @font-face permet de télécharger des polices qui ne sont pas installées sur le poste  L’attribut src spécifie l’URL de la police de caractères  L’attribut format définit son format  L’attribut font-family définit son nom  Une fois une police spécifiée, elle peut être utilisée comme les autres polices installées Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 48
  49. 49. Technologies et Développement Web Formats de polices de caractères 49  Le format « opentype embedded » (extension eot) est proposé par Microsoft et pris en charge par ses navigateurs  Le format « web open format » (extension woff » est un format soutenu par Microsoft et la fondation Mozilla. Il est pris en charge par Chrome ainsi que les versions récentes de IE et Firefox.  Le format truetype (extension ttf) est promu par Apple et est compatible avec Chrome et Safari Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Il existe plusieurs formats de police
  50. 50. Technologies et Développement Web Formats de polices de caractères - suite 50  Certes polices sont soumises à des licences et ne peuvent être utilisées sans payer des commissions  Certains sites comme « http://www.fontsquirrel.com/ » proposent des polices gratuites sous tous les formats  Le format svg des polices est associé au format des images vectorielles. Il a été conçu pour le web et les applications mobiles.  Voir démonstration « fontface.html » Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Le format « opentype format » (extension otf) est une extension vectorielle de « trutype » et a été proposé par Microsoft
  51. 51. Technologies et Développement Web @font-face syntaxe 51 font-family: 'blackjack'; src: url('Fonts/black_jack-webfont.woff') format('woff'), url('Fonts/black_jack.ttf') format('truetype'), url('Fonts/black_jack-webfont.eot') format('opentype'); font-weight: normal; font-style: normal; } Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) @font-face {
  52. 52. Technologies et Développement Web 52 Courrs 3 - Les Feuilles de Styles (CSS) @font-face Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  53. 53. Technologies et Développement Web Autres propriétés de texte (textcss.html) Description font-weight Permet de créer un texte en gras. (bold, bolder ou normal) sont des valeurs possibles. font-style Style de la police, par exemple italique, oblique ou normal text-transform Transforme en majuscule (uppercase), minuscule (lowercase) ou première lettre majuscule (capitalize) text-decoration Souligné (underline), surligné (overline) ou avec tiret (linethrough) ou supprimer la ligne (none) line-height Hauteur de la ligne. Idéal pour centrer verticalement le texte. letter-spacing Espacement entre les lettres word-spacing Espacement entre les mots Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Règle 53
  54. 54. Technologies et Développement Web Autres propriétés de texte (textcss.html) - suite Description text-align Alignement du texte. Left, right, center ou justify vertical-align Alignement vertical des éléments en ligne text-indent Indentation du texte :first-letter Première lettre :first-line Première ligne Section 4 : Le Texte Courrs 3 - Les Feuilles de Styles (CSS) Règle 54 Copyright © 2013, Mostefai Mohammed Amine
  55. 55. Technologies et Développement Web 55 Courrs 3 - Les Feuilles de Styles (CSS) Autres propriétés texte Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  56. 56. Technologies et Développement Web Text-Shadow (css3) 56  Syntaxe : texte-shadow dh dv couleur;  dh : décalage horizontal, dv : décalage vertical, couleur : couleur de l’ombre  Démonstration : text-shadow.html Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Permet un effet d’ombre sur le texte
  57. 57. Technologies et Développement Web Exercice En utilisant les différentes propriétés de texte, restylez votre page personnelle. Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 57
  58. 58. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) 58 Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  59. 59. Technologies et Développement Web Taille des éléments  Par défaut, un conteneur change sa taille pour s’adapter à son contenu  Pour fixer la taille d’un élément, il faut affecter les propriétés width (largeur) et height (hauteur)  Les tailles peuvent être fixées en pixel, em ou pourcentage  Pour définir des limites de redimensionnement : min-height, minwidth, max-height, max-width Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 59
  60. 60. Technologies et Développement Web Contrôler les dépassements  Lorsque les tailles sont définies, il y a un risque que le contenu d’un élément dépasse sa taille  La propriété « overfow » contrôle ce dépassement  La valeur « hidden » permet de masquer les dépassements  La valeur « scroll » affiche des barres de défilements  Voir « WidthHeight.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 60
  61. 61. Technologies et Développement Web Bordures et Marges 61 Marge Extérieure (Margin) Courrs 3 - Les Feuilles de Styles (CSS) Bordure (Border) Marge Intérieure (Padding) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  62. 62. Technologies et Développement Web Bordures et Marges  Un élément (boîte) a la largeur et le placement contrôlés par les propriétés « border », « margin » et « padding » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 62
  63. 63. Technologies et Développement Web Bordures 63 Description border-width Spécifie la largeur de la bordure. Cette largeur peut être en pixels ou en alias (thin, medium ou thick). CSS permet aussi de spécifier des largeurs différentes aux quatre bordures en utilisant border-top-width, border-right-width border-bottom-width et border-leftwidth. Des raccourcis peuvent être utilisés : border-width : haut droite bas gauche. border-style Contrôle l’apparence de la bordure. Plusieurs styles sont possibles : solid (continu), dotted (pointillés), dashed, insert, ridge, none. border-color Spécifie la couleur de la bordure. Des couleurs différentes peuvent être spécifiées pour les quatre côtés. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Règle
  64. 64. Technologies et Développement Web Bordure raccourci 64 div p:nth-child(3) { Courrs 3 - Les Feuilles de Styles (CSS) border : 5px solid blue; } Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  65. 65. Technologies et Développement Web Marges 65  Les marges intérieures sont définies avec la propriété « padding »  Les marges extérieures sont définies avec la propriété « margin »  Les côtés peuvent avoir des marges différentes  La formule raccourcie peut être utilisée  Une marge « auto » permet de centrer horizontalement un élément à condition qu’il ait une largeur  Voir « BorderMaginPadding.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Les marges sont exprimées en pixel ou en pourcentage
  66. 66. Technologies et Développement Web Affichage des éléments 66  La valeur « collapse » de « visibility » s’applique aux tableaux et aux colonnes et permet de cacher une ligne ou une colonne sans affecter la disposition du tableau  Un élément peut aussi être caché en utilisant la propriété « display » avec la valeur « none ». La différence avec visibility est que la valeur « hidden » laisse l’espace de l’élément réservé tandis que la valeur « none » le cache et ne réserve pas sans espace.  Voir « DisplayVisibility.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  La propriété « visibility » permet d’afficher ou de cacher un élément. Elle peut avoir les valeur « visible » ou « hidden ».
  67. 67. Technologies et Développement Web Propriété display 67 Description none L’élément ne sera pas affiché block L’élément sera affiché en mode bloc Inline L’élément sera affiché en mode en ligne List-item Permet d’afficher les éléments sous forme de liste. table,table-column, tablerow et table-cell Affiche l’élément sous forme de tableau, ligne, colonne ou cellule Voir « Display.html » Inline-block Section 5 : Boîtes, Listes et Tableaux Combine en ligne et bloc Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
  68. 68. Technologies et Développement Web Bordures de type image (CSS3)  CSS3 permet de définir de nouvelles bordures  L’image spécifiée est découpée en neuf (09) portions qui sont utilisées pour les lignes et les coins.  La propriété « border-image-source » spécifie l’URL de l’image à utiliser comme bordure.  Les propriété « border-image-slice » et « border-image-width » déterminent comment découper cette image.  La propriété « border-image-stretch » détermine comment dessiner une bordure. « stretch » ajuste l’image à la taille, « repeat » répète l’image et « round » répète avec ajustement. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 68
  69. 69. Technologies et Développement Web Bordures de type image (CSS3), Syntaxe 69 border-image: url(Images/border.png) 30 30 stretch; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) border-image: url(Images/border.png) 30 30 round;
  70. 70. Technologies et Développement Web Ombre Portée (box-shadow) 70  La règle ajoutant l’ombre est « box-shadow »  La syntaxe est comme suit : Box-shadow: d-horizontal d-vertical flou diffusion couleur; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Permet d’ajouter une ombre à une boîte
  71. 71. Technologies et Développement Web Ombre Portée (box-shadow), Suite 71 Description d-horizontal Décalage horizontal, les valeurs négatives sont acceptées d-vertical Décalage vertical, les valeurs négatives sont acceptées flou Paramètre optionnel, le fou à apporter sur l’ombre diffusion Paramètre optionnel, la diffusion de l’ombre Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
  72. 72. Technologies et Développement Web Coins arrondis (CSS 3) 72  La propriété « border-radius » permet d’arrondir avec une valeur égale à tous les coins ou des valeurs différentes border-radius: 15px; border-radius: 15px 20px 35px 10px; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  CSS3 permet d’arrondir les coins d’une boîte
  73. 73. Technologies et Développement Web Démonstration 73 Courrs 3 - Les Feuilles de Styles (CSS)  Démonstrations dans « NewBorders.html » Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  74. 74. Technologies et Développement Web Style de liste 74 Description list-style-type Permet de définir le type alloué aux éléments de liste. Pour les listes non numérotées, la valeur peut être « circle », « square » ou « disc » par exemple. Pour les listes numérotées, les valeurs peuvent être « decimal », « decimal-leading-zero », « loweralpha », « upper-alpha », « lower-roman » ou « upper-roman ». La valeur « none » désactive la numérotation. list-style-image Permet de spécifier une image pour les éléments. list-style-position Spécifie si la puce ou le numéro est à l’intérieur ou à l’extérieur de l’élément list-style Raccourci des autres règles concernant les liste Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Valeur
  75. 75. Technologies et Développement Web Styles de listes (Démonstration, Lists.html) 75 list-style: square; Courrs 3 - Les Feuilles de Styles (CSS) list-style: square outside; Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  76. 76. Technologies et Développement Web Styler les tableaux  Toutes les règles du CSS s’appliquent aux tableaux, notamment « border » qui définit les bordures.  « border-spacing » permet de définir l’espacement des cellules.  « border-collapse » permet de définir le comportement des bordures qui se rejoignent. Une valeur « collapse » fusionne les bordures. Une valeur « separate » les affiche séparées. Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 76
  77. 77. Technologies et Développement Web 77 Courrs 3 - Les Feuilles de Styles (CSS) Styler les tableaux (Voir tableaux.html) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  78. 78. Technologies et Développement Web Styler les formulaires 78  Utiliser les listes ordonnées pour une meilleure indexation  La propriété CSS3 « box-sizing » permet de mieux contrôler la largeur des éléments Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Ne pas utiliser les tableaux.
  79. 79. Technologies et Développement Web 79 Courrs 3 - Les Feuilles de Styles (CSS) Styler les formulaires (Démonstration, formulaire.html) Section 5 : Boîtes, Listes et Tableaux Copyright © 2013, Mostefai Mohammed Amine
  80. 80. 80 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  81. 81. Technologies et Développement Web Introduction  HTML est composé d’éléments en mode en ligne et d’autres en mode bloc  Le regroupement en mode bloc permet de gérer la disposition des éléments  Les « div » ou les nouvelles balises HTML5 (nav, aside, header,..) sont utilisées pour la navigation Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 81
  82. 82. Technologies et Développement Web Disposition simple  HTML est composé d’éléments en mode en ligne et d’autres en mode bloc  Le regroupement en mode bloc permet de gérer la disposition des éléments  Les « div » ou les nouvelles balises HTML5 (nav, aside, header,..) sont utilisées pour la navigation  Voir « position.html »  Dans un scénario normal, chaque élément en mode bloc est affiché en dessous de l’autres  Si « width » ou « max-width » ne sont pas spécifiées , l’élément prend toute la largeur disponible Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 82
  83. 83. Technologies et Développement Web Positionnement relatif  Une position relative déplace un élément par rapport à sa position « normale »  Pour indiquer une position relative, utiliser la règle « position » avec la valeur « relative »  Pour bouger l’élément par rapport à sa position normale, utiliser « top », « left », « right » ou « bottom ». Les valeurs peuvent être en pixels, ems ou %.  Le déplacement relatif a parfois par conséquence, de mettre un élément sur un autre (le premier couvre le deuxième). Pour soigner l’effet, utiliser la propriété « z-index ».  Voir exemple 2 et 3 Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 83
  84. 84. Technologies et Développement Web Positionnement absolu  Lorsqu’une position absolue est attribuée à un élément, il est positionné par rapport aux coordonnées (top, left, right et bottom) et l’élément n’a plus aucun impact sur les autres. (Exemple 4)  Lorsqu’un élément est positionné d’une manière absolue à l’intérieur d’un autre élément en mode relatif, il est positionné par rapport à l’élément parent. (Exemple 5) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 84
  85. 85. Technologies et Développement Web Positionnement fixe  La position fixe est semblable au positionnement absolu sauf que l’élément garde toujours la même position lorsque l’utilisateur défile la page  Exemple 6 Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 85
  86. 86. Technologies et Développement Web 86 Courrs 3 - Les Feuilles de Styles (CSS) Positionnement Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  87. 87. Technologies et Développement Web Éléments flottants  Un élément flottant est pris de sa position « normale » puis mis à gauche ou à droite  Les autres éléments d’adaptent pour contourner l’élément flottant  Voir « floats.html » Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 87
  88. 88. Technologies et Développement Web 88 Courrs 3 - Les Feuilles de Styles (CSS) Éléments flottants Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  89. 89. Technologies et Développement Web Éléments flottants pour la disposition 89  Les éléments flottants aident à mettre en place des dispositions multi-colonnes  Voir « dispositions.html »  La règle « clear » permet de réinitialiser les flottements Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Les éléments flottants peuvent mettre des élément côte à côté
  90. 90. Technologies et Développement Web 90 Courrs 3 - Les Feuilles de Styles (CSS) Disposition (Dispositions.html) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  91. 91. Technologies et Développement Web 91 Courrs 3 - Les Feuilles de Styles (CSS) Disposition (Album.html) Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  92. 92. Technologies et Développement Web Boîte Flexible (Flexbox, CSS3) 92  Nouveau mode de positionnement basé sur CSS3 Courrs 3 - Les Feuilles de Styles (CSS)  Le parent devient un cadre d’affichage  Distribution des éléments enfants  Alignement horizontal et vertical  Gestion de l’espace disponible  Réorganisation des éléments Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  93. 93. Technologies et Développement Web 93  La version standard n’est pas encore compatible avec les navigateurs récents  Utiliser les préfixes (-webkit-) pour chrome, (-moz-) pour FireFox et –ms- pour IE Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Grille Flexible, Compatibilité des navigateurs
  94. 94. Technologies et Développement Web Possibilité du flexbox (voir flex.html) 94 Description flex-direction Peut être row ou column pour un affichage en colonnes ou un affichage en lignes. Les valeurs row-reverse et column-reverse affiche les valeurs inversées. flex-wrap Indique le comportement en cas de dépassement. nowrap indique que les éléments restent sur la même ligne. wrap et wrap-reverse provoquent une nouvelle ligne. flex-flow Regroupe les deux propriétés flex-direction et flex-wrap justify-content Alignement des élément par rapport à l’axe principal qui est le contenteur. La valeur flex-start les aligne au début, flex-end à la fin, center au centre, space-between espace les éléments et space-around les espace avec des marges à l’intérieur. Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  95. 95. Technologies et Développement Web Possibilité du flexbox - Suite 95 Description align-items Deuxième axe d’alignement des enfants, par rapport à eux même. Valeurs possibles : flex-end : flex (appliquée aux enfants) Indique le montant d’espace à utiliser dans l’espace restant. Une valeur de 2 signifie un double d’une valeur de 1, une valeur de 9 signifie le triple de 3, …etc. align-self Aligne un seul élément par rapport aux autres Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  96. 96. 96 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine
  97. 97. Technologies et Développement Web Introduction 97  Les propriétés « width » et « height » définissent la largeur et hauteur d’une image  Les propriétés « float » permet de faire flotter une image par rapport à un texte Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  Beaucoup de concepts CSS s’appliquent aux images
  98. 98. Technologies et Développement Web Arrière plan de type image  La propriété « background-image » permet de définir une image comme un arrière plan (voir images.html)  La propriété « background-repeat » permet de définir la répétition de l’arrière plan : horizontal (repeat-x) ou vertical (repeat-y). La valeur « norepeat » désactive la répétition.  La propriété « background-attachment » définit le comportement de l’arrière plan par rapport à la page. Une valeur de « fixed » fixe l’arrière plan tandis que « scroll » le fait défiler avec la page. Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 98
  99. 99. Technologies et Développement Web Position de l’arrière plan  La position de l’arrière plan est définie avec « backgroundposition »  Des valeurs comme « left top », « center center » ou « bottom right » sont acceptées  Les propriété « background-position-x » et « background-positiony » définissent le décalage de l’arrière plan. Les valeurs peuvent être en pixel ou en pourcentage. Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 99
  100. 100. Technologies et Développement Web Alias  Toutes les valeurs de l’arrière plan peuvent être utilisées avec l’alias « background »  Ordre : couleur  image  répétition  attachement  position background: red url("Images/bois.jpg") repeat-y scroll 0 0; Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 100
  101. 101. Technologies et Développement Web Dégradés CSS3  CSS3 introduit la possibilité de définir des dégradés directement en utilisant la propriété « background-image » sans passer par des images  CSS3 supporte les dégradés linéaires et les dégradés radiaux Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 101
  102. 102. Technologies et Développement Web Dégradés linéaires 102  x, y : direction (to left / to right, to top, to bottom, to right bottom)  Couleurs : couleurs constituant le dégradé Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS)  background : linear-gradient(x y, couleur1, couleur2, couleurN)
  103. 103. Technologies et Développement Web Dégradés radiaux  background : radial-gradient(ellipse at x, y, couleur1, couleur2, couleurN)  x, y : direction (top, center,…)  Couleurs : couleurs constituant le dégradé Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 103
  104. 104. Technologies et Développement Web 104 Courrs 3 - Les Feuilles de Styles (CSS) Images et dégradés Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine
  105. 105. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) 105 Section 8 : Les transitions et les transformations (CSS3) Copyright © 2013, Mostefai Mohammed Amine
  106. 106. Technologies et Développement Web Introduction  Les transitions CSS3 permettent aux développeurs d’effectuer des animations simples sans passer par JavaScript  Le support des transitions reste limité aux navigateurs récents  Le principe des transitions est de changer la valeur une propriété CSS d’une manière douce et progressive ce qui donne l’effet d’une animation  Exemples : changer de couleur, de dimension, …etc. Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 106
  107. 107. Technologies et Développement Web Propriétés 107 Description transition-property Propriétés à animer. Peut être « all » pour toutes les propriétés animables ou « none » pour aucune. Peut aussi contenir plusieurs noms de propriétés à condition que ces propriétés soient animables. transition-duration Durée de la transition. Spécifiée en secondes (s) ou millisecondes (ms). transition-timing-function Fonction d’interpolation, gère la vitesse de l’animation. transition-delay Retard ou avance de la transition (en secondes ou millisecondes) transition Un alias pour les paramètres de transition Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  108. 108. Technologies et Développement Web Propriétés animables  La liste des propriétés animables est disponibles sur http://www.w3.org/TR/css3-transitions/#properties-from-css Pour qu’une propriété soit animable, le navigateur doit être capable de faire des interpolations dessus. Par exemple les couleurs et les dimensions sont animables.  Voir transitions.html Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 108
  109. 109. Technologies et Développement Web transition-timing-function 109 Description ease Rapide au début, lent à la fin linear Vitesse constante ease-in Lent au début, rapide à la fin ease-in-out Lent au début et à la fin steps Exécute l’animation en plusieurs étapes discrètes. Par exemple steps (5,start) ou steps (3,end) début ou fin. Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété
  110. 110. Technologies et Développement Web 110  Les transitions peuvent être déclenchée par JavaScript simplement en changeant une propriété sur laquelle a été paramétrée une transition  Le changement d’une propriété CSS se fait via la propriété « style » d’un élément Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Déclenchement des transitions par JavaScript
  111. 111. Technologies et Développement Web Introduction aux transformations  Les transformations sont des actions géométriques (tels quel la rotation ou la translation) qui sont effectués sur des éléments HTML  Il existe deux types de transformations : en deux dimensions et en 3 dimensions  Les transformations 2D sont plus largement supportées que les transformations 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 111
  112. 112. Technologies et Développement Web Transformations (transformations.html) Description none Pas de transformation translate(x,y) Translation deux dimensions translate3d(x,y,z) Translation 3d translateX(x), translateY(y) et / ou translateZ(z) Translation sur l’un des trois axes scale(x,y) Mise à l’échelle. Une valeur 1 correspond à la même taille, 0.5 à la moitié et 2 double scale3d(x,y,z) Mise à l’échelle 3 dimensions scaleX(x), scaleY(y) ou scaleZ(z) Mise à l’échelle sur l’un des trois axes Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 112
  113. 113. Technologies et Développement Web Transformations (transformations.html) - Suite Description rotate(a) Où a est un angle, rotation d’un élément rotate3d(x,y,z,a) Rotation 3 dimensions rotateX(x), rotateY(y) ou rotateZ(z) Rotation sur l’un des trois angles skew(a,b) Où a et b sont des angles. Inclinaison bidimensionnelle de l’élément skewX(x) ou skewY(y) Inclinaison sur l’un des deux axes matrix(n1..n6) Transformation sur matrice 2d matrix3d(n1..n16) Transformation matrice 3d perspective(n) Perspective 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 113
  114. 114. Technologies et Développement Web Introduction aux transformations  Les transformations sont des actions géométriques (tels quel la rotation ou la translation) qui sont effectués sur des éléments HTML  Il existe deux types de transformations : en deux dimensions et en 3 dimensions  Les transformations 2D sont plus largement supportées que les transformations 3d Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 114
  115. 115. Technologies et Développement Web Origine des transformations 115  La propriété transform-origin définit l’origine de la transformation Courrs 3 - Les Feuilles de Styles (CSS)  Syntaxe : tansform-origin : axe-x axe-y axe-z  Par défaut, les valeurs sont 50% 50% 0 Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine
  116. 116. Technologies et Développement Web 116 Courrs 3 - Les Feuilles de Styles (CSS) Transitions et Transformations Section 8 : Transitions et Transformations Copyright © 2013, Mostefai Mohammed Amine
  117. 117. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) 117 Section 9 : Animations (CSS3) Copyright © 2013, Mostefai Mohammed Amine
  118. 118. Technologies et Développement Web Introduction  Contrairement aux transitions qui animent une seule propriété sur une période, les animations sont constituées de plusieurs cadres et chaque cadre anime une ou plusieurs propriétés  Une animation contient au moins deux cadres  Les navigateurs utilisent le GPU pour les animations Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) 118
  119. 119. Technologies et Développement Web Déclaration des cadres 119 @keyframes nom_de_l_animation from Courrs 3 - Les Feuilles de Styles (CSS) { { propriété_à_animer: valeur_initiale; } 50% { propriété_à_animer: valeur_intermédiaire; } to { propriété_à_animer: valeur_finale; } } Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine
  120. 120. Technologies et Développement Web Propriétés d’animation (Voir animations.html) Description animation-name Nom de l’animation animation-duration Durée de l’animation animation-iteration-count Nombre d’itérations. « infinite » signifie une animation infinie. animation-timing-function Fonction d’interpolation utilisée pour l’animation. Les mêmes que celles des transitions. animation-direction Direction de l’animation : normal, alternate, reverse ou alternate-reverse animation-play-state Statut de l’animation (running, paused) animation-delay Délai de lecture Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine Courrs 3 - Les Feuilles de Styles (CSS) Propriété 120
  121. 121. Technologies et Développement Web 121 Courrs 3 - Les Feuilles de Styles (CSS) Animations Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine
  122. 122. Technologies et Développement Web Bibliographie 122  Jon Duckett, HTML & CSS, Wiley Editions  Tutoriaux Alsacréation  « Introduction aux animations CSS3 », David Rousset Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine

×