Mé mento proprié té s CSS

Propriétés de mise en forme du texte

Propriété Valeurs (exemples)
font-family police1, police2, police3,
serif, sans-serif, monospace
font-size 1.3em, 16px, 120%...
font-weight bold, normal
font-style italic, oblique, normal
font-variant small-caps, normal
font méga propriété de police.
Combine : font-weight, font-style, font-size, font-variant, font-family.
line-height 18px, 120%, normal...
text-shadow 5px 5px 2px blue
(horizontale, verticale,
fondu, couleur)
text-align left, center, right, justify
text-indent 25px
text-decoration underline, overline, line-
through, blink, none
text-transform capitalize, lowercase,
uppercase
vertical-align baseline, middle, sub,
super, top, bottom
@font-face Nom et source de la police
Description
Nom de police
Taille du texte
Gras
Italique
Petites capitales
Hauteur de ligne
Ombre de texte
Alignement horizontal
Alinéa
Soulignement, ligne au-dessus, barré ou
clignotant
Capitales, minuscules, majuscules
Alignement vertical uniquement pour les
cellules de tableau ou éléments inline-block
Police personnalisée

Propriétés de couleur et de fond

color nom, Couleur du texte
rgb(rouge,vert,bleu),
rgba(rouge,vert,bleu,transparence),
#CF1A20
background-color Identique à color Couleur de fond
background-image url('image.png') Image de fond
background-attachment fixed, scroll Fond fixe
background-repeat repeat-x, repeat-y, no-repeat, repeat Répétition du fond
background-position (x y), top, center, bottom, left, right Position du fond
background méga propriété d’arrière-plan. Combine : background-image,
background-repeat, background-attachment, background-position
opacity 0.5 opacité de l’arrière-plan et du texte

Propriétés des boîtes

width 150px, 80%... Largeur
height 150px, 80%... Hauteur
min-width 150px, 80%... Largeur minimale
max-width 150px, 80%... Largeur maximale
min-height 150px, 80%... Hauteur minimale
max-height 150px, 80%... Hauteur maximale
 MEMENTO PROPRIETES CSS

margin-top 23px (idem pour margin-right, bottom, top) Marge en haut

margin 23px 5px 23px 5px (haut, droite, bas, gauche)
méga propriété de marge.
Combine : margin-top, margin-right, margin-bottom, margin-left.
padding-left 23px (+ right, bottom, top) Marge intérieure à gauche
padding 23px 5px 23px 5px (haut, droite, bas, gauche)
méga propriété de marge intérieure.
Combine : padding-top, padding-right, padding-bottom, padding-left.
border-width 3px Épaisseur de bordure
border-color nom, rgb(rouge,vert,bleu), Couleur de bordure
rgba(rouge,vert,bleu,transparence),
#CF1A20...
border-style solid, dotted, dashed, double, groove, ridge, Type de bordure
inset, outset
border-radius 5px Bordure arrondie
border 3px solid black
méga propriété de bordure. Combine border-width, border-color, border-style.
Existe aussi en version border-top, border-right, border-bottom, border-left.
box-shadow 6px 6px 0px black Ombre de boîte
(horizontale, verticale, fondu, couleur)

Propriétés de positionnement et d'affichage

Propriété Valeurs (exemples) Description
display block, inline, inline-block, Type d'élément (block, inline, inline-block, none…)
table, table-cell, none,flex
float left, right, none Flottant
clear left, right, both, none Arrêt d'un flottant
position relative, absolute, static, fixed Positionnement
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
visibility visible, hidden Visibilité
overflow auto, scroll, visible, hidden Comportement en cas de dépassement
z-index 10 Ordre d'affichage en cas de superposition.
La plus grande valeur est affichée par-dessus les autres.

Propriétés des listes

list-style-type disc, circle, square, decimal, Type de liste
lower-roman, upper-roman,
lower-alpha, upper-alpha, none
list-style-position inside, outside Position en retrait
list-style-image url('puce.png') Puce personnalisée
list-style méga propriété qui combine list-style-type, list-style-position, list-style-image.

Propriétés des tableaux

border-collapse collapse, separate Fusion des bordures
empty-cells hide, show Affichage des cellules vides
caption-side bottom, top Position du titre du tableau

-2-
Source : openclassrooms.com/fr/courses/[…]apprenez-a-creer-votre-site-web-avec-html5-et-css3/[…]proprietes-css janv. 2019
 MEMENTO PROPRIETES CSS

Autres propriétés
cursor crosshair, default, help, move, pointer, progress, text, wait, e- Curseur de souris
resize, ne-resize, auto...
white-space pre, nowrap, normal Césure
word-wrap break-word, normal Césure forcée
transition méga propriété propriété durée délai interpolation transition de couleur,
transition: width 1s linear, background-color 1s ease; forme, taille,
Toute modification de propriété entre 2 pseudo-classes(2états) position.
peut être exécutée avec une transition.

Explication (liens) /transitions-et-animations-css/

clip clip : rect (0px, 60px, 30px, 0px) Affichage d'une

rect (haut, droite, bas, gauche) partie de l'élément

Propriétés d’un flex-container

Démonstration et source : alsacreations.com/[…]flexbox-layout-module.html

display flex : c'est le conteneur qui contient d'autres éléments qui seront disposés selon
les propriétés ci=dessous
flex-direction row (distribution horizontale, valeur par défaut)
row-reverse (distribution horizontale inversée)
column (distribution verticale)
column-reverse (distribution verticale inversée)
flex-wrap nowrap (les éléments ne passent pas à la ligne, valeur par défaut)
wrap (les éléments passent à la ligne dans le sens de lecture)
wrap-reverse (les éléments passent à la ligne dans le sens inverse)
À noter qu’il existe une propriété raccourcie flex-flow qui regroupe flex-direction et flex-wrap .
Exemple: .container { display:flex; flex-flow: row wrap; }
justify-content flex-start (éléments positionnés au début du sens de lecture, par défaut)
flex-end (éléments positionnés à la fin)
alignement horizontal center (position centrale)
space-between (répartition “justifiée”)
space-around (variante de répartition “justifiée”)
align-items stretch (étirés dans l’espace disponible, valeur par défaut)
flex-start (au début)
flex-end (à la fin)
alignement vertical center (au centre)
baseline (généralement identique à flex-start)

Propriétés d’un flex-items

align-self permet de distinguer l’alignement d’un "flex-
item" de ses frères. Les
valeurs de cette propriété sont identiques à celles
de align-items.
/* seul le paragraphe sera à droite
.container { align-items: stretch; }
p{ align-self: flex-end; }

-3-
Source : openclassrooms.com/fr/courses/[…]apprenez-a-creer-votre-site-web-avec-html5-et-css3/[…]proprietes-css janv. 2019
 MEMENTO PROPRIETES CSS

margin margin-top: auto positionne un élément en bas de son conteneur.

margin: auto. centre un élément horizontalement et verticalement
.container > p {margin: auto;}
concerne p s'il est la balise juste après container (descendant direct )
order Les valeurs de order agissent telles des pondérations : les éléments dont la valeur est
la plus forte se trouveront en premier
li:first-of-type { order: 1; }
Flex flex-grow : capacité pour un élément à s’étirer dans l’espace restant
mégapropriété flex-shrink : capacité pour un élément à se contracter si nécessaire
raccourcis de flex-basis : taille initiale de l’élément avant que l’espace restant ne soit distribué
… Par défaut, flex-grow: 0, flex-shrink: 1 et flex-basis: auto
= la taille minimale de leur contenu.

Références CSS
https://www.w3schools.com/cssref/

-4-
Source : openclassrooms.com/fr/courses/[…]apprenez-a-creer-votre-site-web-avec-html5-et-css3/[…]proprietes-css janv. 2019