Vous êtes sur la page 1sur 9

11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

AE

Accueil > Cours > Apprenez à créer votre site web avec HTML5 et CSS3 > Mémento des propriétés CSS

Apprenez à créer votre site web avec HTML5 et CSS3

20 heures  Facile

Mis à jour le 16/11/2020

 

Mémento des propriétés CSS


Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3. Pour la plupart, ce
sont des propriétés que nous avons vues dans le cours, mais vous trouverez aussi quelques
nouvelles propriétés que nous n'avons pas abordées.

La liste est non exhaustive car mon but n'est pas de faire la liste de toutes les propriétés CSS qui
peuvent exister : il y en a vraiment trop (plus de deux cents !) et certaines sont très rarement
utilisées.

Mémento


Propriétés de mise en forme du texte
Je résume ici la plupart des propriétés de mise en forme du texte.

Qu'est-ce que la mise en forme de texte ? C'est tout ce qui touche à la présentation du texte
proprement dit : le gras, l'italique, le souligné, la police, l'alignement, etc.

Propriété Valeurs (exemples) Description

font- police1, police2, police3, Nom de police


family serif, sans-serif,
monospace

@font- Nom et source de la Police personnalisée


face police

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 1/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

Propriété Valeurs (exemples) Description

font- 1.3em, 16px, 120%... Taille du texte


size

font- bold, normal Gras


weight

font- italic, oblique, normal Italique


style

text- underline, overline, Soulignement, ligne au-dessus, barré ou clignotant


decora line-through, blink,
tion none

font- small-caps, normal Petites capitales


varian
t

text- capitalize, lowercase, Capitales


transf uppercase
orm

font - Super propriété de police. Combine :  font-weight   , 


font-style   ,  font-size   ,  font-variant   , 
font-family   .

text- left, center, right, justify Alignement horizontal


align

vertic baseline, middle, sub, Alignement vertical (cellules de tableau ou éléments 


al- super, top, bottom inline-block   uniquement)
align

line- 18px, 120%, normal... Hauteur de ligne


height

text- 25px Alinéa


indent

white- pre, nowrap, normal Césure


space

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 2/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

Propriété Valeurs (exemples) Description

word- break-word, normal Césure forcée


wrap

text- 5px 5px 2px blue Ombre de texte


shadow (horizontale, verticale,
fondu, couleur)

Propriétés de couleur et de fond

Propriété Valeurs (exemples) Description

color nom, rgb(rouge,vert,bleu), Couleur du texte


rgba(rouge,vert,bleu,transparence),
#CF1A20...

backgr Identique à color Couleur de fond


ound-
color

backgr url('image.png') Image de fond


ound-
image

backgr xed, scroll Fond xe


ound-
attach
ment

backgr repeat-x, repeat-y, no-repeat, Répétition du fond


ound- repeat
repeat

backgr (x y), top, center, bottom, left, right Position du fond


ound-
positi
on

backgr - Super propriété du fond. Combine :  


ound background-image   ,  background-repeat   , 
background-attachment   , 
background-position

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 3/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

Propriété Valeurs (exemples) Description

opacit 0.5 Transparence


y

Propriétés des boîtes

Propriété Valeurs (exemples) Description

width 150px, 80%... Largeur

height 150px, 80%... Hauteur

min- 150px, 80%... Largeur minimale


width

max- 150px, 80%... Largeur maximale


width

min- 150px, 80%... Hauteur minimale


height

max- 150px, 80%... Hauteur maximale


height

margin 23px Marge en haut


-top

margin 23px Marge à gauche


-left

margin 23px Marge à droite


-right

margin 23px Marge en bas


-
bottom

margin 23px 5px 23px 5px Super-propriété de marge.


(haut, droite, bas, gauche) Combine :  margin-top   ,  margin-right   , 
margin-bottom   ,  margin-left   .

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 4/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

Propriété Valeurs (exemples) Description

paddin 23px Marge intérieure à gauche


g-left

paddin 23px Marge intérieure à droite


g-
right

paddin 23px Marge intérieure en bas


g-
bottom

paddin 23px Marge intérieure en haut


g-top

paddin 23px 5px 23px 5px Super-propriété de marge intérieure.


g (haut, droite, bas, gauche) Combine :  padding-top   ,  padding-right  
,  padding-bottom   ,  padding-left   .

border 3px Épaisseur de bordure


-width

border nom, rgb(rouge,vert,bleu), Couleur de bordure


-color rgba(rouge,vert,bleu,transparence),
#CF1A20...

border solid, dotted, dashed, double, Type de bordure


-style groove, ridge, inset, outset

border 3px solid black Super-propriété de bordure. Combine ,


border-width   ,  border-color   , 
border-style   .

Existe aussi en version border-top   , 


border-right   ,  border-bottom   , 
border-left   .

border 5px Bordure arrondie


-
radius

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 5/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

Propriété Valeurs (exemples) Description

box- 6px 6px 0px black Ombre de boîte


shadow (horizontale, verticale, fondu,
couleur)

Propriétés de positionnement et d'af chage

Propriété Valeurs (exemples) Description

displa block, inline, inline-block, table, Type d'élément (  block   ,  inline   , 


y table-cell, none... inline-block   ,  none   …)

visibi visible, hidden Visibilité


lity

clip rect (0px, 60px, 30px, 0px) Af chage d'une partie de l'élément
rect (haut, droite, bas, gauche)

overfl auto, scroll, visible, hidden Comportement en cas de dépassement


ow

float left, right, none Flottant

clear left, right, both, none Arrêt d'un ottant

positi relative, absolute, static Positionnement


on

top 20px Position par rapport au haut

bottom 20px Position par rapport au bas

left 20px Position par rapport à la gauche

right 20px Position par rapport à la droite

z- 10 Ordre d'af chage en cas de superposition.


index La plus grande valeur est af chée par-dessus
les autres.

Propriétés des listes

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 6/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

Propriété Valeurs (exemples) Description

list- disc, circle, square, decimal, lower- Type de liste


style- roman, upper-roman, lower-alpha,
type upper-alpha, none

list- inside, outside Position en retrait


style-
positi
on

list- url('puce.png') Puce personnalisée


style-
image

list- - Super-propriété de liste. Combine 


style list-style-type   , ,
list-style-position   , 

list-style-image   .

Propriétés des tableaux

Propriété Valeurs (exemples) Description

border-collapse collapse, separate Fusion des bordures

empty-cells hide, show Af chage des cellules vides

caption-side bottom, top Position du titre du tableau

Autres propriétés

Propriété Valeurs (exemple) Description

cursor crosshair, default, help, move, pointer, progress, text, wait, e-resize, Curseur de
ne-resize, auto... souris

Que pensez-vous de ce cours ?

J'AI TERMINÉ CE CHAPITRE

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 7/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

 MÉMENTO DES BALISES HTML

Le professeur
Mathieu Nebra
Entrepreneur à plein temps, auteur à plein temps et co-fondateur d'OpenClassrooms :o)

Découvrez aussi ce cours en...

 
Livre PDF

OPENCLASSROOMS

ENTREPRISES

CONTACT

EN PLUS

Français
 

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 8/9
11/12/2020 Mémento des propriétés CSS - Apprenez à créer votre site web avec HTML5 et CSS3 - OpenClassrooms

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1608902-memento-des-proprietes-css 9/9