Le Langage CSS

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




Plan du module

3

 Introduction

 Images

 Sélecteurs CSS

 Transitions et Transformations

 Couleur

 Animations

 Texte

 Boîtes
 Disposition



4



Section 1 : Introduction



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é



Courrs 3 - Les Feuilles de Styles (CSS)

5


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




 Chaque élément est dans une « boîte invisible »


Syntaxe

7

Déclaration

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




Sélecteur


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




 Le sélecteur indique à quels éléments appliquer le style


Syntaxe, suite

9

Propriétés


Valeurs

h1, h2 {

margin: 5px;
font-family :Arial;
color :Yellow;

}



Syntaxe - Suite

10

 Les valeurs concernent quelle valeur affecter à un aspect (par
exemple, bleu à couleur)
 Exemple : voir syntaxe.html




 Les propriétés concernent l’aspect à styler : taille, couleur, police,…


CSS intégré dans le fichier HTML

11

 Le CSS peut être intégré dans le HTML en utilisant la balise « style »

 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>




CSS externe

12

 La feuille de style peut être dans un fichier externe dont l’extension
est « 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 »




La balise link

13

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




 Voir « external.html »


CSS externe

14

 Il vaut mieux mettre les feuilles de style dans des fichiers externes
pour faciliter la maintenance




 Un fichier HTML peut référencer plusieurs fichiers CSS


Exercice 1

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




15

16



Section 2 : Sélecteurs CSS



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




17


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 »




Sélecteur


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.




Sélecteur


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


Exemple



Sélecteur


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é


p > not(a) tous les éléments sauf les liens



Sélecteur


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 »




22


23


Exercice 1

Appliquez les sélecteurs sur votre page personnelle.



24



Section 3 : Les Couleurs



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




 Un mix entre trois valeurs : rouge, vert et bleu


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




 Voir « couleurs.html »,


Couleurs standard - Exemples

27

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


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);
}




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.




28


Couleurs HSL - Exemples

29

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

background-color: hsl(120,30%,50%);
color: hsl(0,100%,50%);

border-color: hsl(0,100%,25%);
}




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 »




30


Transparence : Exemples

31



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;
}


32


Couleurs : démonstration




Couleurs : démonstration

En utilisant les différentes fonctions de couleur, faites vivre
votre site personnel en utilisant les couleurs




33

34



Section 4 : Le Texte



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




35


 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




36



37


Police serif cambria
Police sans serif Arial
Police mono-space consolas





Police cursive Monotype Corsiva
Police fantaisiste Haettenschweiler




38


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




Utilisation des polices de caractères dans les pages 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




Application d’une police dans une page


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 »




 Spécifie la police de caractères à utiliser dans une page


Font-family Syntaxe

42

ul li:nth-child(1) {
}
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}




font-family: Verdana;


43


Font-family




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.




44


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 »




45


Font-size Syntaxe

46

font-size: 14px;

}

font-size: 14pt;
}

font-size: 150%;
}

font-size: 2em;

}




47


Font-size




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




48


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




 Il existe plusieurs formats de police


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 »




 Le format « opentype format » (extension otf) est une extension vectorielle
de « trutype » et a été proposé par Microsoft


@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;
}




@font-face {


52


@font-face




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




Règle

53


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



Règle

54



55


Autres propriétés texte




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




 Permet un effet d’ombre sur le texte


Exercice

En utilisant les différentes propriétés de texte, restylez votre
page personnelle.




57



58

Section 5 : Boîtes, Listes et
Tableaux



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



59


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 »




60


Bordures et Marges

61

Marge Extérieure (Margin)

Bordure (Border)
Marge Intérieure (Padding)




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 »




62


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.




Règle


Bordure raccourci

64

div p:nth-child(3) {

border : 5px solid blue;
}




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 »




 Les marges sont exprimées en pixel ou en pourcentage


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 »




 La propriété « visibility » permet d’afficher ou de cacher un élément. Elle
peut avoir les valeur « visible » ou « hidden ».


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


Combine en ligne et bloc



Valeur


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.




68


Bordures de type image (CSS3), Syntaxe

69

border-image: url(Images/border.png) 30 30 stretch;




border-image: url(Images/border.png) 30 30 round;


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;




 Permet d’ajouter une ombre à une boîte


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




Valeur


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;




 CSS3 permet d’arrondir les coins d’une boîte


Démonstration

73


 Démonstrations dans « NewBorders.html »




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




Valeur


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

75

list-style: square;

list-style: square outside;




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.




76


77


Styler les tableaux (Voir tableaux.html)




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




 Ne pas utiliser les tableaux.


79


Styler les formulaires (Démonstration, formulaire.html)



80



Section 6 : Disposition



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




81


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



82


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



83


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)




84


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




85


86


Positionnement




É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 »




87


88


Éléments flottants




É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




 Les éléments flottants peuvent mettre des élément côte à côté


90


Disposition (Dispositions.html)




91


Disposition (Album.html)




Boîte Flexible (Flexbox, CSS3)

92

 Nouveau mode de positionnement basé sur CSS3

 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




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




Grille Flexible, Compatibilité des navigateurs


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.




Propriété


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




Propriété

96



Section 7 : Les images



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




 Beaucoup de concepts CSS s’appliquent aux images


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.




98


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.




99


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;




100


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




101


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é




 background : linear-gradient(x y, couleur1, couleur2, couleurN)


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é




103


104


Images et dégradés





105

Section 8 : Les transitions et les
transformations (CSS3)



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



106


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




Propriété


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




108


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.




Propriété


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




Déclenchement des transitions par JavaScript


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




111


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




Propriété

112


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




Propriété

113


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




114


Origine des transformations

115

 La propriété transform-origin définit l’origine de la transformation

 Syntaxe : tansform-origin : axe-x axe-y axe-z
 Par défaut, les valeurs sont 50% 50% 0




116


Transitions et Transformations





117

Section 9 : Animations (CSS3)



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



118


Déclaration des cadres

119

@keyframes nom_de_l_animation
from


{

{ propriété_à_animer: valeur_initiale; }
50%
{ propriété_à_animer: valeur_intermédiaire; }
to
{ propriété_à_animer: valeur_finale; }

}



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




Propriété

120


121


Animations




Bibliographie

122

 Jon Duckett, HTML & CSS, Wiley Editions
 Tutoriaux Alsacréation
 « Introduction aux animations CSS3 », David Rousset



Le Langage CSS

Contenu connexe

Tendances (20)

Similaire à Le Langage CSS (20)

Plus de Mohammed Amine Mostefai (20)

Le Langage CSS