SlideShare une entreprise Scribd logo
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
règles
 Appliquer CSS sur des pages web

Cours 3 – Les Feuilles de Styles (CSS)

Copyright © 2013, Mostefai Mohammed Amine
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

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 1 : Introduction

Copyright © 2013, Mostefai Mohammed Amine
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
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 »
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
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
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
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,…
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
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
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 »
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
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

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 2 : Sélecteurs CSS

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
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
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
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
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

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 3 : Les Couleurs

Copyright © 2013, Mostefai Mohammed Amine
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
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 »,
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
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
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
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
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
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
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

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 4 : Le Texte

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
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
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
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
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
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;
Technologies et Développement Web

43

Courrs 3 - Les Feuilles de Styles (CSS)

Font-family

Section 4 : Le Texte

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
Technologies et Développement Web

47

Courrs 3 - Les Feuilles de Styles (CSS)

Font-size

Section 4 : Le Texte

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
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 {
Technologies et Développement Web

52

Courrs 3 - Les Feuilles de Styles (CSS)

@font-face

Section 4 : Le Texte

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
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
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
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
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
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
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
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
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
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
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
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 ».
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
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
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;
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
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
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
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
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
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
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
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
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.
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

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 6 : Disposition

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
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
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
Technologies et Développement Web

86

Courrs 3 - Les Feuilles de Styles (CSS)

Positionnement

Section 6 : Disposition

Copyright © 2013, Mostefai Mohammed Amine
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
Technologies et Développement Web

88

Courrs 3 - Les Feuilles de Styles (CSS)

Éléments flottants

Section 6 : Disposition

Copyright © 2013, Mostefai Mohammed Amine
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é
Technologies et Développement Web

90

Courrs 3 - Les Feuilles de Styles (CSS)

Disposition (Dispositions.html)

Section 6 : Disposition

Copyright © 2013, Mostefai Mohammed Amine
Technologies et Développement Web

91

Courrs 3 - Les Feuilles de Styles (CSS)

Disposition (Album.html)

Section 6 : Disposition

Copyright © 2013, Mostefai Mohammed Amine
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
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
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é
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

Cours 3 – Les Feuilles de Styles (CSS)

Technologies et Développement Web

Section 7 : Les images

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
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
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
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)
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
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
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
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
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é
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
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é
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
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
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
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
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
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
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
Technologies et Développement Web

Cours 3 – Les Feuilles de Styles (CSS)

117

Section 9 : Animations (CSS3)

Copyright © 2013, Mostefai Mohammed Amine
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
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
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
Technologies et Développement Web

121

Courrs 3 - Les Feuilles de Styles (CSS)

Animations

Section 9 : Animations

Copyright © 2013, Mostefai Mohammed Amine
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

Contenu connexe

Tendances

Bootstrap
BootstrapBootstrap
Bootstrap
Romdhani Asma
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
Lilia Sfaxi
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Cours partie1 elgarrai zineb
Cours partie1 elgarrai zinebCours partie1 elgarrai zineb
Cours partie1 elgarrai zineb
Zineb ELGARRAI
 
Alphorm.com Formation Odoo Technique : Installer et Configurer
Alphorm.com Formation Odoo Technique : Installer et ConfigurerAlphorm.com Formation Odoo Technique : Installer et Configurer
Alphorm.com Formation Odoo Technique : Installer et Configurer
Alphorm
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
Youness Boukouchi
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
Abdoulaye Dieng
 
Tp1 - Initiation à Java-Eclipse
Tp1 - Initiation à Java-EclipseTp1 - Initiation à Java-Eclipse
Tp1 - Initiation à Java-Eclipse
Lilia Sfaxi
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
Axel Chalon
 
Formation python 3
Formation python 3Formation python 3
Formation python 3
WajihBaghdadi1
 
Cours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapterCours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapter
ENSET, Université Hassan II Casablanca
 
Symfony 2 : chapitre 1 - Présentation Générale
Symfony 2 : chapitre 1 - Présentation GénéraleSymfony 2 : chapitre 1 - Présentation Générale
Symfony 2 : chapitre 1 - Présentation Générale
Abdelkader Rhouati
 
JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java
Youness Boukouchi
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
ECAM Brussels Engineering School
 
Cours complet excel détaillé
Cours complet excel détailléCours complet excel détaillé
Cours complet excel détailléPaul Kamga
 
Properties and indexers in C#
Properties and indexers in C#Properties and indexers in C#
Properties and indexers in C#
Hemant Chetwani
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
Lilia Sfaxi
 

Tendances (20)

Bootstrap
BootstrapBootstrap
Bootstrap
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Cours partie1 elgarrai zineb
Cours partie1 elgarrai zinebCours partie1 elgarrai zineb
Cours partie1 elgarrai zineb
 
Alphorm.com Formation Odoo Technique : Installer et Configurer
Alphorm.com Formation Odoo Technique : Installer et ConfigurerAlphorm.com Formation Odoo Technique : Installer et Configurer
Alphorm.com Formation Odoo Technique : Installer et Configurer
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Tp1 - Initiation à Java-Eclipse
Tp1 - Initiation à Java-EclipseTp1 - Initiation à Java-Eclipse
Tp1 - Initiation à Java-Eclipse
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Formation python 3
Formation python 3Formation python 3
Formation python 3
 
Cours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapterCours design pattern m youssfi partie 5 adapter
Cours design pattern m youssfi partie 5 adapter
 
Symfony 2 : chapitre 1 - Présentation Générale
Symfony 2 : chapitre 1 - Présentation GénéraleSymfony 2 : chapitre 1 - Présentation Générale
Symfony 2 : chapitre 1 - Présentation Générale
 
JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java JDBC: Gestion des bases de données en Java
JDBC: Gestion des bases de données en Java
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Cours complet excel détaillé
Cours complet excel détailléCours complet excel détaillé
Cours complet excel détaillé
 
Properties and indexers in C#
Properties and indexers in C#Properties and indexers in C#
Properties and indexers in C#
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
 

Similaire à Le Langage CSS

Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
YassineZARIOUH
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
Manel Ben Sassi
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
AmineReal
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3Annabi Gihed
 
Langage CSS
Langage CSSLangage CSS
Langage CSS
El Habib NFAOUI
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
DanielMohamed4
 
Fondamentaux des CMS
Fondamentaux des CMSFondamentaux des CMS
Fondamentaux des CMS
Frédéric Simonet
 
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
sellamimariem574
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
Cascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdfCascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdf
Sweetman3
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
Frédéric Simonet
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
Nicolas Morin
 
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdfBDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
RihabBENLAMINE
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
CSS 3
CSS 3CSS 3
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
webschooltours
 

Similaire à Le Langage CSS (20)

Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
Chapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdfChapitre 2_CSS_complet_Version1.pdf
Chapitre 2_CSS_complet_Version1.pdf
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Chapitre 3 : initiation CSS
Chapitre 3 : initiation CSSChapitre 3 : initiation CSS
Chapitre 3 : initiation CSS
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3
 
Css
CssCss
Css
 
Langage CSS
Langage CSSLangage CSS
Langage CSS
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
 
Fondamentaux des CMS
Fondamentaux des CMSFondamentaux des CMS
Fondamentaux des CMS
 
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
Formation CSS IT GUST TRAINING Explique les points necessaire a retenir dans ...
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Cascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdfCascading Style Sheet et CSS en sigle.pdf
Cascading Style Sheet et CSS en sigle.pdf
 
Drupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliersDrupal 7 - Fondamentaux et ateliers
Drupal 7 - Fondamentaux et ateliers
 
Css
CssCss
Css
 
Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)Drupal en bibliothèque (2009)
Drupal en bibliothèque (2009)
 
BDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdfBDW-ProgWEB_P2.pdf
BDW-ProgWEB_P2.pdf
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
CSS 3
CSS 3CSS 3
CSS 3
 
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
"Réussir son projet web... ou pas !" - Webschool Tours, 09/2015
 

Plus de Mohammed Amine Mostefai

Utilisation de Sharepoint (Collaboration)
Utilisation de Sharepoint (Collaboration)Utilisation de Sharepoint (Collaboration)
Utilisation de Sharepoint (Collaboration)
Mohammed Amine Mostefai
 
Utilisation de Sharepoint 2013 - Personnalisation
Utilisation de Sharepoint 2013 - PersonnalisationUtilisation de Sharepoint 2013 - Personnalisation
Utilisation de Sharepoint 2013 - Personnalisation
Mohammed Amine Mostefai
 
Utilisation Sharepoint (Listes)
Utilisation Sharepoint (Listes)Utilisation Sharepoint (Listes)
Utilisation Sharepoint (Listes)
Mohammed Amine Mostefai
 
Utilisation de Sharepoint - Gestion de Documents
Utilisation de Sharepoint - Gestion de DocumentsUtilisation de Sharepoint - Gestion de Documents
Utilisation de Sharepoint - Gestion de Documents
Mohammed Amine Mostefai
 
Utilisation de Sharepoiunt - Introduction
Utilisation de Sharepoiunt - IntroductionUtilisation de Sharepoiunt - Introduction
Utilisation de Sharepoiunt - Introduction
Mohammed Amine Mostefai
 
Pratiques agiles
Pratiques agilesPratiques agiles
Pratiques agiles
Mohammed Amine Mostefai
 
Introduction à Scrum
Introduction à ScrumIntroduction à Scrum
Introduction à Scrum
Mohammed Amine Mostefai
 
Méthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XPMéthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XP
Mohammed Amine Mostefai
 
Le Manifeste Agile
Le Manifeste AgileLe Manifeste Agile
Le Manifeste Agile
Mohammed Amine Mostefai
 
Méthodes Agiles - Généralités
Méthodes Agiles - GénéralitésMéthodes Agiles - Généralités
Méthodes Agiles - Généralités
Mohammed Amine Mostefai
 
Introduction aux technologies mobiles
Introduction aux technologies mobilesIntroduction aux technologies mobiles
Introduction aux technologies mobiles
Mohammed Amine Mostefai
 
Workflow Foundation - Cours 5
Workflow Foundation - Cours 5Workflow Foundation - Cours 5
Workflow Foundation - Cours 5
Mohammed Amine Mostefai
 
Workflow Foundation Module 4
Workflow Foundation Module 4Workflow Foundation Module 4
Workflow Foundation Module 4
Mohammed Amine Mostefai
 
Présentation cloud journée azure
Présentation cloud   journée azurePrésentation cloud   journée azure
Présentation cloud journée azure
Mohammed Amine Mostefai
 
Wf module3
Wf module3Wf module3
Microsoft Workflow Foundation - Cours 2
Microsoft Workflow Foundation - Cours 2Microsoft Workflow Foundation - Cours 2
Microsoft Workflow Foundation - Cours 2
Mohammed Amine Mostefai
 
Introduction to Workflow Foundation
Introduction to Workflow FoundationIntroduction to Workflow Foundation
Introduction to Workflow Foundation
Mohammed Amine Mostefai
 
Sécurisation des applications ASP.NET
Sécurisation des applications ASP.NETSécurisation des applications ASP.NET
Sécurisation des applications ASP.NET
Mohammed Amine Mostefai
 
Présentation sharepoint 2013
Présentation sharepoint 2013Présentation sharepoint 2013
Présentation sharepoint 2013
Mohammed Amine Mostefai
 
Module 8 programmation avancée d'asp.net
Module 8   programmation avancée d'asp.netModule 8   programmation avancée d'asp.net
Module 8 programmation avancée d'asp.net
Mohammed Amine Mostefai
 

Plus de Mohammed Amine Mostefai (20)

Utilisation de Sharepoint (Collaboration)
Utilisation de Sharepoint (Collaboration)Utilisation de Sharepoint (Collaboration)
Utilisation de Sharepoint (Collaboration)
 
Utilisation de Sharepoint 2013 - Personnalisation
Utilisation de Sharepoint 2013 - PersonnalisationUtilisation de Sharepoint 2013 - Personnalisation
Utilisation de Sharepoint 2013 - Personnalisation
 
Utilisation Sharepoint (Listes)
Utilisation Sharepoint (Listes)Utilisation Sharepoint (Listes)
Utilisation Sharepoint (Listes)
 
Utilisation de Sharepoint - Gestion de Documents
Utilisation de Sharepoint - Gestion de DocumentsUtilisation de Sharepoint - Gestion de Documents
Utilisation de Sharepoint - Gestion de Documents
 
Utilisation de Sharepoiunt - Introduction
Utilisation de Sharepoiunt - IntroductionUtilisation de Sharepoiunt - Introduction
Utilisation de Sharepoiunt - Introduction
 
Pratiques agiles
Pratiques agilesPratiques agiles
Pratiques agiles
 
Introduction à Scrum
Introduction à ScrumIntroduction à Scrum
Introduction à Scrum
 
Méthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XPMéthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XP
 
Le Manifeste Agile
Le Manifeste AgileLe Manifeste Agile
Le Manifeste Agile
 
Méthodes Agiles - Généralités
Méthodes Agiles - GénéralitésMéthodes Agiles - Généralités
Méthodes Agiles - Généralités
 
Introduction aux technologies mobiles
Introduction aux technologies mobilesIntroduction aux technologies mobiles
Introduction aux technologies mobiles
 
Workflow Foundation - Cours 5
Workflow Foundation - Cours 5Workflow Foundation - Cours 5
Workflow Foundation - Cours 5
 
Workflow Foundation Module 4
Workflow Foundation Module 4Workflow Foundation Module 4
Workflow Foundation Module 4
 
Présentation cloud journée azure
Présentation cloud   journée azurePrésentation cloud   journée azure
Présentation cloud journée azure
 
Wf module3
Wf module3Wf module3
Wf module3
 
Microsoft Workflow Foundation - Cours 2
Microsoft Workflow Foundation - Cours 2Microsoft Workflow Foundation - Cours 2
Microsoft Workflow Foundation - Cours 2
 
Introduction to Workflow Foundation
Introduction to Workflow FoundationIntroduction to Workflow Foundation
Introduction to Workflow Foundation
 
Sécurisation des applications ASP.NET
Sécurisation des applications ASP.NETSécurisation des applications ASP.NET
Sécurisation des applications ASP.NET
 
Présentation sharepoint 2013
Présentation sharepoint 2013Présentation sharepoint 2013
Présentation sharepoint 2013
 
Module 8 programmation avancée d'asp.net
Module 8   programmation avancée d'asp.netModule 8   programmation avancée d'asp.net
Module 8 programmation avancée d'asp.net
 

Dernier

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO Technology
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 

Dernier (6)

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdfOCTO TALKS : 4 Tech Trends du Software Engineering.pdf
OCTO TALKS : 4 Tech Trends du Software Engineering.pdf
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 

Le Langage CSS

  • 1. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 1 : Introduction Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 2 : Sélecteurs CSS Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. 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. 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. 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. 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 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 3 : Les Couleurs Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. 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. 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. 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. 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. 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. 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 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 4 : Le Texte Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. 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. 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. Technologies et Développement Web 86 Courrs 3 - Les Feuilles de Styles (CSS) Positionnement Section 6 : Disposition Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. 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. 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. 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. 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. 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. 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 Cours 3 – Les Feuilles de Styles (CSS) Technologies et Développement Web Section 7 : Les images Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Technologies et Développement Web Cours 3 – Les Feuilles de Styles (CSS) 117 Section 9 : Animations (CSS3) Copyright © 2013, Mostefai Mohammed Amine
  • 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. 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. 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. Technologies et Développement Web 121 Courrs 3 - Les Feuilles de Styles (CSS) Animations Section 9 : Animations Copyright © 2013, Mostefai Mohammed Amine
  • 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