3STI

Annexe CSS
Propriétés de mise en forme du texte
La mise en forme est l’opération qui permet de contrôler la présentation du texte.
Description Propriété Valeurs (exemples)
Police du texte font-family police1, police2,police3,…
Taille du texte font-size 1.3em, 16px, 120%...
Gras font-weight bold : gras , bolder : plus gras , lighter : plus fin ,
normal : pas gras (par défaut)
Italique font-style italic (italique ), oblique(autre façon de mettre en
italique) , normal (par défaut)
Soulignement, ligne au-dessus, text-decoration underline (souligné), overline ( ligne au-dessus),
barré ou clignotant line-through (barré),blink (clignotant),
none : normal (par défaut)
Alignement horizontal du texte text-align left : aligné à gauche (par défaut)
center : centré
right : aligné à droite
justify : justifié (prend toute la largeur de la page)
Ombre text-shadow Exemple : 5px 5px 2px blue
(horizontale, verticale, fondu, couleur)

Propriétés de couleur et de fond :

Description
Couleur du texte
Couleur d’arrière-plan
Image de fond (d’arrière-plan)
Taille de l’image de fond
Transparence
Propriétés des boîtes
Propriété Valeurs (exemples)
color On utilise l’une de ces méthodes :
-Nom (exemple : black, blue, white…)
-rgb(rouge,vert,bleu) (exemp :rgb(50,102,3))
-rgba(rouge,vert,bleu,transparence) (pour
rendre la couleur transparente)
-valeur hexadécimal comme #CF1A20...
background-color Identique à color
background-image url('image.png')
Background-size Largeur hauteur (exemple : 100% 20vh)
opacity Valeur entre 0 et 1 (exemple : 0.5)
Description Propriété valeur

Largeur width En px, en

% ou vm
Hauteur height En px, ou
vh
Marge Margin
(en haut, à (top, right
droite , en , bottom, ,
bas , à left)
gauche)

1
 3STI

Description Propriété valeur

Marge intérieure Padding Exemple :
23px 5px 23px 5px (haut, droite, bas, gauche)
25px La même valeur pour les quatre
Marge intérieure en haut, padding-top, 10px
à droite, padding- right,
en bas, padding- bottom
à gauche padding- left
Épaisseur de bordure border-width Exemple : 3px
Couleur de bordure border-color nom, rgb(rouge,vert,bleu),
rgba(rouge,vert,bleu,transparence),
#CF1A20...
Type de bordure border-style solid, dotted, dashed, double, groove, ridge,
inset, outset
propriété combiné de bordure border 3px solid black ;
Bordure arrondie border-radius
Propriétés des listes
Description Propriété Valeurs (exemples)
Type de liste list-style-type disc, circle, square, decimal,lower-roman, upper-
roman,lower-alpha, upper-alpha,none
Propriétés de positionnement et d'affichage
Description Propriété Valeurs (exemples)
Type d'élément display flex ,block, inline, table, table-
(flex,block, inline,none…) cell, none...
Comportement en cas de overflow auto, scroll, visible, hidden
dépassement
Flottant float left, right, none
Positionnement position relative, absolute, fixed
Position par rapport au haut top 20px
Position par rapport au bas bottom 20px
Position par rapport à la gauche left 20px
Position par rapport à la droite right 20px
Ordre d'affichage z-index 1
2
 3STI

exemple de float

Display :

display flex

Type de liste

Bordure Border-radius

Position