Mémento CSS

structure

Structure

Une feuille de style CSS permet de redéfinir les attributs d’une balise ou d’un block (div ou span) en lui attribuant un identifiant unique ou une classe de style.

Exemple :

 p : {color:#FFF;}

#menu {
          width:800px;
          height:75px;
      }

.titre {
          font-size:24px;
          color:#DDD;
}

Dans cet exemple, la balise p est définie avec une couleur #FFF
L’identifiant menu est défini avec une largeur de 800px et une hauteur de 75px
La classe de style titre est définie par une taille de texte de 24px et une couleur #DDD

Le style d’un identifiant est précédé d’un #

le style d’une classe est précédé d’un .

mise en forme du texte

Propriétés de mise en forme du texte

Propriété Description
font-family Nom de police
@font-face Police personnalisée
font-size Taille du texte
font-weight Gras
font-style Italique
text-decoration Soulignement, ligne au-dessus, barré ou clignotant
font-variant Petites capitales
text-transform Capitales
font Super propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family.
text-align Alignement horizontal
vertical-align Alignement vertical (cellules de tableau ou éléments inline-block uniquement)
line-height Hauteur de ligne
text-indent Alinéa
white-space Césure
word-wrap Césure forcée
text-shadow Ombre de texte
couleur et de fond

Propriétés de couleur et de fond

Propriété Description
color Couleur du texte
background-color Couleur de fond
background-image Image de fond
background-attachment Fond fixe
background-repeat Répétition du fond
background-position Position du fond
background Super propriété du fond. Combine : background-image, background-repeat, background-attachment, background-position
opacity Transparence
boites

Propriétés des boîtes

Propriété Description
width Largeur
height Hauteur
min-width Largeur minimale
max-width Largeur maximale
min-height Hauteur minimale
max-height Hauteur maximale
margin-top Marge en haut
margin-left Marge à gauche
margin-right Marge à droite
margin-bottom Marge en bas
margin Super-propriété de marge. Combine : margin-top, margin-right, margin-bottom, margin-left.
padding-left Marge intérieure à gauche
padding-right Marge intérieure à droite
padding-bottom Marge intérieure en bas
padding Super-propriété de marge intérieure. Combine : padding-top, padding-right, padding-bottom, padding-left.
border-width Épaisseur de bordure
border-color Couleur de bordure
border-style Type de bordure
border Super-propriété de bordure. Combine border-width, border-color, border-style. Existe aussi en version border-top, border-right, border-bottom, border-left.
border-radius Bordure arrondie
box-shadow Ombre de boîte
positionnement

Propriétés de positionnement et d’affichage<

Propriété Description
display Type d’élément (block, inline, inline-block, none…)
visibility Visibilité
clip Affichage d’une partie de l’élément
overflow Comportement en cas de dépassement
float Flottant
clear Arrêt d’un flottant
position Positionnement
top Position par rapport au haut
bottom Position par rapport au bas
left Position par rapport à la gauche
right Position par rapport à la droite
z-index Ordre d’affichage en cas de superposition
listes

Propriétés des listes

Propriété Description
list-style-type Type de liste
list-style-position Position en retrait
list-style-image Puce personnalisée
list-style Super-propriété de liste. Combine list-style-type, list-style-position, list-style-image.
tableaux

Propriétés des tableaux

Propriété Description
border-collapse Fusion des bordures
empty-cells Affichage des cellules vides
caption-side Position du titre du tableau
Liens

Mémento CSS en pdf

Laisser une réponse

Votre adresse email ne sera pas publiéeLes champs requis sont surlignés *

*