HB

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 Licence 
Mis à jour le 02/02/2022

 

Annexes
Mémento des propriétés CSS 
 1. Envoyez votre
Cette page est une liste non exhaustive des propriétés CSS qui site sur le
existent en CSS3. Pour la plupart, ce sont des propriétés que nous Web
avons vues dans le cours, mais vous trouverez aussi quelques  2. Mémento des
nouvelles propriétés que nous n'avons pas abordées. balises HTML
La liste est non exhaustive car mon but n'est pas de faire la liste de 3. Mémento
toutes les propriétés CSS qui peuvent exister : il y en a vraiment des
trop (plus de deux cents !) et certaines sont très rarement utilisées. propriétés
CSS
Mémento 
Propriétés de mise en forme du texte ACCÉDER
Je résume ici la plupart des propriétés de mise en forme du texte. AU FORUM

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.

Valeurs
Propriété Description
(exemples)

font- police1, Nom de police

family police2,
police3, serif,
sans-serif,
monospace

@font- Nom et Police personnalisée

face source de la
police

font- 1.3em, 16px, Taille du texte

size 120%...

font- bold, normal Gras

weight

font- italic, oblique, Italique

style normal
 Valeurs
Propriété Description
(exemples)

text- underline, Soulignement, ligne au-dessus,

decora overline, line- barré ou clignotant
tion through,
blink, none

font- small-caps, Petites capitales

varian normal
t

text- capitalize, Capitales

transf lowercase,
orm uppercase

font - Super propriété de police.

Combine :  font-weight   , 
font-style   ,  font-size   , 

font-variant   ,  font-family   .

text- left, center, Alignement horizontal

align right, justify

vertic baseline, Alignement vertical (cellules de

al- middle, sub, tableau ou éléments 
align super, top, inline-block   uniquement)
bottom
 Valeurs
Propriété Description
(exemples)

line- 18px, 120%, Hauteur de ligne

height normal...

text- 25px Alinéa

indent

white- pre, nowrap, Césure

space normal

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

wrap normal

text- 5px 5px 2px Ombre de texte

shadow blue
(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

rgba(rouge,vert,bleu,transparence), texte
#CF1A20...
Propriété Valeurs (exemples) Description

backgr Identique à color Couleur de

ound- fond
color

backgr url('image.png') Image de

ound- fond
image

backgr fixed, scroll Fond fixe

ound-
attach
ment

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

ound- repeat du fond
repeat

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

ound- fond
positi
on
 Propriété Valeurs (exemples) Description

backgr - Super
ound propriété du
fond.
Combine :  
backgroun
d-image
  , 
backgroun
d-repeat
  , 
backgroun
d-
attachmen
t
  , 
backgroun
d-
position

opacit 0.5 Transparence

y

Propriétés des boîtes

Propriété Valeurs (exemples) Description

Propriété Valeurs (exemples) Description

width 150px, 80%... Largeur

height 150px, 80%... Hauteur

min- 150px, 80%... Largeur

width minimale

max- 150px, 80%... Largeur

width maximale

min- 150px, 80%... Hauteur

height minimale

max- 150px, 80%... Hauteur

height maximale

margin 23px Marge en

-top haut

margin 23px Marge à

-left gauche

margin 23px Marge à

-right droite
Propriété Valeurs (exemples) Description

margin 23px Marge en bas

-
bottom

margin 23px 5px 23px 5px Super-

(haut, droite, bas, gauche) propriété de
marge.
Combine : 
margin-
top
  , 
margin-
right
  , 
margin-
bottom
  , 
margin-
left
 .

paddin 23px Marge

g-left intérieure à
gauche
Propriété Valeurs (exemples) Description

paddin 23px Marge

g- intérieure à
right droite

paddin 23px Marge

g- intérieure en
bottom bas

paddin 23px Marge

g-top intérieure en
haut
Propriété Valeurs (exemples) Description

paddin 23px 5px 23px 5px Super-

g (haut, droite, bas, gauche) propriété de
marge
intérieure.
Combine : 
padding-
top
  , 
padding-
right
  , 
padding-
bottom
  , 
padding-
left
 .

border 3px Épaisseur de

-width bordure

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

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

border solid, dotted, dashed, double, Type de

-style groove, ridge, inset, outset bordure
Propriété Valeurs (exemples) Description

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
  , 
 Propriété Valeurs (exemples) Description

border-
left
 .

border 5px Bordure

- arrondie
radius

box- 6px 6px 0px black Ombre de

shadow (horizontale, verticale, fondu, boîte
couleur)

Propriétés de positionnement et d'affichage

Propriété Valeurs (exemples) Description

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

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

visibi visible, hidden Visibilité

lity

clip rect (0px, 60px, Affichage d'une partie de

30px, 0px) l'élément
rect (haut, droite,
bas, gauche)
 Propriété Valeurs (exemples) Description

overfl auto, scroll, visible, Comportement en cas de

ow hidden dépassement

float left, right, none Flottant

clear left, right, both, Arrêt d'un flottant

none

positi relative, absolute, Positionnement

on static

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'affichage en cas de

index superposition.
La plus grande valeur est
affichée par-dessus les
autres.

Propriétés des listes

 Propriété Valeurs (exemples) Description

list- disc, circle, square, Type de liste

style- decimal, lower-
type roman, upper-roman,
lower-alpha, 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.

style Combine 
list-style-type   , ,

list-style-position   , 

list-style-image   .

Propriétés des tableaux

Valeurs
Propriété Description
(exemples)
 Valeurs
Propriété Description
(exemples)

border- collapse, Fusion des bordures

collapse separate

empty-cells hide, show Affichage 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, Curseur de

pointer, progress, text, wait, e-resize, souris
ne-resize, auto...

Que pensez-vous de ce cours ?

J'AI TERMINÉ CE CHAPITRE

MÉMENTO DES BALISES


HTML
 Le professeur Découvrez aussi ce
Mathieu Nebra cours en...
Entrepreneur à plein temps, auteur
à plein temps et co-fondateur  
d'OpenClassrooms :o)
Livre PDF

OPENCLASSROOMS Français
Qui sommes-nous ?

Financements

Expérience de formation

Forum

Blog
POUR LES ENTREPRISES
Presse
Former et recruter

EN PLUS

OPPORTUNITÉS Boutique
Nous rejoindre Mentions légales

Devenir mentor Conditions générales d'utilisation

Devenir coach carrière Politique de protection des données

personnelles
AIDE
Cookies

Accessibilité