oujood.com

Référence, Guide des Propriétés CSS

Cette référence CSS fournit un index des propriétés, pseudo-classes et pseudo-éléments expliquées avec des exemples, vous pouvez la mettre dans vos favoris pour y revenir chaque fois que vous en avez besoin.
Cette liste de référence des propriétés CSS peut vous servir comme aide mémoire.
Nous vous conseillons de la mettre en favoris .
Voici la liste des propriétés CSS telles que décrites dans les documents de la norme
CSS (http://www.w3.org/TR/1998/REC-CSS2-19980512/propidx.html).
Ceci incorpore les propriétés déjà présentes en CSS 1 et css2.
La colonne CSS indique dans quelle version de CSS la propriété est défini (CSS1, CSS2 ou css3).

chercher |

Propriétés CSS

A

PropriétéDescription
accent-color Spécifie une couleur d'accentuation pour les contrôles de l'interface utilisateur.
align-content Spécifie l'alignement des lignes à l'intérieur d'un conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible.
align-items Spécifie l'alignement des éléments à l'intérieur d'un conteneur flexible.
align-self Spécifie l'alignement des éléments sélectionnés à l'intérieur d'un conteneur flexible.
all Réinitialise toutes les propriétés (sauf unicode-bidi et direction)
animation Une propriété raccourcie pour toutes les propriétés de l'animation-*.
animation-delay Spécifie un délai pour le début d'une animation
animation-directionIndique si une animation doit être lue en avant, en arrière ou en cycles alternés.
animation-duration Spécifie la durée d'un cycle d'animation.
animation-fill-mode Spécifie un style pour l'élément lorsque l'animation n'est pas jouée (avant qu'elle ne commence, après qu'elle se termine ou les deux).
animation-iteration-count Spécifie le nombre de fois qu'une animation doit être jouée.
animation-name Spécifie un nom pour l'animation @keyframes.
animation-play-state Indique si l'animation est en cours ou en pause.
animation-timing-function Spécifie la courbe de vitesse d'une animation
aspect-ratio Spécifie le rapport d'aspect préféré d'un élément

B

PropriétéDescription
backdrop-filter Définit un effet graphique sur la zone située derrière un élément.
backface-visibility Définit si la face arrière d'un élément doit être visible ou non lorsqu'elle fait face à l'utilisateur.
backgroundUne propriété raccourcie pour toutes les propriétés background-*.
background-attachment Indique si l'image d'arrière-plan défile avec le reste de la page ou si elle est fixe.
background-blend-mode Spécifie le mode de mélange de chaque couche d'arrière-plan (couleur/image).
background-clip Définit la distance à laquelle l'arrière-plan (couleur ou image) doit s'étendre dans un élément.
background-color Spécifie la couleur d'arrière-plan d'un élément
background-image Spécifie une ou plusieurs images d'arrière-plan pour un élément
background-origin Spécifie la position d'origine d'une image d'arrière-plan
background-position Spécifie la position d'une image d'arrière-plan
background-position-x Spécifie la position d'une image d'arrière-plan sur l'axe des x
background-position-y Spécifie la position d'une image d'arrière-plan sur l'axe des y
background-repeat Définit si/comment une image d'arrière-plan sera répétée
background-size Spécifie la taille des images d'arrière-plan
borderUne propriété raccourcie pour border-width, border-style et border-color.
border-bottom Une propriété raccourcie pour border-bottom-width, border-bottom-style et border-bottom-color
border-bottom-color Définit la couleur de la bordure inférieure
border-bottom-left-radius Définit le rayon de la bordure du coin inférieur gauche.
border-bottom-right-radius Définit le rayon de la bordure du coin inférieur droit.
border-bottom-style Définit le style de la bordure inférieure
border-bottom-width Définit la largeur de la bordure inférieure
border-collapse Définit si les bordures de table doivent être réduites en une seule bordure ou séparées.
border-color Définit la couleur des quatre bordures
border-image Une propriété raccourcie pour toutes les propriétés border-image-*.
border-image-outset Spécifie l'étendue de la zone de l'image de la bordure au-delà du cadre de la bordure.
border-image-repeat Indique si l'image de la bordure doit être répétée, arrondie ou étirée.
border-image-slice Spécifie comment découper l'image de bordure
border-image-source Indique le chemin d'accès à l'image à utiliser comme bordure.
border-image-width Spécifie la largeur de l'image de la bordure
border-left Une propriété raccourcie pour toutes les propriétés border-left-*.
border-left-color Définit la couleur de la bordure gauche
border-left-style Définit le style de la bordure gauche
border-left-width Définit la largeur de la bordure gauche
border-radius Une propriété raccourcie pour les quatre propriétés border-*-radius
border-right Une propriété raccourcie pour toutes les propriétés border-right-*.
border-right-color Définit la couleur de la bordure droite
border-right-style Définit le style de la bordure droite
border-right-width Définit la largeur de la bordure droite
border-spacing Définit la distance entre les bordures des cellules adjacentes
border-style Définit le style des quatre bordures
border-top Une propriété raccourcie pour border-top-width, border-top-style et border-top-color.
border-top-color Définit la couleur de la bordure supérieure
border-top-left-radius Définit le rayon de la bordure du coin supérieur gauche.
border-top-right-radius Définit le rayon de la bordure du coin supérieur droit
border-top-style Définit le style de la bordure supérieure
border-top-width Définit la largeur de la bordure supérieure
border-width Définit la largeur des quatre bordures
bottom Définit la position de l'élément, à partir du bas de son élément parent
box-decoration-break Définit le comportement de l'arrière-plan et de la bordure d'un élément au saut de page ou, pour les éléments en ligne, au saut de ligne.
box-shadow Attache une ou plusieurs ombres à un élément
box-sizing Définit la manière dont la largeur et la hauteur d'un élément sont calculées : doivent-elles inclure ou non le remplissage et les bordures ?
break-after Indique si un saut de page, de colonne ou de région doit se produire après l'élément spécifié.
break-before Indique si un saut de page, de colonne ou de région doit se produire avant l'élément spécifié.
break-inside Utilisé pour éviter le saut de page, de colonne ou de région de se produire à l'intérieur de l'élément spécifié.

C

PropriétéDescription
caption-side Spécifie le placement de la légende d'un tableau
caret-color Spécifie la couleur du curseur (caret) dans les entrées, les zones de texte ou tout élément modifiable.
@charset Spécifie le codage des caractères utilisé dans la feuille de style.
clear Spécifie ce qui doit se passer avec l'élément qui se trouve à côté d'un élément flottant.
clip Clipser un élément positionné de manière absolue
color Définit la couleur du texte
column-count Spécifie le nombre de colonnes dans lesquelles un élément doit être divisé
column-fill Spécifie comment remplir les colonnes, équilibrées ou non
column-gap Spécifie l'espace entre les colonnes
column-rule Une propriété raccourcie pour toutes les propriétés column-rule-*.
column-rule-color Spécifie la couleur de la règle entre les colonnes
column-rule-style Spécifie le style de la règle entre les colonnes
column-rule-width Spécifie la largeur de la règle entre les colonnes
column-span Spécifie le nombre de colonnes sur lesquelles un élément doit s'étendre.
column-width Spécifie la largeur de la colonne
columns Une propriété raccourcie pour column-width et column-count.
content Utilisée avec les pseudo-éléments :before et :after pour insérer du contenu généré.
counter-increment Augmente ou diminue la valeur d'un ou de plusieurs compteurs CSS.
counter-reset Crée ou réinitialise un ou plusieurs compteurs CSS.
cursor Spécifie le curseur de la souris à afficher lorsque vous pointez sur un élément.

D

PropriétéDescription
direction Spécifie le sens du texte/le sens de l'écriture
display Spécifie comment un certain élément HTML doit être affiché

E

PropriétéDescription
empty-cells Indique s'il faut ou non afficher les bordures et l'arrière-plan sur les cellules vides d'un tableau.

F

PropriétéDescription
filter Définit les effets (par exemple, le flou ou le décalage des couleurs) sur un élément avant que celui-ci ne soit affiché.
flex Une propriété raccourcie pour les propriétés flex-grow, flex-shrink et flex-basis.
flex-basis Spécifie la longueur initiale d'un élément flexible
flex-direction Spécifie la direction des éléments flexibles
flex-flow Une propriété raccourcie pour les propriétés flex-direction et flex-wrap.
flex-grow Spécifie l'ampleur de la croissance de l'élément par rapport aux autres éléments
flex-shrink Spécifie de combien l'élément va rétrécir par rapport au reste
flex-wrap Indique si les éléments flexibles doivent être enveloppés ou non.
float Indique si un élément doit flotter à gauche, à droite ou pas du tout.
font Une propriété raccourcie pour les propriétés font-style, font-variant, font-weight, font-size/line-height et font-family.
@font-face Une règle qui permet aux sites Web de télécharger et d'utiliser des polices autres que les polices "sûres pour le Web".
font-family Spécifie la famille de polices pour le texte
font-feature-settings Permet de contrôler les fonctions typographiques avancées des polices OpenType.
@font-feature-values Permet aux auteurs d'utiliser un nom commun dans font-variant-alternate pour une fonctionnalité activée différemment dans OpenType
font-kerning Contrôle l'utilisation des informations de crénage (comment les lettres sont espacées).
font-language-override Contrôle l'utilisation des glyphes spécifiques à une langue dans une police de caractères.
font-size Spécifie la taille de la police du texte
font-size-adjust Préserve la lisibilité du texte en cas d'abandon de la police.
font-stretch Sélectionne une police normale, condensée ou étendue dans une famille de polices.
font-style Spécifie le style de police du texte
font-synthesis Contrôle les polices manquantes (gras ou italique) qui peuvent être synthétisées par le navigateur.
font-variant Indique si un texte doit être affiché dans une police à petites capitales ou non.
font-variant-alternates Contrôle l'utilisation des glyphes alternatifs associés aux noms alternatifs définis dans @font-feature-values.
font-variant-caps Contrôle l'utilisation des glyphes alternatifs pour les lettres majuscules.
font-variant-east-asian Contrôle l'utilisation de glyphes alternatifs pour les écritures d'Asie de l'Est (par exemple, le japonais et le chinois).
font-variant-ligatures Contrôle les ligatures et les formes contextuelles utilisées dans le contenu textuel des éléments auxquels il s'applique.
font-variant-numeric Contrôle l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.
font-variant-position Contrôle l'utilisation de glyphes alternatifs de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base de la police.
font-weight Spécifie le poids d'une police

G

PropriétéDescription
gap Une propriété raccourcie pour les propriétés row-gap et column-gap.
grid Une propriété raccourcie pour les propriétés grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-colrows, grid-auto-columns et grid-auto-flow.
grid-area Spécifie un nom pour l'élément de la grille, ou cette propriété est une propriété raccourcie pour les propriétés grid-row-start, grid-column-start, grid-row-end et grid-column-end.
grid-auto-columns Spécifie une taille de colonne par défaut
grid-auto-flow Indique comment les éléments placés automatiquement sont insérés dans la grille.
grid-auto-rows Spécifie une taille de ligne par défaut
grid-column Une propriété raccourcie pour les propriétés grid-column-start et grid-column-end.
grid-column-end Indique où terminer l'élément de la grille
grid-column-gap Spécifie la taille de l'espace entre les colonnes
grid-column-start Spécifie le point de départ de l'élément de la grille
grid-gap Une propriété raccourcie pour les propriétés grid-row-gap et grid-column-gap.
grid-row Une propriété raccourcie pour les propriétés grid-row-start et grid-row-end.
grid-row-end Spécifie où terminer l'élément de la grille
grid-row-gap Spécifie la taille de l'espace entre les rangées.
grid-row-start Spécifie le point de départ de l'élément de la grille
grid-template Une propriété raccourcie pour les propriétés grid-template-rows, grid-template-columns et grid-areas.
grid-template-areasIndique comment afficher les colonnes et les lignes, à l'aide d'éléments de grille nommés.
grid-template-columns Spécifie la taille des colonnes et le nombre de colonnes dans une disposition de grille.
grid-template-rows Spécifie la taille des lignes dans une disposition de grille

H

PropriétéDescription
hanging-punctuation Indique si un caractère de ponctuation peut être placé en dehors du cadre de la ligne.
height Définit la hauteur d'un élément
hyphens Définit comment diviser les mots pour améliorer la mise en page des paragraphes.

I

PropriétéDescription
image-rendering Spécifie le type d'algorithme à utiliser pour la mise à l'échelle des images
@import Permet d'importer une feuille de style dans une autre feuille de style
inline-sizeSpécifie la taille d'un élément dans le sens de la ligne.
inset Spécifie la distance entre un élément et l'élément parent.
inset-blockSpécifie la distance entre un élément et l'élément parent dans la direction du bloc.
inset-block-end Spécifie la distance entre la fin d'un élément et l'élément parent dans la direction du bloc.
inset-block-start Spécifie la distance entre le début d'un élément et l'élément parent dans la direction du bloc.
inset-inline Spécifie la distance entre un élément et l'élément parent dans le sens de la ligne.
inset-inline-end Spécifie la distance entre la fin d'un élément et l'élément parent dans le sens de la ligne.
inset-inline-start Spécifie la distance entre le début d'un élément et l'élément parent dans le sens de la ligne.
isolation Définit si un élément doit créer un nouveau contenu d'empilement

J

PropriétéDescription
justify-content Spécifie l'alignement entre les éléments à l'intérieur d'un conteneur flexible lorsque les éléments n'utilisent pas tout l'espace disponible.
justify-items Utilisé sur le conteneur de la grille. Spécifie l'alignement des éléments de la grille dans le sens de la ligne.
justify-self utilisé sur l'élément de la grille. Spécifie l'alignement de l'élément de la grille dans le sens de la ligne.

K

PropriétéDescription
@keyframes La propriété CSS @keyframes est utilisée pour créer des animations en CSS. Elle spécifie le code de l'animation

L

PropriétéDescription
left Spécifie la position gauche d'un élément positionné
letter-spacing Augmente ou diminue l'espace entre les caractères d'un texte
line-break Spécifie si/comment rompre les lignes
line-height Définit la hauteur de la ligne
list-style Définit toutes les propriétés d'une liste en une seule déclaration
list-style-image Spécifie une image comme marqueur de l'élément de la liste
list-style-position Spécifie la position des marqueurs d'éléments de liste (puces)
list-style-type Spécifie le type de marqueur d'élément de liste

M

PropriétéDescription
margin Définit toutes les propriétés de la marge en une seule déclaration
margin-block Définit les marges supérieure et inférieure d'un élément en block
margin-block-end Définit la marge inférieure d'un élément
margin-block-start Définit la marge supérieure d'un élément
margin-bottom Définit la marge inférieure d'un élément
margin-inline Définit les marges de gauche et droite d'un élément dans le sens de la ligne.
margin-inline-end Définit la marge de la fin d'un élément dans le sens de la ligne.
margin-inline-start Définit la marge du début d'un élément dans le sens de la ligne.
margin-left Définit la marge gauche d'un élément
margin-right Définit la marge droite d'un élément
margin-top Définit la marge supérieure d'un élément
mask Cache des parties d'un élément en masquant ou en découpant une image à des endroits spécifiques.
mask-clip Spécifie la zone de masque
mask-composite Représente une opération de composition utilisée sur la couche de masque actuelle avec les couches de masque situées en dessous.
mask-image Spécifie une image à utiliser comme couche de masque pour un élément.
mask-mode Spécifie si l'image de la couche de masque est traitée comme un masque de luminance ou comme un masque alpha.
mask-origin Spécifie la position d'origine (la zone de position du masque) d'une image de couche de masque.
mask-position Définit la position de départ d'une image de couche de masque (par rapport à la zone de position du masque).
mask-repeat Spécifie comment l'image de la couche de masque est répétée
mask-size Spécifie la taille d'une image de couche de masque
mask-type Indique si un élément SVG <mask> est traité comme un masque de luminance ou comme un masque alpha.
max-height Définit la hauteur maximale d'un élément
max-width Définit la largeur maximale d'un élément
@media Définit les règles de style pour différents types de médias/appareils/tailles.
min-height Définit la hauteur minimale d'un élément
min-width Définit la largeur minimale d'un élément
mix-blend-mode Indique comment le contenu d'un élément doit se fondre dans l'arrière-plan de son parent direct.

O

PropriétéDescription
object-fit Spécifie comment le contenu d'un élément remplacé doit s'adapter à la boîte établie par sa hauteur et sa largeur utilisées.
object-position Spécifie l'alignement de l'élément remplacé à l'intérieur de son cadre.
offset Il s'agit d'une raccourcie qui spécifie comment animer un élément le long d'un chemin.
offset-anchor La propriété offset-anchor spécifie le point d'un élément à fixer le long d'une trajectoire définie par la propriété offset-path.
offset-distance Spécifie la position d'un élément animé le long d'une trajectoire
offset-path Spécifie le chemin le long duquel un élément est animé
offset-rotate Spécifie la rotation d'un élément lorsqu'il est animé le long d'une trajectoire
opacity Définit le niveau d'opacité d'un élément
order Définit l'ordre de l'élément flexible, par rapport aux autres éléments
orphans Définit le nombre minimum de lignes qui doivent être laissées au bas d'une page ou d'une colonne.
outline Une propriété raccourcie pour les propriétés outline-width, outline-style et outline-color.
outline-color Définit la couleur d'un contour
outline-offset Décale un contour et le dessine au-delà de la bordure.
outline-style Définit le style d'un contour
outline-width Définit la largeur d'un contour
overflow Spécifie ce qui se passe si le contenu dépasse le cadre d'un élément.
overflow-wrap Indique si le navigateur peut ou non rompre les lignes contenant de longs mots, si ceux-ci dépassent le conteneur.
overflow-x Indique s'il faut ou non écrêter les bords gauche et droit du contenu, s'il dépasse la zone de contenu de l'élément.
overflow-y Indique s'il faut ou non couper les bords supérieur et inférieur du contenu, s'il déborde de la zone de contenu de l'élément.

P

PropriétéDescription
padding Une propriété raccourcie pour toutes les propriétés padding-*.
padding-bottom Définit le remplissage inférieur d'un élément
padding-left Définit le remplissage gauche d'un élément
padding-right Définit le remplissage à droite d'un élément
padding-top Définit le remplissage supérieur d'un élément
page-break-after Définit le comportement du saut de page après un élément
page-break-before Définit le comportement du saut de page avant un élément
page-break-inside Définit le comportement du saut de page à l'intérieur d'un élément
paint-order Définit l'ordre dans lequel un élément SVG ou un texte est peint.
perspective Donne de la perspective à un élément positionné en 3D.
perspective-origin Définit la position à laquelle l'utilisateur regarde l'élément positionné en 3D.
pointer-events Définit si un élément réagit ou non aux événements du pointeur.
position Spécifie le type de méthode de positionnement utilisé pour un élément (statique, relatif, absolu ou fixe).

Q

Propriété Description
quotes Définit le type de guillemets pour les citations intégrées.

R

PropriétéDescription
resize contrôle si (et comment) un élément peut être redimensionné par l'utilisateur en cliquant et en faisant glisser le coin inférieur droit de l'élément.
right Spécifie la position droite d'un élément positionné
rotate Spécifie la rotation d'un élément
row-gap Spécifie l'espace entre les lignes de la grille

S

PropriétéDescription
scale Spécifie la taille d'un élément en le mettant à l'échelle vers le haut ou vers le bas.
scroll-behavior Indique si la position de défilement dans une boîte de défilement doit être animée en douceur, au lieu d'un saut direct.
shape outside Contrôle la façon dont le contenu s'enroule autour du cadre d'un élément flottant.

T

PropriétéDescription
tab-size Spécifie la largeur d'un caractère de tabulation
table-layout Définit l'algorithme utilisé pour disposer les cellules, les lignes et les colonnes d'un tableau.
text-align Spécifie l'alignement horizontal du texte
text-align-last Décrit l'alignement de la dernière ligne d'un bloc ou d'une ligne juste avant un saut de ligne forcé lorsque l'alignement du texte est "justifié".
text-decoration Spécifie la décoration ajoutée au texte
text-decoration-color Spécifie la couleur de la décoration du texte
text-decoration-line Spécifie le type de ligne dans une décoration de texte
text-decoration-style Spécifie le style de la ligne dans une décoration de texte
text-decoration-thickness Spécifie l'épaisseur de la ligne de la décoration
text-emphasis Applique des marques d'accentuation au texte
text-indent Spécifie l'indentation de la première ligne d'un bloc de texte.
text-justify Spécifie la méthode de justification utilisée lorsque text-align est "justify".
text-orientation Définit l'orientation des caractères dans une ligne
text-overflow Indique ce qui doit se passer lorsque le texte déborde de l'élément qui le contient.
text-shadow Ajoute une ombre au texte
text-transform Contrôle la capitalisation du texte
text-underline-position Spécifie la position du soulignement qui est défini à l'aide de la propriété text-decoration
top Spécifie la position supérieure d'un élément positionné
transform Applique une transformation 2D ou 3D à un élément
transform-origin Permet de modifier la position des éléments transformés
transform-style Spécifie la façon dont les éléments imbriqués sont rendus dans l'espace 3D.
transition Une propriété raccourcie pour toutes les propriétés transition-*.
transition-delay Spécifie le moment où l'effet de transition commencera
transition-duration Indique le nombre de secondes ou de millisecondes nécessaires à la réalisation d'un effet de transition.
transition-property Spécifie le nom de la propriété CSS pour laquelle l'effet de transition a été créé.
transition-timing-function Spécifie la courbe de vitesse de l'effet de transition
translateSpécifie la position d'un élément

U

PropriétéDescription
unicode-bidi Utilisé avec la propriété direction pour définir ou renvoyer si le texte doit être remplacé pour prendre en charge plusieurs langues dans le même document.
user-select Indique si le texte d'un élément peut être sélectionné.

V

PropriétéDescription
vertical-align Définit l'alignement vertical d'un élément
visibility Indique si un élément est visible ou non

W

PropriétéDescription
white-space Spécifie la façon dont l'espace blanc à l'intérieur d'un élément est géré.
widows Définit le nombre minimum de lignes qui doivent être laissées en haut d'une page ou d'une colonne.
width Définit la largeur d'un élément
word-break Indique comment les mots doivent être coupés lorsqu'ils atteignent la fin d'une ligne.
word-spacing Augmente ou diminue l'espace entre les mots dans un texte.
word-wrap Permet de casser les mots longs et insécables et de les faire passer à la ligne suivante.
writing-mode Indique si les lignes de texte sont disposées horizontalement ou verticalement.

Z

PropriétéDescription
z-index Définit l'ordre de la pile d'un élément positionné

Pseudo-classes/éléments de CSS (CSS Pseudo-classes/elements)

Propriété Description
:activeAjoute un style à un élément qui est activé
:afterAjoute le contenu après un élément
:beforeAjoute le contenu avant un élément
:first-childAjoute un style à un élément qui est le premier enfant d'un autre élément
:first-letterAjoute un style pour le premier caractère d'un texte
:first-lineAjoute un style à la première ligne d'un texte
:focusAjoute un style à un élément qui a le focus clavier
:hoverAjoute un style à un élément lorsque vous passez la souris dessus
:langAjoute un style à un élément avec un attribut lang spécifiques
:linkAjoute un style à un lien non visité
:visitedAjoute un style à un lien visité
Par carabde 10 mars 2014

chapitre précédent     chapitre suivant



Voir aussi nos tutoriel :

fonction echo

Affiche une chaîne de caractères

SVG Introduction

SVG Introduction :   Qu’est ce que le SVG et quels sont ses avantages ?

Tutorial XPATH

Tutorial XPATH