57 0 57KB
Object 1
Mémento des propriétés CSS
(par OPENCLASSROOMS)
Propriétés de mise en forme du texte Propriété font-family @font-face font-size font-weight font-style text-decoration font-variant text-transform
Valeurs (exemples) police1, police2, police3, serif, sans-serif, monospace Nom et source de la police 1.3em, 16px, 120%... bold, normal italic, oblique, normal underline, overline, linethrough, blink, none small-caps, normal capitalize, lowercase, uppercase
font
-
text-align
left, center, right, justify
vertical-align
baseline, middle, sub, super, top, bottom
line-height text-indent white-space word-wrap text-shadow
18px, 120%, normal... 25px pre, nowrap, normal break-word, normal 5px 5px 2px blue (horizontale, verticale, fondu, couleur)
Description Nom de police Police personnalisée Taille du texte Gras Italique Soulignement, ligne au-dessus, barré ou clignotant Petites capitales Capitales Super propriété de police. Combine : font-weight, fontstyle, font-size, font-variant, font-family. Alignement horizontal Alignement vertical (cellules de tableau ou éléments inline-block uniquement) Hauteur de ligne Alinéa Césure Césure forcée Ombre de texte
Propriétés de couleur et de fond Propriété color background-color background-image background-attachment background-repeat background-position
Valeurs (exemples) nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,trans parence), #CF1A20... Identique à color url('image.png') fixed, scroll repeat-x, repeat-y, norepeat, repeat (x y), top, center, bottom, left, right
background
-
opacity
0.5
Description Couleur du texte Couleur de fond Image de fond Fond fixe Répétition du fond Position du fond Super propriété du fond. Combine : background-image, background-repeat, backgroundattachment, background-position Transparence
Propriétés de positionnement et d'affichage Propriété display visibility clip
Valeurs (exemples) block, inline, inline-block, table, table-cell, none... visible, hidden rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche)
overflow
auto, scroll, visible, hidden
float clear position top bottom left right
left, right, none left, right, both, none relative, absolute, static 20px 20px 20px 20px
z-index
10
Description Type d'élément (block, inline, inline-block, none…) Visibilité Affichage d'une partie de l'élément Comportement en cas de dépassement Flottant Arrêt d'un flottant Positionnement Position par rapport au haut Position par rapport au bas Position par rapport à la gauche Position par rapport à la droite Ordre d'affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres.
Propriétés des boîtes Propriété width height min-width max-width min-height max-height margin-top margin-left margin-right margin-bottom
Valeurs (exemples) 150px, 80%... 150px, 80%... 150px, 80%... 150px, 80%... 150px, 80%... 150px, 80%... 23px 23px 23px 23px
margin
23px 5px 23px 5px (haut, droite, bas, gauche)
padding-left padding-right padding-bottom padding-top
23px 23px 23px 23px
padding
23px 5px 23px 5px (haut, droite, bas, gauche)
border-width
border-color
border-style
3px nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,tr ansparence), #CF1A20... solid, dotted, dashed, double, groove, ridge, inset, outset
border
3px solid black
border-radius
5px 6px 6px 0px black (horizontale, verticale, fondu, couleur)
box-shadow
Description Largeur Hauteur Largeur minimale Largeur maximale Hauteur minimale Hauteur maximale Marge en haut Marge à gauche Marge à droite Marge en bas Super-propriété de marge. Combine : margin-top, marginright, margin-bottom, marginleft. Marge intérieure à gauche Marge intérieure à droite Marge intérieure en bas Marge intérieure en haut Super-propriété de marge intérieure. Combine : padding-top, paddingright, padding-bottom, paddingleft. Épaisseur de bordure
Couleur de bordure
Type de bordure Super-propriété de bordure. Combine border-width, bordercolor, border-style. Existe aussi en version bordertop, border-right, border-bottom, border-left. Bordure arrondie Ombre de boîte
Propriétés des listes Propriété
list-style-position list-style-image
Valeurs (exemples) disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none inside, outside url('puce.png')
list-style
-
list-style-type
Description Type de liste Position en retrait Puce personnalisée Super-propriété de liste. Combine list-style-type, liststyle-position, list-styleimage.
Propriétés des tableaux Propriété border-collapse empty-cells caption-side
Valeurs (exemples) collapse, separate hide, show bottom, top
Description Fusion des bordures Affichage des cellules vides Position du titre du tableau
Autres propriétés Propriété cursor
Valeurs (exemple) crosshair, default, help, move, pointer, progress, text, wait, e-resize, neresize, auto...
Description Curseur de souris