Rappel de syntaxe type d'une règle CSS
/* #nomdela règle {
propriété: valeur de la propriété;
} */
Exemple:
#boite1 {
width: 400px;
height: 120px;
background: #CCC;
}
Rappel :
- # définit un id, un meme id ne doit etre utilisé qu'une seule fois sur la meme page
- . définit une class dont le nombre d'utilisation n'est pas limité
Propriétés de dimension
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| height | Définit la hauteur de l'élément | 1 |
| max-height | Définit la hauteur maximale de l'élément | 2 |
| min-height | Définit la hauteur minimale de l'élément | 2 |
| width | Définit la largeur de l'élément | 1 |
| max-width | Définit la largeur maximale de l'élément | 2 |
| min-width | Définit la largeur minimale de l'élément | 2 |
Propriétés d'arrière-plan
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| background | Indicatif définissant toutes les propriétés d'arrière plan dans une déclaration | 1 |
| background-color | Définit la couleur de fond d'un élément | 1 |
| background-image | Définit l'image de fond d'un élément | 1 |
| background-size | Définit la taille de l'image de fond d'un élément | 3 |
| background-repeat | Définit la façon dont l'image de fond sera répétée | 1 |
| background-attachement | Définit si une image d'arrière plan est fixe ou se "déroule" avec la page | 1 |
| background-position | Définit la position de départ d'une image de fond | 1 |
| background-origin | Définit la zone de positionnement de l'image de fond | 3 |
| background-clip | Définit le zone de peinture de l'arrière plan | 3 |
Propriétés des couleurs
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| opacity | Définit le niveau d'opacité de l'élément | 1 |
| color-profile | Permet la spécification d'un profil de couleur source autre que le défaut | 1 |
| rendering-intent | Permet la spécification d'une intention de rendu des couleurs autres que le profil par défaut | 1 |
Propriétés des bordures et contours
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| border | Définit l'ensemble des propriétés de bordure dans une déclaration | 1 |
| border-width | Définit la largeur des 4 bordures de l'élément | 1 |
| border-color | Définit la couleur des 4 bordures de l'élément | 1 |
| Border-style | Définit le style des 4 bordures de l'élément | 1 |
| border-top-width | Définit la largeur de la bordure supérieure de l'élément | 1 |
| border-top-color | Définit la couleur de la bordure supérieure de l'élément | 1 |
| border-top-style | Définit le style de la bordure supérieure de l'élément | 1 |
| border-bottom-width | Définit la largeur de la bordure inférieure de l'élément | 1 |
| border-bottom-color | Définit la couleur de la bordure inférieure de l'élément | 1 |
| border-bottom-style | Définit le style de la bordure inférieure de l'élément | 1 |
| border-left-width | Définit la largeur de la bordure gauche de l'élément | 1 |
| border-left-color | Définit la couleur de la bordure gauche de l'élément | 1 |
| border-left-style | Définit le style de la bordure gauche de l'élément | 1 |
| border-right-width | Définit la largeur de la bordure droite de l'élément | 1 |
| border-right-color | Définit la couleur de la bordure droite de l'élément | 1 |
| border-right-style | Définit le style de la bordure gauche de l'élément | 1 |
| border-radius | Définit l'arrondi des 4 coins de l'élément | 3 |
| border-top-left-radius | Définit l'arrondi du coin supérieur gauche de l'élément | 3 |
| border-top-right-radius | Définit l'arrondi du coin supérieur droit de l'élément | 3 |
| border-bottom-left-radius | Définit l'arrondi du coin inférieur gauche de l'élément | 3 |
| border-bottom-right-radius | Définit l'arrondi du coin inférieur droit de l'élément | 3 |
| outline | Définit toutes les propriétés de contour de l'élément | 2 |
| outline-color | Définit la couleur de contour de l'élément | 2 |
| outline-style | Définit le style du contour de l'élément | 2 |
| outline-width | Définit la largeur du contour de l'élément | 2 |
| border-image | Définit toutes les propriétés de frontière d'image de l'élément | 3 |
| border-image-outset | Définit la valeur de dépassement de l'image au-delà de l'élément | 3 |
| border-image-repeat | Définit le type de répétition de l'image-frontière | 3 |
| border-image-slice | Définit les décalages vers l'interieure de l'image frontière | 3 |
| border-image-source | Définit l'image utilisée en tant que frontière | 3 |
| border-image-width | Définit la largeur de l'image frontière | 3 |
| box-shadow | Définit un effet d'ombre sur l'élément | 3 |
Propriétés de positionnement
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| float | Définit si oui ou non une boite doit flotter | 1 |
| left | Définit la position de gauche d'un élément | 2 |
| right | Définit la position de droite d'un élément | 2 |
| top | Définit la position supérieure d'un élément | 2 |
| bottom | Définit la position inférieure d'un élément | 2 |
| visibility | Définit si oui ou non l'élément est visible | 2 |
| z-index | Définit l'ordre de priorité d'affichage de l'élément | 2 |
| overflow | Définit l'action en cas de débordement du contenu de l'élément | 2 |
| position | Définit le type de positionnement de l'élément | 2 |
| display | Définit la façon dont l'élément doit etre affiché | 1 |
| cursor | Définit le type de curseur à afficher | 2 |
| clear | Définit les cotés de l'éléments où d'autre éléments flotttants ne sont pas acceptés | 1 |
| clip | Définit la zone visible d'un élément | 2 |
Propriétés de police de caractère
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| font | Définit toute les propriétés de la police dans une déclaration | 1 |
| font-family | Définit le type de police du texte | 1 |
| font-size | Définit la taille de police du texte | 1 |
| font-style | Définit le style de police du texte | 1 |
| font-variant | Définit si oui ou non le texte est affiché dans une police small-caps | 1 |
| font-weight | Définit le poids de la police de caractère | 1 |
| @font-face | Permet d'utiliser une police de caractère indépendante | 3 |
| font-size-adjust | Permet la mise à l'echelle des polices de secours | 3 |
| font-stretch | Définit un étirement de la fonte (rarement pris en charge par les navigateurs) | 3 |
Propriétés de texte
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| color | Définit la couleur du texte | 1 |
| direction | Définit la direction d'écriture/lecture du texte | 2 |
| letter-spacing | Définit l'espace entre les caractères du texte | 1 |
| line-height | Définit la hauteur de ligne du texte | 1 |
| text-align | Définit l'alignement horizontal du texte | 1 |
| text-decoration | Définit la décoration ajoutée au texte | 1 |
| text-indent | Définit le retrait donné à la première ligne d'un bloc de texte | 1 |
| text-transform | Définit la mise en lettre capitale du texte | 1 |
| vertical-align | Définit l'alignement vertical de l'élément | 1 |
| text-justify | Définit la méthode de justification quand la propriété est appelée dans text-align | 3 |
| text-outline | Définit un contour de texte | 3 |
| text-overflow | définit l'action lorsque le texte déborde de l'élément conteneur | 3 |
| text-shadow | Définit une ombre au texte | 3 |
| text-wrap | Définit les règles de rupture de ligne pour le texte | 3 |
| white-space | Définit de quelle façon les espaces blancs sont gérés | 1 |
| word-spacing | Définit la valeur d'espacement en les mots d'un texte | 1 |
| word-break | Définit les règles de saut de ligne | 3 |
| word-wrap | Définit la règle de passage à la ligne pour les mots trop longs | 3 |
| hanqinq-punctuation | Définit les marques de pontuation | 3 |
| punctuation-trim | Définit l'espacement de la ponctuation | 3 |
Propriétés des liens hypertextes
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| target | Définit l'emplacement d'ouverture du lien | 3 |
| target-name | Définit le nom de la cible | 3 |
| target-new | Définit si le lien doit s'ouvrir dans une nouvelle fenetre ou onglet | 3 |
| target-position | Définit le placement des liens | 3 |
Propriétés de marge et rembourrage
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| margin | Définit les propriétés de marge d'un élément | 1 |
| margin-left | Définit la marge appliquée à gauche de l'élément | 1 |
| margin-right | Définit la marge appliquée à droite de l'élément | 1 |
| margin-top | Définit la marge appliquée au dessus de l'élément | 1 |
| margin-bottom | Définit la marge appliquée en dessous de l'élément | 1 |
| padding | Définit les propriétés d'espacement interne de l'élément | 1 |
| padding-left | Définit l'espacement interne gauche de l'élément | 1 |
| padding-right | Définit l'espacement interne droit de l'élément | 1 |
| padding-top | Définit l'espacement interne en haut de l'élément | 1 |
| padding-bottom | Définit l'espacement interne en bas de l'élément | 1 |
Propriétés de la zone
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| overflow-style | Définit la méthode de défilement des éléments débordants | 3 |
| overflow-x | Définit si il faut couper les zones droite et gauche en cas de débordement | 3 |
| overflow-y | Définit si il faut couper les zones haut et bas en cas de débordement | 3 |
| rotation | Définit le point de référence autour duquel l'élément doit pivoter | 3 |
| rotation-point | Définit un décalage du point de rotation (ref. angle supérieure gauche) | 3 |
Propriétés de la zone flexible
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| box-align | Définit l'alignement des éléments enfants d'une boite | 3 |
| box-direction | Définit la direction dans laquelle les éléments enfants d'une boite sont affichés | 3 |
| box-flex | Définit une proportionelle de taille entre les boites enfants au sein de l'élément | 3 |
| box-flex-group | Définit un groupe d'éléments flexibles | 3 |
| box-lines | Définit si les éléments ironts sur une nouvelles lignes chaque fois qu'il manquera de l'espace dans la boite parent |
3 |
| box-ordinal-group | Définit l'ordre d'affichage des éléments enfants dans une boite | 3 |
| box-orient | Définit le positionnement vertical ou horizontal des éléments enfants d'une boite | 3 |
| box-pack | Définit une règle de positionnement similaire entre la boite parent et les boites enfants | 3 |
Propriétes d'animation
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| @key-frame | Définit l'animation | 3 |
| animation | Définit l'ensemble des propriétés d'animation | 3 |
| animation-name | Définit un nom pour l'animation d'image | 3 |
| animation-duration | Définit le temps de cycle de l'animation | 3 |
| animation-timing-function | Définit la vitesse de l'animation | 3 |
| animation-delay | Définit le temps de demarrage de l'animation | 3 |
| animation-iteration-count | Définit le nombre de répétition de l'animation | 3 |
| animation-direction | Définit si l'animation doit etre jouer en sens inverse par cycles alternés | 3 |
| animation-play-state | Définit si l'animation est active ou en pause | 3 |
Propriétés de grille et multi-colonne
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| grid-columns | Définit la largeur de chaque colonne dans une grille | 3 |
| grid-rows | Définit la hauteur de chaque colonne dans une grille | 3 |
| columns | Définit les règles générales des colonnes | 3 |
| column-width | Définit la largeur des colonnes | 3 |
| column-span | Définit si la colonne doit s'étendre sur plusieurs éléments | 3 |
| column-rule | Définit l'ensemble des règles apliquées aux colonnes | 3 |
| column-rule-width | Définit la largeur de la règle entre les colonnes | 3 |
| column-rule-style | Définit le style de la règle entre les colonnes | 3 |
| column-rule-color | Définit la couleur de la règle entre les colonnes | 3 |
| column-gap | Définit l'écart entre les colonnes | 3 |
| column-fill | Définit la méthode de remplissage des colonnes | 3 |
| column-count | Définit en combien de colonnes l'élément doit etre divisé | 3 |
Propriétés des tableaux
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| table-layout | Définit l'algorithme de mise en page à utiliser pour une table (tableau) | 3 |
| border-spacing | Définit l'écart entre les cellule d'un tableau | 3 |
| caption-side | Définit l'emplacement d'une légende pour le tableau | 3 |
| empty-cells | Définit s'il faut ou non afficher les bordures et arrière plan des cellules vides du tabeau | 3 |
| border-collapse | Définit de quelle façon les bordures des cellules doivent etre affichées | 3 |
Propriétés de transformation 2D/3D
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| transform | Applique une transformation 2D ou 3D à l'élément | 3 |
| transform-origin | Modifie la position des éléments tranformés | 3 |
| transform-style | Définit le style de transformation appliqué à l'élément | 3 |
| perspective | Applique une transformation 2D ou 3D à l'élément | 3 |
| perspective-origine | Définit le point d'origine à appliquer pour la transformation | 3 |
| backface-visibility | Définit la visibilité de l'élément par rapport à sa position "face à l'écran" | 3 |
Propriétés de transition des CSS
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| transition | Définit les propriétés de transition entre les propriétés CSS | 3 |
| transition-property | Définit le nom de la propriété CSS à laquelle la transition est appliquée | 3 |
| transition-duration | Définit le temps de durée de la transition | 3 |
| transition-timing-function | Définit la courbe de vitesse de l'effet de transition (lissage de l'effet) | 3 |
| transition-delay | Définit le moment de départ de l'effet de transition | 3 |
Propriétés d'interface utilisateur
| Code | Description de la propriété | Type de CSS |
|---|---|---|
| appearance | Permet de faire apparaitre l'élément comme un élément standard | 3 |
| box-sizing | Permet de définir la facon dont certains éléments s'adaptent à la zone | 3 |
| icon | Permet de donner un équivalent d'icone à un élément | 3 |
| nav-index | Définit l'ordre de tabulation sur un élément | 3 |
| nav-down | Définit la navigation avec la flèche bas du clavier | 3 |
| nav-up | Définit la navigation avec la flèche haut du clavier | 3 |
| nav-right | Définit la navigation avec la flèche droite du clavier | 3 |
| nav-left | Définit la navigation avec la flèche gauche du clavier | 3 |
| outline-offset | Définit un contour exterieur autour de l'élément | 3 |
| resize | Définit si un élément est redimensionnable par l'utilisateur | 3 |