---
title: Cascading Style Sheets
tags: support, intégration, css
robots: noindex, nofollow
author: Julien Noyer
---
# Cascading Style Sheets
*Créer le design d'une page Webb*
## Présentation du CSS
Les feuilles de style en cascade, généralement appelées CSS, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
## Intégration du CSS
Il existe trois façons pour intégrer du CSS : en ligne, dans la balise `<head>` ou dans un fichier externe qui est importé dans document HTML. Les conventions indiquent qu’il est recommandé de séparer le contenu du design, c’est pourquoi il faut intéger les styles dans un fichier externe.
### CSS en ligne
Les styles sont directement indiqués dans la déclaration de la balise. Solution la moins propre, mais néanmoins utiliser pour les newsletters.
```htmlmixed=
<h1 style="color:red;">Hello World!</h1>
```
La commande `style=“…”` permet de déclarer les styles de la balise `<h1>…</h1>`. Les propriétés sont ensuite définies les unes à la suite des autres, séparées d’un point-virgule.
### CSS dans la balise head
Tous les styles sont définis entre les balises `<head>…</head>` pour les initier à l’ouverture du document HTML.
```htmlmixed=
<style type="text/css">
h1 {color:red;}
</style>
```
La commande style permet de déclarer les styles. Tout le document HTML sera soumi aux règles du CSS définies entre ces balises.
### CSS dans un fichier externe
Les styles CSS sont configurés dans un fichier différent. Ce fichier est chargé grâce à la commande `<link>` entre les balises `<head>…</head>`.
```htmlmixed=
<link rel="stylesheet" type="text/css" href="css/style.css">
```
Cette commande appelle un fichier css nommé style.css qui est situé dans le dossier css pour le charger à l’ouverture du document. Le même fichier peut être appelé dans plusieurs pages.
---
<br><br><br><br><br><br>
# Cibler une balise HTML en CSSS
*Utilisation des sélecteurs de base*
<br><br>
## Présentation
Les sélecteurs permettent d’appliquer les styles définis dans le fichier CSS sur les balises du document HTML.
<br><br>
## Les sélecteurs logiques
Les balises HTML sémantiques sont appelées par leur sélecteur logique : `<h1>`, `<p>`, `<ol>`, `<table>`, …
```css=
ul {
color: white;
background-color: red;
}
```
> Le style est défini pour toutes les balise `<ul>`
<br><br>
## Les sélecteurs par interaction
Généralement utilisé pour modifier le style des liens. Trois types d’interaction sont disponibles : `:hover`, `:active` ou `:focus`
```css=
a:hover {
color: red;
border: .1rem solid red;
}
```
> Le style s’affichera selon l’action de la souris
<br><br>
## Les sélecteurs par identifiant
Une balise HTML ne peut contenir qu’une seule référence `id=“…”` qui est un outil de mise en page. S’applique sur n’importe quelle balise HTML.
```css
#globe {
width: 80%;
max-width: 60rem;
}
```
> Le style s’affichera pour la balise dont la référence est `id=“globe”`
<br><br>
## Les sélecteurs par classe
Une balise HTML peut contenir plusieurs références `class=“...”` qui est un outil de mise en forme. S’applique sur n’importe quelle balise HTML.
```css
.accueil {
font-size: 15px;
text-transform: uppercase;
}
```
> Le style s’affichera pour toutes les balises dont la référence est `class=“accueil”`
<br><br>
## Les sélecteurs imbriqués
Permet de styliser de façon transversale : les éléments strong seront de couleur red pour `<ul>` et `<a>` s’ils se trouvent dans `class=“accueil”`.
```css
.accueil strong {
color: red;
}
```
> Le style s’affichera pour toutes les balises strong dont la référence est `class=“accueil”`
<br><br>
## La priorité des sélecteurs
Il est possible de créer des styles généreaux et des styles plus précis pour re définir des zones. L’ordre des priorités est le suivant : sélécteur de balise, sélécteur de classe et sélecteur d’id qui a la priorité sur les autres. Plus le sélecteur est précis, plus il est prioritère.
```css
p {
font-size: 1.5rem;
}
section p {
font-size: 2rem;
}
.uneClasse p, #uneId p {
font-size: 2.5rem;
}
.unTexte {
font-size: 3rem;
}
#unTitre {
font-size: 3.5rem;
}
```
---
<br><br><br><br><br><br>
# Les styles CSS de base
*Utilisation des principales propriétés CSS*
<br><br>
## Présentation
Le concept de feuille de style est présent dès l’origine du World Wide Web : le premier navigateur web WorldWideWeb permet de mettre en forme les documents à l’aide de ce qui serait aujourd’hui considéré comme une « feuille de style utilisateur »2. De même, les navigateurs Viola en 1992 et Harmony en 1993 recourent à un mécanisme similaire permettant de déterminer le rendu des polices de caractères, des couleurs ou de l’alignement du texte.
<br><br>
## Définir les couleurs
Il existe trois façons pour définir des couleurs, mais quelle que soit la façon il faut s’assurer que les couleurs sont bien des couleurs Web. Les propriétés CSS pour la couleur sont : color pour le texte et background-color pour la couleur de fond.
```css=
a {
color: red;
}
#globe {
background-color: #ff0000;
}
strong {
color: rgba(255, 0, 0, 0.5);
}
```
### Définition des éléments
- `color`: propriété pour modifier la couleur de la police
- `red`: teintes différentes, il s’agit d’une normalisation des couleurs pour assurer un affichage optimal
- `background-color`: propriété pour modifier la couleur de fond
- `#ff0000`: Une suite de trois doubles caractères précédés du signe, les trois doubles caractères correspondent aux couleurs rouge, verte et bleue
- `rgba(255, 0, 0, 0.5);`: La référence RGBA permet de définir l’opacité de la couleur : le quatrième chiffre correspond à l’opacité (1 pour 100%).
<br><br>
## Mise en forme typographique
Plusieurs propriétés CSS sont prévues pour gérer la mise en forme typographique, il est possible de les définir pour toutes les balises de mise en forme. Pour centrer plusieurs balises dans une même section, il est recommandé d’appliquer text-align sur à la section.
```css=
h1 {
font-size: 25px;
line-height: 30px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 2px 2px black;
text-decoration: underline;
}
p {
font-family: "Times New Roman", Georgia, Serif;
margin-bottom: 10px;
}
a {
color: red;
font-style: italic;
}
```
### Définition des éléments
- `font-size`: propriété pour modifier la taille de la police
- `line-height`: propriété pour modifier l’interlignage
- `font-weight`: propriété pour modifier l’épaisseur de la pomlice
- `text-transform`: propriété pour modifier la case
- `text-shadow`: propriété pour ajouter une ombre portée
- `text-decoration`: propriété pour modifier le soulignement
<br><br>
## Gestion des images de fond
La propriété bacground-image permet d’afficher une image derrière le contenu d’une balise. Contrairement aux balises `<img>`, les images de fond sont importées et positionnées via le fichier CSS et sont généralement associées à une couleur de fond.
```css=
#globe {
background-image: url("../img/paper.gif");
background-repeat: repeat-x;
background-position: right top;
}
.accueil {
background: white url(".../img/paper.gif") repeat-x right top;
}
```
### Définition des éléments
- `background-image`: propriété pour définir l’image de fond
- `background-repeat`: propriété pour définir la répétition de l’image de fond
- `background-position`: propriété pour définir la position de l’image de fond
- `background`: propriété complète de gestion du fond d’une balise
---
<br><br><br><br><br><br>
# Gestion de la mise en page
*Le positionnement en CSS*
<br><br>
## Padding intérieur et margin extérieur
Les marges en CSS sont défins par le padding intérieur et le margin extérieur. Le margin ajoute de l’espace autopur d’un élément alors que le padding augmente la marge intérieure de l’élément.
Le padding a pour incidence d’augmenter la valeur de width mais contraint le contenu de section dans la valeur initiale de width. La propriété margin: auto permet de center une balise de type block inférieur à width: 100%.
```css=
section {
width: 41rem;
margin: auto;
padding: 5rem;
bacground-color: rgba(0, 68, 100, 0.1);
}
```
### Définition des éléments
- `width`: propriété pour définir la largeur d’une balise de type block
- `margin`: propriété pour gérer les marge extérieures
- `padding`: propriété pour gérer les marge intérieurs
<br><br>
## Modifier le type d’une balise HTML
Changer le type des balises permet de modifier leur comportement pour par exemple passer du bloc au type in-line afin de créer des colonnes. Il est alors dit que les balises sont sorties du flux pour être repositionnées.
Une balise de type block, comme `<article>`, chasse les blocks qui la suivent à la ligne suivante. Modifier le display en inline-block permet d’aligner les blocks tout en conservant la possibilité d’utiliser des propriétés relatives aux balises de type blocks. La valeur inligne signifie que la balise est sortie du flux du document pour être placée à la suite de la balise qui la précède.
```css=
#normal article {
bacground-color: rgba(0, 68, 100, 0.1);
}
#enLigne article {
display: inline-block;
bacground-color: rgba(0, 68, 100, 0.1);
}
```
### Définition des éléments
- `display`: propriété pour définir le type de block
<br><br>
## Ajuster la position d’une balise
Les propriétés de positionnement top, right, bottom et left permettent un calage plus précis des éléments HTML. Utiles pour créer des animations scriptées, ils le sont également pour réaliser des mises en pages élaborées.
Les propriétés top, right, bottom et left fonctionnent avec la propriété position.
```css=
.move {
position: relative;
top: 1rem;
left: 1rem;
}
#leDeuxieme {
position: relative;
width: 100%;
}
.topSection {
position: absolute;
top: O;
right: O;
}
.dontMove {
position: fixed;
}
```
### Définition des éléments
- `position`: propriété pour définir le comportement d’un block dans le flux de lecture
- `top`: propriété pour définir la position depuis le haut
- `left`: propriété pour définir la position depuis la gauche
<br><br>
## Habiller une image avec du text
L’habillage d’un bloc est un grand classique de la mise en page, il est utilisé depuis toujours dans l’édition : lorsqu’une image est présente dans un texte, le texte suit les bords de l’image. Pour empêcher les balises suivantes d’être flottantes il faut leur appliquer une propriété `clear`.
```css=
.aGauche {
float: left;
}
.aDroite {
float: right;
}
```
### Définition des éléments
- `float`: propriété pour aliger une image à gauche ou à droite d’un texte
- `clear`: propriété pour stoper le flottement
---
<br><br><br><br><br><br>
# Les nouveautés CSS3
*Les nouveau outils de l’intégrateur*
<br><br>
## Présentation
HTML5 est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014, HTML5 spécifie des syntaxes d’un modèle abstrait défini en termes de DOM. Le CSS3 regroupe les nouveaux outils de signe en CSS.
<br><br>
## La technique du Reset et du Normalize CSS
Le Reset et le Normalize CSS sont des techniques qui visent à créer une configuration de base pour toutes les balises HTML d’une page Web. Elles partent du principe d’intégrer une feuille de style d’initialisation avant d’en créer une propre au site.
### Le Normalize CSS
On conseille donc d’utiliser un Normalize CSS car il vise plus précisément les différents éléments HTML et leur applique les styles nécessaires. Pour maitriser parfaitement la technique du Normalize CSS il est recommandé de créer son propre fichier normalize.css basé sur des régles communes.
```css=
html {
font-family: sans-serif;
font-size: 12px;
color: balck;
}
body, section, article {
margin: 0;
}
a {
text-decoration: none;
background-color: transparent;
}
b, strong {
font-weight: bold;
}
```
<br><br>
## Les nouveaux sélecteurs CSS3
En plus des sélecteurs classiques, CSS3 en propose des nouveaux pour aller plus loin dans la mise en page.
| Sélecteur | Exemple | Description |
| -------- | -------- | -------- |
| `element1 ~ element2` | `p ~ ul` | Tous les éléments `<ul>` précédé par un élément `<p>` |
| `[attribute^=“value”]` | `a[href^=”https”]` | Tous les éléments `<a>` dont l’attribut href commence |
| `:not(selector)` | `:not(p)` | Tous les éléments que ne sont pas `<p>` |
| `:nth-of-type(n)` | `p:nth-of-type(2)` | Tous les éléments `<p>` qui sont les les deuxièmes éléments `<p>` de leurs parents |
| `:last-child` | `p:last-child` | Tous les éléments `<p>` qui sont les derniers enfants de leurs parents |
> La liste complète de ces nouveaux sélecteur est disponible sur le site de W3S : https://www.w3schools.com/cssref/css_selectors.asp
<br><br>
## Les sélecteurs avancés
CSS permet d’associer aux sélecteurs classiques des sélecteurs associés qui permettent d’optimiser la programmation CSS car ils évitent l’ajout de nouvelles classes et id CSS.
```css=
section > p {
font-size: 12px;
color: black;
}
section + p {
font-size: 12px;
color: black;
}
section ~ p {
font-size: 12px;
color: black;
}
```
### Définition des éléments
- `section > p`: Sélectionne tous les éléments `<p>` dont le parent est un élément `<section>`
- `section ~ p`: Sélectionne la balise `<p>…</p>` qui est précédée par une balise `</section>`
<br><br>
## Les Pseudo-class
Une pseudo-classe CSS est un mot-clé ajouté au sélecteur pour indiquer un état particulier de l’élément qui doit être sélectionné. Par exemple, `:hover`, appliquera le style quand l’utilisateur survolera l’élément visé par le sélecteur.
```css=
a:hover {
color: red;
text-decoration: none;
}
a:active {
color: white;
background-color: red;
}
input:focus {
text-shadow: 2px 2px red;
}
span:first-child {
text-transform: uppercase;
}
```
### Définition des éléments
- `:hover`: Permet de spécifier l’apparence d’un élément au moment où l’utilisateur passe la souris dessus
- `:active`: Permet de définir l’apparence d’un élément au moment exact où l’utilisateur clique dessus
- `:focus`: Permet de spécifier l’aspect d’un élément lorsque celui-ci est sélectionnéé par l’utilisateur
- `:first-child`: Représente un élément qui est le premier enfant d’un élément parent
<br><br>
## Les Pseudo-éléments
Les pseudos-éléments créent une balise qui sera le premier enfant de l’élément sélectionné ils sont généralement utilisés pour ajouter du contenu esthétique à un élément en utilisant la propriété CSS content. C’est une balise de type en-ligne par défaut.
```css=
blockquote::before {
content: "«\00A0";
color: blue;
font-size: 45px;
}
blockquote::after {
content: "\00A0»";
color: red;
font-size: 45px;
}
```
### Définition des éléments
- `::before`: Ajoute un guillemet ouvert avant la balise `<blockquote>`
- `::after`: Ajoute un guillemet fermé après la balise `<blockquote>`
> Dans une optique de qualité Web, il est préférable d’éviter d’utiliser la propriété content pour ajouter de contenu textuel. A utiliser avec parcimonie.
<br><br>
## Intéggrerr une police avec FontFace
La commande @font-face permet d’intégrer dans une page Web des fichiers de police afin de les utiliser dans la mise en page. Ces fichiers doivent être placés sur le serveur pour être appelé via le CSS. Les navigateurs ne supportant pas tous les mêmes fichiers de police il faut donc spécifier plusieurs formats.
```css=
@font-face{
font-family : “maFonte”;
src : url(‘maFonte.woff’) format(‘woff’),
url(‘maFonte.svg#abcd’) format(‘svg’),
url(‘maFonte.ttf’) format(‘truetype’);
src : url(‘maFonte.eot’);
}
h1 {
font-family: 'maFonte', sans-sherif;
}
```
### Définition des éléments
- `@font-face` : Commande `@font-face { … }` pour appeler le service
- `src` : Les polices sont des fichiers externes
- `font-family` : Il faut toujours prévoir une police de remplacement
> Cette technique nécessite de savoir convertir des fichiers de police dans les différents formats
<br><br>
## Utiliseer l'API Google Font
L’utilisation de l’API Google Fonts pour intégrer les polices est une solution à privilégier car elle permet de ne pas charger le serveur avec des fichiers de police et parce qu’elle offre un très grand choix de polices et de déclinaisons.
```css=
@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
h1 {
font-family: 'Gloria Hallelujah', cursive;
color: red;
font-size: 3rem;
}
```
### Définition des éléments
- `@import`: Les paramètres de la fontes sont envoyer dans l’adresse, chaque fonte a des paramètres spécifiques.
- `font-family`: La police est ensuite appliquée avec la propriété font-family (cursive est la police de remplacement
> Que ce soit en utilisant @font-face ou Gopgle Font, il est primordial de définir une police de remplacement dans le cas ou la police importée ne fonctionnerait pas sur certains navigateurs.
<br><br>
## Jouer avec les couleurs de fond
L’application des propriétés de dégradés peut être assez fastidieuse mais permet de réaliser des fonds de couleurs précises et bien plus légères qu’une image. Les dégradés de couleurs peuvent être de deux types : linear-gradient ou radial-gradient.
```css=
section:first-of-type {
background: -webkit-linear-gradient(red, green, blue);
background: -o-linear-gradient(red, green, blue);
background: -moz-linear-gradient(red, green, blue);
background: linear-gradient(red, green, blue);
}
section:nth-of-type(2) {
background: -webkit-linear-gradient(left top, red, green, blue);
background: -o-linear-gradient(left top, red, green, blue);
background: -moz-linear-gradient(left top, red, green, blue);
background: linear-gradient(left top, red, green, blue);
}
section:nth-of-type(3) {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
background: -o-radial-gradient(red 5%, green 15%, blue 60%);
background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(red 5%, green 15%, blue 60%);
}
section:last-of-type {
background: -webkit-repeating-radial-gradient(red, green, blue);
background: -o-linear-repeating-radial-gradient(red, green, blue);
background: -moz-repeating-radial-gradient(red, green, blue);
background: repeating-radial-gradient(red, green, blue);
}
```
### Définition des éléments
- `section:first-of-type`: Les couleurs doivent être séparées d’une virgule. Il est possible d’utiliser toutes les valeurs de couleur : red, #FF0000 ou rgba(255, 0, 0, 1)
- `section:nth-of-type(2)`: Il est possible de configurer l’orientation d’un dégradé linéaire avec les valeurs suivantes : top, right, bottom, left, etc…
- `section:nth-of-type(3)`: En ajoutant un pourcentage après la définition d’un couleur, il est possible de modifier l’intensité de la couleur dans le dégradé.
- `section:last-of-type`: Il est également possible de répéter le dégradé.
> L’utilisation des propriétés de dégradé étant relativement compliquée, il peut être intéressant d’utiliser un générateur.
---
<br><br><br><br><br><br>
# May the CSS3 be with you
*Transition et animation CSS3*
<br><br>
## Constructeurs pour afficher les effets CSS3
Les nouvelles propriétés CSS3 ont besoin de faire appel à des constructeurs pour s’afficher correctement selon le navigateur qui les lit, il faut se référer au site WS3 pour savoir quel(s) constructeur(s) utiliser selon la propriété CSS3. Néanmoins, certains navigateurs affichent parfaitement le CSS3 et c’est pourquoi, en plus des lecteurs, il faut toujours également faire appel à la propriété standard.
```css=
section {
-ms-propriété: méthode(valeur);
-webkit-propriété: méthode(valeur);
-o-propriété: méthode(valeur);
-moz-propriété: méthode(valeur);
propriété: méthode(valeur);
}
```
### Définition des éléments
- `<section>`: Le sélecteur est inchangé
- `-ms-`: Construtcteur pour IE
- `-webkit-`: Construtcteur pour Chrome et Safari
- `-o-`: Construtcteur pour Opéra
- `-moz-`: Construtcteur pour Firefoxex
- `propriété`: La propriété standard doit toujours être ajoutée en dernier
<br><br>
## Transition CSS3
La propriété transform en CSS3 permet de modifier l’aspect d’un élément du DOM sur deux dimensions. Cette propriété dispose de six méthodes différentes : translate(), rotate(), scale(), skewX(), skewY() et matrix().
```css=
section:first-of-type {
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
transform: translate(50px,100px);
}
section:nth-of-type(2) {
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
section:nth-of-type(3) {
-ms-transform: skewY(20deg);
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
}
section:nth-of-type(4) {
-ms-transform: scale(2,3);
-webkit-transform: scale(2,3);
transform: scale(2,3);
}
section:last-of-type {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
```
### Définition des éléments
- `translate()`: propriété permettant de déplacer un élément en X et Y
- `rotate()`: propriété permettant de faire une rotation
- `skewY()`: propriété permettant de faire un trapèze en Y
- `scale()`: propriété permettant d’augmenter la taille d’un bloc
- `matrix()`: propriété permettant de combiner plusieurs effets
<br><br>
## Les eeffets en 3 dimensions
La propriété rotate en CSS3 permet de modifier l’aspect d’un élément du DOM sur trois dimensions. Cette propriété dispose de trois méthodes différentes : rotateX(), rotateY() et rotateZ().
```css=
section:first-of-type {
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg);
}
section:nth-of-type(2) {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
section:last-of-type {
-webkit-transform: rotateY(120deg);
transform: rotateY(120deg);
}
```
### Définition des éléments
- `rotateX()`: propriété permettant de faire une rotation sur l’axe X
- `rotateZ()`: propriété permettant de faire une rotation sur l’axe Y
- `rotateY()`: propriété permettant de faire une rotation sur l’axe Z
<br><br>
## Intéragir avec l'utilisateur
La propriété transition en CSS3 permet de modifier les valeurs d’un élément en douceur pour déclencher des animations.
```css=
section:first-of-type {
-webkit-transition: width 2s;
transition: width 2s;
}
section:nth-of-type(2) {
-webkit-transition: width 2s, height 4s;
transition: width 2s, height 4s;
}
section:nth-of-type(3) {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
section:nth-of-type(4) {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
section:last-of-type {
-webkit-transition: width 2s height 4s linear;
transition: width 2s height 4s linear;
}
```
### Définition des éléments
- `:first-of-type` : Transition simple pour modifier une propriété
- `:nth-of-type(2)` : Transition multiple pour modifier plusieurs propriétés
- `transition-delay` : Propriété permettant d’ajouter un délai avant la transition
- `transition-timing-function` : Propriété permettant d’ajouter un effet de transition
- `:last-of-type` : Compression des propriétés de transition
<br><br>
## Les transition et les transformations 3D
Les propriétés transition: “…” et transform: “…” ayant besoin des mêmes constructeurs, il est possible de les combiner pour réaliser des transitions de forme. La propriété transform: “…” est alors configurée comme une propriété CSS classique.
```css=
section {
width: 10rem;
height: 10rem;
background: red;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
section:hover {
width: 30rem;
height: 30rem;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
```
### Définition des éléments
- `transition` : Les propriétés de transition s’appliquent sur des éléments inactifs pour être chargées en premier.
- `transform` : Cette propriété peut être appelée car elle a besoin des mêmes constructeurs que la propriété transition
- `:hover` : Lorsqu’elles sont combinées avec les propriétés de transition, les propriétés de transformation peuvent être appliquées au survol d’un élément pour animer la transformation.
<br><br>
## Animer une page Web
Les propriétés d’animation permettent de modifier les styles CSS d’un élément en créant des étapes pour créer une animation homogène. Il faut d’abord définir les [@keyframes](https://www.w3schools.com/css/css3_animations.asp) qui correspondent aux étapes de l’animation et leur donner un nom, ce nom sera ensuite appelé avec la propriété animation-name.
```css=
@keyframes animationColorPosition {
0% { background-color: red; left: 0rem; top: 0rem; }
50% { background-color: blue; left:20rem; top:20rem; }
100% { background-color: green; left: 0rem; top: 0rem; }
}
@-webkit-keyframes animationColorPosition {
0% { background-color: red; left: 0rem; top: 0rem; }
50% { background-color: blue; left:20rem; top:20rem; }
100% { background-color: green; left: 0rem; top: 0rem; }
}
section {
width: 10rem;
height: 10rem;
background-color: red;
animation-name: animationColorPosition;
animation-duration: 4s;
}
```
### Définition des éléments
- `@keyframes` : Toutes les propriétés CSS sont disponibles dans les @keyframes et il est possible de définir autant d’étapes que voulu. Pour une animation en deux étapes, utiliser les @keyframes from{…} et to{…}
- `@-webkit-keyframes` : Constructeur pour Chrome, Safari et Opera
Comme les transitions, les animations possèdent différentes propriétés qui permettent de configurer une animation complexe. Comme pour toutes les propriétés CSS multiples, deux méthodes d’écriture sont disponibles.
```css=
section {
width: 10rem;
height: 10rem;
animation-name: animationColorPosition;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: reverse;
}
section:nth-of-type(2) {
animation: animationColorPosition 4s linear 2s 3 reverse;
}
```
### Définition des éléments
- `animation-name` : Propriété permettant d’appliquer une animation
- `animation-duration` : Propriété permettant de définir la durée d’une animation
- `animation-timing-function` : Propriété permettant de définir un effet d’animation
- `animation-delay` : Propriété permettant de définir un temps avant l’animation
- `animation-iteration-count` : Propriété permettant de définir le nombre d’animation
- `animation-direction` : Propriété permettant de définir le sens de l’
---
<br><br><br><br><br><br>
# Ressources
## Liens utiles
La liste ci-dessous contient les liens utiles vers des supprots de cours :
- [Propriété Color](https://www.w3schools.com/cssref/css_colors.asp) _Couleur des police_
- [Propriété Font-Size](https://www.w3schools.com/cssref/pr_font_font-size.asp) _Taille des polices_
- [Propriété Line-Height](https://www.w3schools.com/cssref/pr_dim_line-height.asp) _Interlignage des polices_
- [Propriété Fond-Weight](https://www.w3schools.com/cssref/pr_font_weight.asp) _Epaisseur des polices_
- [Propriété Text-transform](https://www.w3schools.com/cssref/pr_text_text-transform.asp) _Transformation des polices_
- [Propriété Text-Shadow](https://www.w3schools.com/cssref/css3_pr_text-shadow.asp) _Ombre portées des polices_
- [Propriété Text-Decoration](https://www.w3schools.com/cssref/pr_text_text-decoration.asp) _Décoration des polices_
- [Propriété Background-Color](https://www.w3schools.com/cssref/pr_background-color.asp) _Couleur de fond_
- [Propriété background-image](https://www.w3schools.com/cssref/pr_background-image.asp) _Image de fond_
- [Propriété background-repeat](https://www.w3schools.com/cssref/pr_background-repeat.asp) _Répétition de l'image de fond_
- [Propriété background-position](https://www.w3schools.com/cssref/pr_background-position.asp) _Position de l'image de fond_
- [Propriété background](https://www.w3schools.com/css/css_background.asp) _Gestion du fond des balises_
- [Propriété width](https://www.w3schools.com/cssref/pr_dim_width.asp) _Gestion de la largeur des balises_
- [Propriété margin](https://www.w3schools.com/css/css_margin.asp) _Gestion marges extérieures_
- [Propriété padding](https://www.w3schools.com/css/css_padding.asp) _Gestion des marges intérieures_
- [Propriété display](https://www.w3schools.com/cssref/pr_class_display.asp) _Gestion des types de balises_
- [Propriété position](https://www.w3schools.com/cssref/pr_class_position.asp) _Positionner une balise_
- [Propriété top](https://www.w3schools.com/cssref/pr_pos_top.asp) _Positionnement depuis le haut_
- [Propriété left](https://www.w3schools.com/cssref/pr_pos_left.asp) _Positionnement depuis la gauche_
- [Propriété float](https://www.w3schools.com/css/css_float.asp) _Habiller une image avec du texte_
- [Propriété clear](https://www.w3schools.com/css/css_clear.asp) _Supprimer le flottement_
- [Reset CSS](https://meyerweb.com/eric/tools/css/reset/) _Réinitialiser le CSS_
- [Normalize CSS](http://netmacom.fr/blog/webdesign/armoniser-ses-feuilles-de-style-normalize-css.html) _Normaliser le CSS_
- [Pseudos-éléments](https://www.w3schools.com/cssref/sel_after.asp) _Nouveaux sélecteurs_
- [Les font-face](https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp) _Les polices FontFace_
- [Dégradés de couleurs](https://www.w3schools.com/css/css3_gradients.asp) _Les dégradés de couleurs_
- [Générateur de dégradés de couleurs](http://www.colorzilla.com/gradient-editor/) _Générer un dégrader de couleurs_
- [Propriété 2dtransform](https://www.w3schools.com/css/css3_2dtransforms.asp) _Transformation en 2 dimensions_
- [Propriété 3dtransform](https://www.w3schools.com/css/css3_3dtransforms.asp) _Transformation en 3 dimensions_
- [Transition simple](https://www.w3schools.com/css/css3_transitions.asp) _Transition simple_
- [Transition multiple](https://www.w3schools.com/css/css3_transitions.asp) _Transition multiple_
- [Propriété Transitions](https://www.w3schools.com/css/css3_transitions.asp) _Configurer les transitions_
- [Les keyframes](https://www.w3schools.com/css/css3_animations.asp) _Configurer les images clefs d'une animation_
- [Propriété animation-name](https://www.w3schools.com/cssref/css3_pr_animation-name.asp) _Nommer une animation_
- [Propriété animation-duration](https://www.w3schools.com/cssref/css3_pr_animation-duration.asp) _Durée d'une animation_
- [Propriété transition-timing](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp) _Effet d'une animation_
- [Propriété delay](https://www.w3schools.com/cssref/css3_pr_transition-delay.asp) _Délai avant une animation_
- [Propriété iteraction-count](https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp) _Nombre d'animations_
Sign in with Wallet
Connect another wallet