Web

CSS

Recommandations :


TEXTES

Changer la  police
font-family : [police1, police2, police3], [serif, sans-serif, monospace};
Police personnalisée
@font-face
Taille du texte
font-size: [1.3em, 16px, 120%…] ;
Gras
font-weight: [bold, normal] ;
Italique
font-style : [italic, oblique, normal];
Soulignement, ligne au-dessus, barré ou clignotant
text-decoration : [underline, overline, line-through, blink, none];
Petites capitales
font-variant : [small-caps, normal] ;
Capitales
text-transform : [capitalize, lowercase, uppercase] ;
Alignement horizontal
text-align : [left, center, right, justify] ;
Alignement vertical (cellules de tableau ou éléments inline-block uniquement)
vertical-align : [baseline, middle, sub, super, top, bottom];
Hauteur de ligne
line-height : [18px, 120%, normal…];
Alinéa
text-indent : [25px];
Césure
white-space : [pre, nowrap, normal];
Césure forcée
word-wrap : [break-word, normal]:
Ombre de texte (horizontale, verticale, fondu, couleur)
text-shadow : [5px 5px 2px blue];

COULEURS

Changer la couleur de texte
color : [nom, #couleur hexadécimale / rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence)];
Couleur de fond
background-color: [nom, #couleur hexadécimale / rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence)];
Image de fond
background-image : url(‘image.png’) ;
Fond fixe
background-attachment : [fixed, scroll];
Répétition du fond
background-repeat : [repeat-x, repeat-y, no-repeat, repeat];
Position du fond
background-position : [(x y), top, center, bottom, left, right];
Transparence

opacity : [0.5];


TABLEAUX

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

CURSEUR SOURIS

Curseur de souris
cursor : [crosshair, default, help, move, pointer, progress, text, wait, e-resize,
ne-resize, auto…];


BOITES

Largeur
width : [150px, 80%…];
Hauteur
height : [150px, 80%…];
Largeur minimale
min-width : [150px, 80%…];
Largeur maximale
max-width : [150px, 80%…];
Hauteur minimale
min-height : [150px, 80%…];
Hauteur maximale
max-height : [150px, 80%…];
Marge extérieur en haut
margin-top : [23px];
 
Marge extérieur à gauche
margin-left :  [23px];
 
Marge extérieur à droite
margin-right : [23px];
 
Marge extérieur en bas
margin-bottom : 23px ;
 
Marge extérieur (haut, droite, bas, gauche)
margin : 23px 5px 23px 5px
Marge intérieure à gauche
padding-left : 23px;
 
Marge intérieure à droite
padding-right : 23px;
 
Marge intérieure en bas
padding-bottom : 23px
 
Marge intérieure en haut
padding-top : 23px
 
Marge intérieure (haut, droite, bas, gauche)
padding : 23px 5px 23px 5px;
Épaisseur de bordure
border-width : 3px
 
Couleur de bordure
border-color  : [nom, #couleur hexadécimale / rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence)];
Type de bordure
border-style : [solid, dotted, dashed, double, groove, ridge, inset, outset];
 
Bordure (taille, type, couleur)
border : 3px solid black
Bordure arrondie
border-radius :5px
 
Ombre de boîte (horizontale, verticale, fondu, couleur)
box-shadow : 6px 6px 0px black


POSITION

Type d’élément (block, inline, inline-block, none…)
display : [block, inline, inline-block, table, table-cell, none… ]
Visibilité
visibility : [visible, hidden];
Affichage d’une partie de l’élément rect (haut, droite, bas, gauche)
clip : rect (0px, 60px, 30px, 0px)
Comportement en cas de dépassement
overflow : [auto, scroll, visible, hidden];
Flottant
float : [left, right, none];
Arrêt d’un flottant
clear : [left, right, both, none];
Positionnement
position : [relative, absolute, static];
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 en cas de superposition.
z-index : 10
La plus grande valeur est affichée par-dessus les
autres.

LISTES

Type de liste
list-style-type : [disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none];
Position en retrait
list-style-position : [inside, outside];
Puce personnalisée
list-style-image : url(‘puce.png’);

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.