Memento Css [PDF]

Zitiervorschau

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