w3 Css

CSS
CSS
# Cascading Style Sheet - Feuille de style en cascade
# Extension du fichier : .css
# Mettre en forme, gérer l’apparence du HTML
# Complément à HTML
# Exécuté coté client

CSS
# 1996 : CSS1
# 1998 : CSS2
# 2007 : CSS3
Inclure feuille de style
# Instruction CSS à l’intérieur des balises HTML
# Instruction CSS à l’intérieur de l’en-tête (head) du document
# Instruction CSS dans un fichier externe

Feuille de style externe
# Instruction CSS dans un fichier externe
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="chemin_vers_fichier_css.css" />
</head>
<body>
…
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=« main.css» />
<link rel="stylesheet" href=« style/main2.css» />
<link rel="stylesheet" href=« .. /css/main3.css» />
</head>
<body>
…
</body>
</html>
Le langage css
selecteur{
propriete1: valeur1;
…
proprieteN: valeurN;
}
selecteur1 {
propriete1: valeur1; /* commentaire */
…
}
selecteurN {
…
}
Commentaire
selecteur1 {
…
/* proprieteN: valeurN; */
/* a tester */
}
selecteurN {
…
}
LES SELECTEURS
Sélecteur
# Sélecteur d’élément
# Sélecteur de classe
# Sélecteur d’identificateur
# Sélecteur descendant
# Sélecteur descendant direct
# Sélecteur d’attribut / valeur d’attribut
# …
Sélecteur d’élément
# Permet de cibler un type d’élément (p, div, body, img …)
nom_balise {
…
}
div{
…
p { }
color: blue
margin: 0; tr{
} …
}
Sélecteur de classe
# Il cible les éléments en fonction de la valeur de l’attribut class
.nom_classe {
…
}
<div class="red">
… .green{
</div> Div{ }
<div class="green">
… } .red{
</div> }
<div class="red big">
…
</div>
<p class="red">
…
</p>
<h1 class="green big">
…
</h1>
# L’attribut class
# Contient le nom d’une (ou plusieurs) classe CSS. Il permet d’affecter

ponctuellement des styles à un élément.
# Peut être appliqué à tous les éléments
<nom_de_la_balise class="nom_classe">
<nom_de_la_balise class="nom_classe nom_classe_n ">

PAGE HTML FICHIER CSS
<div class="red"> .red {

… propriete1: valeur1;
</div> }
<div class="green">
…
.green {
</div> propriete2: valeur2;
}
<div class="red big">
… .big {
</div> propriete3: valeur3;
<p class="red">
…
}
</p> h1.green{
<h1 class="green big">
… }
</h1>
div.big{
}
Sélecteur de classe d’élément
# Il cible les type d’éléments en fonction de la valeur de l’attribut
class
nom_balise.nom_classe {
…
}
p.green {
color: green
}
Cibler les paragraphes qui utilisent la classe green

Sélecteur d’identifiant
# Il cible l’élément dont l’attribut id à la valeur spécifiée
#identificateur_unique {
…
}
# L’attribut id
# Permet d'identifier un élément de manière unique en lui

donnant un nom
# Peut être appliqué à tous les éléments
<nom_de_la_balise id="identifiant_unique">
PAGE HTML FICHIER CSS
<div id=« red" class=« green » > #red {

</div> }
<div id="green1" class=« green big »> #green {

</div> }
.green{
<div id=« green2" class=« red big »> propriete3: valeur3;
…
</div> }
Sélecteur descendant
# Il est construit avec 2 (ou plus) sélecteurs séparés par un espace
# Il cible les descendants du 1er sélecteur
selecteur1 selecteur2{
…
}
Sélecteur descendant
# Il est construit avec 2 (ou plus) sélecteurs séparé par un espace
# Il cible les enfants du 1er sélecteur
PAGE HTML
FICHIER CSS
Body
<body>
<p> … </p> div p {
P propriete2: valeur2;
Div }
<div>
<section> <p> … </p> </
Section p{
section>
<p> … </p> }P
Span
</div>
</body> div > p {
P }
Sélecteur descendant direct
selecteur1 > selecteur2{

…
}
Sélecteur descendant direct
# Il est construit avec 2 (ou plus) sélecteurs séparé par un espace
PAGE HTML
FICHIER CSS
<p> … </p> p{
<div> }
<section>
<p> … </p> div > p {
</section> propriete2: valeur2;
<p> … </p> }
</div>
Sélecteur universel
# Le sélecteur universel est caractérisé par une étoile : *
# Il permet de sélectionner tous les éléments de la page
*{
margin: 0;
}
Sélecteur d’attribut/ valeur d’attribut
# Il cible les éléments en fonction de la présence d’attributs et/ou de
leurs valeurs
element[attribut]{
…
}
[attribut]{
…
}
element[attribut=valeur]{
…
}
[attribut=valeur]{
…
}
Sélecteur d’attribut
# Il cible les éléments en fonction de la présence d’attributs et/ou de
leurs valeurs
h2[lang]{…} /* cible tous les h2 ayant l’attribut lang */
[lang]{…} /* cible tous les éléments ayant l’attribut lang */
h2[lang="fr"]{…} /* cible tous les h2 ayant l’attribut lang dont la

valeur est strictement égale à fr */
[lang="fr"]{…} /* cible tous les éléments ayant l’attribut lang

dont la valeur est strictement égale à fr */
[href="google.com"]
Le sélecteur suivant +
# Sélectionner l’élément suivant un élément ( frère)
p+span {
color: red;
}
Le sélecteur ~
# Sélectionner les nœuds qui suivent un élément et qui ont le même
parent.
p~span {
color: red;
}
cibler les éléments <span> qui suivent un élément <p> et qui ont le même élément parent.
PSEUDO-CLASSE
Pseudo-classe
# Mot-clé qui est ajouté à un sélecteur
# Indique l'état spécifique dans lequel l'élément doit être pour être
ciblé
element:pseudo-classe{
…
}
Pseudo-classe
# active : cible un élément lorsque celui-ci est activé par l’utilisateur.
# moment entre l'appui sur le pointeur et le relâchement de celui-ci
# hover : moment où l'utilisateur survole un élément avec le pointeur,

sans nécessairement l'activer
p:active{
background-color: yellow;
}
p:not(.p_green) {
color: blue;
}
div:hover {
background-color: pink;
}
Pseudo-classe
# link :Sélectionner tout lien n'ayant pas été visité, même ceux qui
seraient déjà mis en forme via des sélecteurs utilisant d'autres
pseudo-classes
# visited : permet de modifier l'aspect d'un lien après que l'utilisateur

l'a visité
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
background: yellow;
}
a:active {
color: red;
}
Pseudo-classe
# not: cibler les éléments qui ne sont pas représentés par l’argument
p:not(.p_green) {
color: blue;
}
Cibler les p qui n’ont pas de classe p_green
p:not(:hover) { .p_green:not(p) {
color: blue; color: red;
} }
Cibler les p non survolés tous les éléments qui ont la classe p_green mais qui ne sont pas des pp>
Pseudo-classes
# :first-child
# cibler un élément qui est le premier élément fils par rapport à son
élément parent
<div>
<p>Ce paragraphe est mis en forme car c'est un élément
p ET que c'est le premier fils de l'élément div.</p>
p:first-child {
<p>En revanche, ce paragraphe n'est pas mis en forme
color: red;
car ce n'est pas le premier !</p>
}
</div>
<div>
<h2>Ce titre h2 n'est pas mis en forme car ce n'est pas
un paragraphe.</h2>
<p>Et ce paragraphe n'est pas mis en forme car ce n'est pas
le premier fils !</p>
</div>
Pseudo-classes
# :last-child
# cibler un élément qui est le dernier enfant de son parent
# nth-child(an+b)
# cibler les éléments fils d'un élément dont les positions correspondent au motif an+b.
# :nth-child(1) le premier élément ( ne commence pas à 0) (<=> :first-child )
# :nth-child(2) le second élément
# :nth-child(3n) multiple de 3
# :nth-child(even) : éléments paires (<=> nth-child(2n) )
# :nth-child(odd) : éléments impaires (<=> nth-child(2n+1) )

PSEUDO-ÉLÉMENT
Pseudo-élément
# Un pseudo-élément est un mot-clé ajouté à un sélecteur qui
permet de mettre en forme certaines parties de l'élément ciblé
par la règle.
# Syntaxe
# On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur.
# On utilise deux fois le caractère deux-points (:) pour préfixer les

pseudo-éléments
Before
# Crée un pseudo-élément qui sera le premier enfant de
l'élément ciblé. Généralement utilisé pour ajouter du contenu
esthétique à un élément via la propriété CSS content.
/* On ajoute un coeur avant les liens */

a::before {
content: "♥";
}
After
# En CSS, ::after crée un pseudo-élément qui sera le dernier enfant
de l'élément sélectionné. Il est souvent utilisé pour ajouter du
contenu à un élément, en utilisant la propriété CSS content.
a::after {
content: "! ";
}
Grouper les sélecteurs
# les lister et les séparer par une virgule
#id_h1 {
color: peru;
} #id_h1,#id_h2 {
color: peru;
#id_h2 { }
color: peru;
}
#id_h1,
#id_h2, .p_22 , div{
color: peru;
}
RÈGLES CONTRADICTOIRES
Règles contradictoires
# L’ordre d'apparition des règles dans le CSS a une importance ;
quand deux règles applicables ont la même spécificité, c'est la
dernière déclarée qui sera utilisée pour la mise en forme.
Spécificité
# Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur
choisit la règle qui a la plus grande spécificité.
# La spécificité mesure combien la sélection est précise :
# Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page —
son score est donc faible ;
# Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut
class a la valeur choisie — son score est plus important.
# Un sélecteur d’identifiant est encore plus spécifique, son score est plus important
.main-heading {
<h1 class="main-heading" id="mon_titre" >This is my heading.</h1>
color: red;
}
#montitre {
color: green;
}
h1 {
color: blue;
}
Héritage
# Certaines valeurs pour une propriété CSS se transmettent des éléments
parents vers leurs enfants
# Color
# D'autres ne se transmettent pas
# width
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=« bootstrap.css» />
<link rel="stylesheet" href=« style/main2.css» />
<link rel="stylesheet" href=« .. /css/main3.css» />
</head>
<body>
</body>
</html>
STYLE DU TEXTE
Style du texte
# Police de caractères
selecteur{
font-family: nom_de_la_police;
}
selecteur{
font-family: nom_de_la_police, nom_de_la_police2, nom_de_la_police3;
} /* navigateur test nom_de_la_police s’il ne la trouve pas test
nom_de_la_police2 s’il ne la trouve pas nom_de_la_police3*/
Exemple de police : Arial | « Comic Sans MS » | Courier New

Georgia | Impact | Times New Roman
Trebuchet MS | Verdana
…
Style du texte
# Police de caractères
selecteur{
font-family: Arial, Verdana, "Arial Black";
}
Si le nom de la police est composé de plusieurs

mots, entourer le nom par des guillemets
Style du texte
# Taille des polices
selecteur{
font-size: chiffre Unité;
}
Les unités seront abordées dans un autre chapitre
p{
font-size: 16px;
}
div p{
font-size: 110%;
}
Style du texte
# Taille des polices
selecteur{
font-size: xx-small | x-small | small
| medium | large | x-large | xx-large;
}
Les unités seront abordées dans un autre chapitre
p{
font-size: large;
}
div p{
font-size: xx-small;
}
Style du texte
# Graisse du texte (caractère maigre (100) ou gras (900) )
selecteur{
font-weight: normal | bold | bolder | lighter | 100 |
200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit ;
}
p{
font-weight: bold;
}/*mettre en gras*/
Style du texte
# Style des police
selecteur{
font-style: normal | italic | oblique ;
}
p{
font-style: italic;
}
div p{
font-style: normal;
}
Style du texte
# Souligner
selecteur{
text-decoration: underline | line-through ( barré) |
overline (ligne au-dessus)| blink (clignotant) | none ;
}
p{
text-decoration: underline;
}
Blink ne fonctionne pas sous chrome

Style du texte
# Alignement
selecteur{
text-align: left | center | right | justify
(prend toute la largeur possible);
}
p{
text-align: left;
}
Blink ne fonctionne pas sous chrome

Style du texte
# Appliquer des petites capitales au texte
selecteur{
font-variant: normal | small-caps ;
}
p{
font-variant: small-caps;
}
Style du texte
# Font : syntaxe raccourcie
selecteur{
font: font-style font-variant font-weight font-size font-family;
}
p{
font: underline small-caps 12px ;
}
div{ div{
font: 12px Arial; <==>
font-size: 12px;
font-family: Arial;
} }
Les valeurs pour font-style, font-variant et font-weight doivent précéder la valeur pour font-size
La valeur pour font-family doit être la dernière fournie.
COULEUR ET ARRIÈRE-PLAN
Couleurs
# http://www.css-faciles.com/couleurs-css.php
Notation hexadecimal : #XXYYZZ
XX : quantité de rouge
YY : quantité de vert
ZZ : quantité de bleu
Notation RGB : rgb(X,Y,Z)
X : quantité de rouge
Y : quantité de vert
Z : quantité de bleu
Couleurs
# Couleur du texte
selecteur{
color: couleur ;
}
Les couleurs seront abordées dans un autre chapitre
p{
color: red;
}
div p{
color: #997766;
}
background-color
# Couleur utilisée pour l'arrière-plan d'un élément
selecteur{
background-color: couleur ;
}
Les couleurs seront abordées dans un autre chapitre
p{
background-color: yellow;
}
div p{
background-color: #FFFFFF;
}
h1{
background-color: rgb(22,44,6);
}
background-image
# définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément
# Les images sont dessinées les unes au-dessus des autres.
selecteur{
background-image: url(chemin d’accès à l’image) ;
}
p{
background-image: url(ecole.jpg);
}
Div.box{
background-image: url("ecole.jpg"), url("ecole2.jpg");
}
background-repeat
# définit la façon dont les images utilisées en arrière-plan sont
répétées.
# Une image d'arrière-plan pourra ainsi être répétée sur l'axe

horizontal, l'axe vertical ou bien ne pas être répétée.
selecteur{
background-repeat: repeat-x | repeat-y | repeat | no-repeat ;
}
p{
background-repeat: repeat-x;
}
repeat repeat-x
background-position
# la position initiale, relative à l'origine définie par background-origin,
pour chaque image d'arrière-plan.
selecteur{
background-position: left | right | center | top | bottom;
background-position: valeur_numerique_abscisse valeur_numerique_ordonnee ;
p{
background-repeat: repeat-x;
background-position: center;
}
div{
background-position: 10px 30px;
}
background-size
# Taille de l’image par rapport à son conteneur
# Définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être
contrainte, complètement ou partiellement afin de conserver ses proportions.
selecteur{
background-size: valeur | cover | contain ;
}
p{
background-size: 20%;
}
Cover : l'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions.
L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les
proportions du conteneur sont diﬀérentes
Contain : Redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses
proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la
couleur d'arrière-plan
BORDURES ET OMBRES
border:
# Une propriété raccourcie qui permet de définir les propriétés
liées à la bordure
selecteur{
border: largeur couleur type_de_bordure;
}
p{
border: 1px green solid;
}
Type de bordure : none | solid ( trait simple) | dotted ( pointillé) | dashed ( tirets) | double (bordure double) | …
border-
selecteur{
border-top: largeur couleur type_de_bordure;
border-bottom: largeur couleur type_de_bordure;
border-left: largeur couleur type_de_bordure;
border-right: largeur couleur type_de_bordure;
}
p{
border-top: 1px green solid;
}
border-radius
# Bordure arrondie
selecteur{
border-radius: taille;
border-radius: taille1 (en haut à gauche) taille2 (en haut à
droite) taille3 (en bas à droite) taille4 (en bas à gauche);
}
p{
border-radius: 10px;
border-radius: 10px 2px 70px 8px;
}
opacity
# Degré de visibilité de l'arrière-plan sur lequel est placé l'élément
selecteur{
opacity: valeur;
}
p{
opacity: 0.6;
}
Opacité à 0 = pas visible
Opacité à 1 = complètement visible

box-shadow
# Ombres des boites
selecteur{
box-shadow: decalage-horizontal decalage-vertical taille-flou couleur-ombre;
}
p{
box-shadow: 10px 5px 5px red;
}
Ombre
# Ombres du texte
selecteur{
selecteur{
text-shadow: decallage-horizontal decallage-
text-shadow: decalage-horizontal decalage-vertical taille-flou couleur-ombre;
vertical adoussissement-degradé couleur-ombre;
}
}
p{
text-shadow: #FC0 1px 0 10px;
}
LISTE
Liste
# Définir l'apparence de la puce d'un élément de liste :
ul{
list-style: ‘chaine de caractère’ | disc | circle | square | decimal | …
;
}
ul{
List-style: square;
}
https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type
Liste
# Définir l'apparence de la puce d'un élément de liste :
ul{
list-style-type: ‘chaine de caractère’ | disc | circle | square | decimal | …
;
}
ul{
list-style-type: square;
}
https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type
TABLEAU
Tableau
# Fusion des bordures interne
table{
border-collapse: collapse;
}
Tableau
# Déplacer le caption
selecteur{
caption-side: bottom | top ;
}
table{
caption-side: bottom;
}
https://developer.mozilla.org/fr/docs/Web/CSS/caption-side
MODÈLE DE BOÎTE
Modèle de boîte
# Permet la mise en page sur le Web
# Chaque élément est représenté comme une boîte rectangulaire,

avec le contenu de la boîte, un remplissage, un encadrement et
une marge
Largeur
# La propriété width permet de définir la largeur de la boîte
du contenu d'un élément.
# Par défaut, sa valeur est auto, c'est à dire la largeur

automatiquement calculée de son contenu.
selecteur{
width: valeur ;
}
div{
width: 100px;
}
Hauteur
# La propriété height définit la hauteur de la boîte de contenu d'un
élément.
selecteur{
height: valeur ;
div{
height: 100px;
}
Margin
# Taille des marges sur les quatre côtés de l'élément
# C'est une propriété raccourcie qui permet de manipuler les autres

propriétés de marges :
# margin-top, margin-right, margin-bottom et margin-left
selecteur{
margin: valeur |
valeur_haut valeur_droit valeur_bas valeur_gauche | …}
div{
margin: 10%;
Margin 0 20px 20% 2px;
margin-top: 20px;}
Padding
# Définir les différents écarts de remplissage sur les quatre côtés d'un élément
# C'est une propriété raccourcie qui permet de manipuler les autres propriétés
de marges :
# padding-top, padding-right, padding-bottom et padding-left
selecteur{
padding: valeur |
valeur_haut valeur_droit valeur_bas valeur_gauche | …
}
div{
padding: 20%;
}
Types de boîtes dans les CSS
# Le type de boîte appliqué à un élément est défini par la propriété
display.
# Le display explique comment se comporte l’élément vis à vis des

autres éléments environnants .
# Le display a plusieurs valeurs possible
# Les plus utilisés sont block, inline et inline-block

Une boîte de type block
# Une boîte de type block permet d’afficher boites les unes sous les
autres
# Prend la totalité de la largeur
# L’élément suivant va se situer en dessous
# Peut avoir une largeur et une hauteur

Exemple d’élément de type block
# Div
Une boîte de type inline
# Une boîte de type inline permet d’afficher boites les unes à côté des autres
# Les réglages de largeur et de hauteur n'ont aucun effet sur les boîtes inline ;
# tout remplissage, marge et encadrement de boîtes en ligne modifie la

position du texte environnant, mais n'affecte pas la position des boîtes
block environnantes.
# La boite prend automatiquement la dimension du contenu

Exemple d’élément de type inline
# Span
Une boîte de type inline-block
# Intermédiaire entre les deux précédentes :
# elle s'intègre dans le texte environnant et les autres éléments en

ligne sans créer de sauts de ligne avant et après lui
contrairement à une boîte de bloc, mais elle peut être
dimensionnée avec width et height
Exemple d’élément de type inline-block
# input
Display
# Changer le type de boite
selecteur{
display: block | inline | inline-block | …;
}
COMPLÉMENTS
Google Font
# https://fonts.google.com/
<link href="https://fonts.googleapis.com/css?family=Robto:400,700i,900" rel="stylesheet">

Font awesome
# https://fontawesome.com
# Il faut créer un compte
# Puis ajouter le lien du script dans la balise head
<script src="https://kit.fontawesome.com/3c7f5856f6.js"
crossorigin="anonymous"></script>
Font awesome
# Pour utiliser les icônes :
<i class="fas fa-address-book »></i>

<i class="fas fa-at"></i>
Font awesome
# Pour changer le style des icônes :
i {
color: blueviolet;
font-size: 19px;
}
Importer un fichier de font
# @font-face

w3 Css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

w3 Css

Transféré par

Droits d'auteur :

Formats disponibles

CSS

# Extension du fichier : .css

# Mettre en forme, gérer l’apparence du HTML

# Exécuté coté client

# Instruction CSS à l’intérieur de l’en-tête (head) du document

# Instruction CSS dans un fichier externe

# Sélecteur descendant direct

# Sélecteur d’attribut / valeur d’attribut

# Contient le nom d’une (ou plusieurs) classe CSS. Il permet d’affecter

# Peut être appliqué à tous les éléments

<nom_de_la_balise class="nom_classe nom_classe_n ">

PAGE HTML FICHIER CSS

<div class="red"> .red {

Cibler les paragraphes qui utilisent la classe green

# Permet d'identifier un élément de manière unique en lui

# Peut être appliqué à tous les éléments

PAGE HTML FICHIER CSS

<div id=« red" class=« green » > #red {

<div id="green1" class=« green big »> #green {

# Il cible les descendants du 1er sélecteur

# Il cible les enfants du 1er sélecteur

selecteur1 > selecteur2{

# Il cible les enfants du 1er sélecteur

# Il permet de sélectionner tous les éléments de la page

[lang]{…} /* cible tous les éléments ayant l’attribut lang */

h2[lang="fr"]{…} /* cible tous les h2 ayant l’attribut lang dont la

[lang="fr"]{…} /* cible tous les éléments ayant l’attribut lang

# moment entre l'appui sur le pointeur et le relâchement de celui-ci

# hover : moment où l'utilisateur survole un élément avec le pointeur,

# visited : permet de modifier l'aspect d'un lien après que l'utilisateur

Cibler les p qui n’ont pas de classe p_green

# cibler un élément qui est le dernier enfant de son parent

# :nth-child(1) le premier élément ( ne commence pas à 0) (<=> :first-child )

# :nth-child(2) le second élément

# :nth-child(even) : éléments paires (<=> nth-child(2n) )

# :nth-child(odd) : éléments impaires (<=> nth-child(2n+1) )

# On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur.

# On utilise deux fois le caractère deux-points (:) pour préfixer les

/* On ajoute un coeur avant les liens */

# La spécificité mesure combien la sélection est précise :

# D'autres ne se transmettent pas

Exemple de police : Arial | « Comic Sans MS » | Courier New

Si le nom de la police est composé de plusieurs

Blink ne fonctionne pas sous chrome

Blink ne fonctionne pas sous chrome

La valeur pour font-family doit être la dernière fournie.

Notation hexadecimal : #XXYYZZ

Notation RGB : rgb(X,Y,Z)

# Les images sont dessinées les unes au-dessus des autres.

# Une image d'arrière-plan pourra ainsi être répétée sur l'axe

Opacité à 0 = pas visible

Opacité à 1 = complètement visible

# Chaque élément est représenté comme une boîte rectangulaire,

# Par défaut, sa valeur est auto, c'est à dire la largeur

# C'est une propriété raccourcie qui permet de manipuler les autres

# margin-top, margin-right, margin-bottom et margin-left

# padding-top, padding-right, padding-bottom et padding-left

# Le display explique comment se comporte l’élément vis à vis des

# Le display a plusieurs valeurs possible

# Les plus utilisés sont block, inline et inline-block

# Prend la totalité de la largeur

# L’élément suivant va se situer en dessous

# Peut avoir une largeur et une hauteur