CSS Manuel de référence


NoteLe manuel de référence CSS sur Example Tutorial a été testé dans tous les principaux navigateurs.


Propriétés CSS

Groupe de propriétés CSS :

La colonne « CSS » indique dans quelle version de CSS la propriété est définie (CSS1, CSS2 ou CSS3).

Propriétés d'animation

Propriété Description CSS
@keyframes Définit une animation. Le nom d'animation défini par @keyframes est utilisé par animation-name. 3
animation Propriété raccourcie. Récupère ou définit les effets d'animation appliqués à l'objet. 3
animation-name Récupère ou définit le nom de l'animation appliqué à l'objet. Il doit être utilisé avec la règle @keyframes, car le nom de l'animation est défini par @keyframes. 3
animation-duration Récupère ou définit la durée de l'animation de l'objet. 3
animation-timing-function Récupère ou définit le type de transition de l'animation de l'objet. 3
animation-delay Récupère ou définit le délai de l'animation de l'objet. 3
animation-iteration-count Récupère ou définit le nombre de cycles de l’animation de l’objet. 3
animation-direction Récupère ou définit si l’animation de l’objet est lue en sens inverse pendant la boucle. 3
animation-play-state Récupère ou définit l’état de l’animation de l’objet. 3

Propriétés d'arrière-plan

Propriété Description CSS
background Propriété raccourcie. Définit les propriétés d’arrière-plan de l’objet. 1
background-attachment Définit ou récupère si l’image d’arrière-plan défile avec le contenu de l’objet ou est fixe. La propriété background-image doit être spécifiée au préalable. 1
background-color Définit ou récupère la couleur d’arrière-plan de l’objet. 1
background-image Définit ou récupère l’image d’arrière-plan de l’objet. 1
background-position Définit ou récupère la position de l’image d’arrière-plan de l’objet. La propriété background-image doit être spécifiée au préalable. 1
background-repeat Définit ou récupère la façon dont l’image d’arrière-plan est répétée ou remplie. La propriété background-image doit être spécifiée au préalable. 1
background-clip Spécifie la zone dans laquelle l’image d’arrière-plan de l’objet est découpée. 3
background-origin Définit ou récupère l’origine de référence (position) utilisée lors du calcul de background-position pour l’image d’arrière-plan de l’objet. 3
background-size Récupère ou définit la taille de l’image d’arrière-plan de l’objet. 3

Propriétés de bordure et de contour

Propriété Description CSS
border Propriété raccourcie. Définit les propriétés de bordure de l'objet. 1
border-bottom Propriété raccourcie. Définit les caractéristiques de la bordure inférieure de l'objet. 1
border-bottom-color Définit ou récupère la couleur de la bordure inférieure d'un objet. 1 
border-bottom-style Définit ou récupère le style de la bordure inférieure d'un objet. 1
border-bottom-width Définit ou récupère la largeur de la bordure inférieure d'un objet. 1
border-color Définit ou récupère la couleur de la bordure de l'objet. 1
border-left Propriété raccourcie. Définit les propriétés de la bordure gauche de l'objet. 1
border-left-color Définit ou récupère la couleur de la bordure gauche de l'objet. 1
border-left-style Définit ou récupère le style de la bordure gauche de l'objet. 1
border-left-width Définit ou récupère la largeur de la bordure gauche de l'objet. 1
border-right Propriété raccourcie. Définit les propriétés de la bordure droite de l'objet. 1
border-right-color Définit ou récupère la couleur de la bordure droite de l'objet. 1
border-right-style Définit ou récupère le style de la bordure droite de l’objet. 1
border-right-width Définit ou récupère la largeur de la bordure droite de l’objet. 1
border-style Définit ou récupère le style de bordure de l’objet. 1
border-top Propriété raccourcie. Définit les caractéristiques de la bordure supérieure de l’objet. 1
border-top-color Définit ou récupère la couleur de la bordure supérieure d’un objet. 1
border-top-style Définit ou récupère le style de la bordure supérieure d’un objet. 1
border-top-width Définit ou récupère la largeur de la bordure supérieure d’un objet. 1
border-width Définit ou récupère la largeur de bordure de l’objet. 1
outline Propriété raccourcie. Définit ou récupère le contour à l’extérieur de l’objet. 2
outline-color Définit ou récupère la couleur du contour à l'extérieur de l'objet. 2
outline-style Définit ou récupère le style du contour à l'extérieur de l'objet. 2
outline-width Définit ou récupère la largeur du contour à l'extérieur de l'objet. 2
border-bottom-left-radius Définit ou récupère la bordure arrondie du coin inférieur gauche de l’objet. Deux paramètres sont fournis, séparés par un espace. Chaque paramètre accepte une valeur ; la première valeur représente le rayon horizontal, et la seconde représente le rayon vertical. Si le second paramètre est omis, il prend par défaut la valeur du premier paramètre. 3
border-bottom-right-radius Définit ou récupère la bordure arrondie du coin inférieur droit de l’objet. 3
border-image Définit ou récupère le style de bordure de l’objet en utilisant une image pour le remplir. 3
border-image-outset Spécifie de combien l'image de bordure dépasse la bordure. 3
border-image-repeat Spécifie si la bordure d'image doit être répétée, étirée ou arrondie. 3
border-image-slice Spécifie le décalage vers l'intérieur de la bordure d'image. 3
border-image-source Spécifie l'image à utiliser à la place du style de bordure défini par la propriété border-style. 3
border-image-width Spécifie la largeur de la bordure d'image. 3
border-radius Définit ou récupère si l'objet utilise des bordures arrondies. 3
border-top-left-radius Définit la forme de la bordure supérieure gauche. 3
border-top-right-radius Définit la forme de la bordure supérieure droite. 3
box-decoration-break Spécifie si les éléments en ligne sont renvoyés à la ligne. 3
box-shadow Ajoute une ou plusieurs ombres à la boîte. 3

Propriétés de boîte

Propriété Description CSS
overflow-x Indique s'il faut rogner les bords gauche/droite du contenu s'il déborde de la zone de contenu de l'élément. 3
overflow-y Indique s'il faut rogner les bords supérieur/inférieur du contenu s'il déborde de la zone de contenu de l'élément. 3
overflow-style Spécifie la méthode de défilement préférée pour les éléments en débordement. 3
rotation Fait pivoter l'élément autour du point défini par la propriété rotation-point. 3
rotation-point Définit le point de décalage depuis le bord supérieur gauche de la bordure. 3

Propriétés de couleur

Propriété Description CSS
color-profile Permet des spécifications autres que le profil de couleur par défaut de la source. 3
opacity Définit le niveau de transparence d'un élément. 3
rendering-intent Permet des spécifications autres que l'intention de rendu du profil de couleur par défaut. 3

Propriétés de padding

Propriété Description CSS
padding Définit toutes les propriétés de padding en une seule déclaration. 1
padding-bottom Définit le padding inférieur d'un élément. 1
padding-left Définit le padding gauche d'un élément. 1
padding-right Définit le padding droit d'un élément. 1
padding-top Définit la marge intérieure supérieure d'un élément. 1

Propriétés de contenu de page média

Propriété Description CSS
bookmark-label Spécifie l'étiquette d'un signet. 3
bookmark-level Spécifie le niveau du signet. 3
bookmark-target Spécifie la cible du lien du signet. 3
float-offset Pousse les éléments flottants dans la direction opposée ; ils ont toujours float. 3
hyphenate-after Spécifie le nombre minimum de caractères après le caractère de césure d'un mot coupé. 3
hyphenate-before Spécifie le nombre minimum de caractères avant le caractère de césure d'un mot coupé. 3
hyphenate-character Spécifie la chaîne à afficher lorsqu'une césure se produit. 3
hyphenate-lines Indique le nombre maximum de lignes consécutives avec césure dans un élément. 3
hyphenate-resource Spécifie une liste séparée par des virgules de ressources externes pouvant aider à déterminer les points de césure du navigateur. 3
hyphens Définit comment découper les mots pour améliorer la mise en page du paragraphe. 3
image-resolution Spécifie la résolution d'image correcte. 3
marks Ajoute des marques de coupe et/ou des croix de repérage au document. 3
string-set   3

Propriétés de dimension

Propriété Description CSS
height Définit la hauteur d'un élément. 1
max-height Définit la hauteur maximale d'un élément. 2
max-width Définit la largeur maximale d'un élément. 2
min-height Définit la hauteur minimale d'un élément. 2
min-width Définit la largeur minimale d'un élément. 2
width Définit la largeur d'un élément. 1

Propriétés du modèle de boîte flexible (Nouvelles)

Propriété Description CSS
flex Propriété raccourcie. Définit ou récupère la manière dont les éléments enfants de l'objet de modèle de boîte flexible répartissent l'espace. 3
flex-grow Définit ou récupère le ratio d'expansion de la boîte flexible. 3
flex-shrink Définit ou récupère le ratio de contraction de la boîte flexible. 3
flex-basis Définit ou récupère la valeur de base flexible de la boîte flexible. 3
flex-flow Propriété raccourcie. Définit ou récupère la disposition des éléments enfants de l'objet de modèle de boîte flexible. 3
flex-direction Cette propriété détermine la position des éléments flex dans le conteneur flex en définissant la direction de l'axe principal du conteneur flex. 3
flex-wrap Cette propriété contrôle si le conteneur flex est sur une seule ligne ou sur plusieurs lignes, et la direction de l'axe transversal détermine la direction dans laquelle les nouvelles lignes sont empilées. 3
align-content Aligne les éléments dans le conteneur flex (verticalement) lorsqu'ils n'occupent pas tout l'espace disponible sur l'axe transversal. 3
align-items Définit l'alignement des éléments flex le long de l'axe latéral (axe vertical) de la ligne actuelle dans le conteneur flex. 3
align-self Définit l'alignement d'un élément flex individuellement le long de l'axe latéral (axe vertical). 3
justify-content Définit ou récupère l'alignement de l'élément de boîte flexible le long de l'axe principal (axe horizontal). 3
order Définit ou récupère l'ordre dans lequel apparaissent les éléments enfants de l'objet de modèle de boîte flexible. 3

Propriétés du modèle de boîte flexible (anciennes)

Propriété Description CSS
box-align Spécifie comment aligner les éléments enfants d'une boîte. 3
box-direction Spécifie la direction dans laquelle sont disposés les éléments enfants d'une boîte. 3
box-flex Spécifie si les éléments enfants d'une boîte sont de taille flexible ou fixe. 3
box-flex-group Affecte des éléments flexibles à un groupe Flex. 3
box-lines Spécifie s’il faut passer à une nouvelle ligne/colonne lorsqu’il n’y a plus d’espace dans la boîte parente. 3
box-ordinal-group Spécifie l'ordre d'affichage des éléments enfants d'une boîte. 3
box-orient Spécifie si les éléments enfants d’une boîte doivent être disposés horizontalement ou verticalement. 3
box-pack Spécifie les positions horizontales et verticales des boîtes horizontales dans une boîte verticale. 3

Propriétés de police

Propriété Description CSS
font Définit toutes les propriétés de police dans une seule déclaration. 1
font-family Spécifie la famille de polices du texte. 1
font-size Spécifie la taille de police du texte. 1
font-style Spécifie le style de police du texte. 1
font-variant Spécifie le style de police du texte. 1
font-weight Spécifie la graisse d’une police. 1
@font-face Une règle qui permet aux sites web de télécharger et d’utiliser des polices autres que les polices « Web-safe ». 3
font-size-adjust Spécifie la valeur d'aspect pour un élément. 3
font-stretch Condense ou étire la famille de polices actuelle. 3

Propriétés de contenu généré

Propriété Description CSS
content Utilisé avec les pseudo-éléments :before et :after pour insérer du contenu généré. 2
counter-increment Incrémente ou décrémente un ou plusieurs compteurs. 2
counter-reset Crée ou réinitialise un ou plusieurs compteurs. 2
quotes Définit le type de guillemets pour les références imbriquées. 2
crop Permet à un élément remplacé d'agir comme un objet qui remplace la zone rectangulaire de tout l'objet. 3
move-to Retire un élément du flux, puis le réinsère à un point ultérieur du document. 3
page-policy Détermine la valeur de chaîne d'un élément donné applicable aux compteurs en fonction de la page. 3

Propriétés de grille

Propriété Description CSS
grid-column Définit les positions de début et de fin de la colonne d'un élément de grille. 3
grid-row Définit les positions de début et de fin de la ligne d'un élément de grille. 3

Propriétés des hyperliens

Propriété Description CSS
target Propriété raccourcie qui définit les propriétés target-name, target-new et target-position. 3
target-name Spécifie où ouvrir le lien (position cible). 3
target-new Spécifie si un nouveau lien cible ouvre une nouvelle fenêtre ou un nouvel onglet dans une fenêtre existante. 3
target-position Spécifie où un nouveau lien cible doit être placé. 3

Propriétés de linebox

Propriété Description CSS
alignment-adjust Permet un alignement plus précis des éléments. 3
alignment-baseline Comment les éléments de niveau en ligne spécifiés par leur parent sont alignés. 3
baseline-shift Permet de repositionner la dominant-baseline par rapport à la dominant-baseline. 3
dominant-baseline Spécifie scaled-baseline-table 3
drop-initial-after-adjust Définit le point d'alignement initial du point de connexion principal de la lettrine. 3
drop-initial-after-align Calibre le réglage de ligne initial au sein d'une ligne ; c'est-à-dire que la boîte avec la lettrine utilise le point de connexion principal. 3
drop-initial-before-adjust Définit le point d'alignement initial du point de connexion secondaire de la lettrine. 3
drop-initial-before-align Calibre le réglage de ligne initial au sein d'une ligne ; c'est-à-dire que la boîte avec la lettrine utilise le point de connexion secondaire. 3
drop-initial-size Contrôle la lettrine de la lettre initiale. 3
drop-initial-value Active un effet initial de type menu déroulant. 3 
inline-box-align Définit l'alignement des lignes dans un bloc en ligne multiligne qui possèdent des éléments en ligne précédents et suivants. 3
line-stacking Une propriété abrégée qui définit les propriétés line-stacking-strategy, line-stacking-ruby et line-stacking-shift. 3
line-stacking-ruby Définit la méthode d'empilement des lignes contenant des éléments d'annotation Ruby par rapport aux éléments de bloc. 3
line-stacking Définit la méthode d'empilement des éléments de bloc contenus dans les lignes à décalage de base. 3
line-stacking-strategy Définit la méthode d'empilement des boîtes de ligne d'empilement qui contiennent en interne des éléments de bloc. 3
text-height Définit la dimension de progression de bloc de la zone de contenu textuel d'une boîte en ligne. 3

Propriétés de liste

Propriété Description CSS
list-style Définit toutes les propriétés de liste dans une seule déclaration. 1
list-style-image Définit une image comme marqueur d'élément de liste. 1
list-style-position Définit la position de placement du marqueur d'élément de liste. 1
list-style-type Définit le type du marqueur d'élément de liste. 1

Propriétés de marge

Propriété Description CSS
margin Définit toutes les propriétés de marge dans une seule déclaration. 1
margin-bottom Définit la marge inférieure d'un élément. 1
margin Définit la marge gauche d'un élément. 1
margin-right Définit la marge droite d'un élément. 1
margin-top Définit la marge supérieure d'un élément. 1

Propriétés Marquee

Propriété Description CSS
marquee-direction Définit la direction du mouvement du contenu. 3
marquee-play-count Définit combien de fois le contenu se déplace. 3
marquee-speed Définit la vitesse de défilement du contenu. 3
marquee-style Définit le style du mouvement du contenu. 3

Propriétés multi-colonnes

Propriété Description CSS
column-count Spécifie le nombre de colonnes en lesquelles l'élément doit être divisé. 3
column-fill Spécifie comment remplir les colonnes. 3
column-gap Spécifie l'espace entre les colonnes. 3
column-rule Une propriété raccourcie pour définir toutes les propriétés column-rule-*. 3
column-rule-color Spécifie la couleur de la règle entre les colonnes. 3
column-rule-style Spécifie le style de la règle entre les colonnes. 3
column-rule-width Spécifie la largeur de la règle entre les colonnes. 3
column-span Spécifie le nombre de colonnes que l'élément doit couvrir. 3
column-width Spécifie la largeur des colonnes. 3
columns Propriété raccourcie définissant la largeur et le nombre de colonnes. 3

Propriétés des médias paginés

Propriété Description CSS
fit Si ni sa propriété width ni sa propriété height n’est auto, donne une indication sur la façon de mettre à l’échelle l’élément remplacé. 3
fit-position Détermine l’alignement des objets à l’intérieur de la boîte. 3
image-orientation Spécifie la rotation vers la droite ou dans le sens horaire que l’agent utilisateur applique à l’image. 3
page Spécifie le type spécifique de page sur laquelle un élément doit être affiché. 3
size Spécifie la taille et l’orientation du contenu de la page contenant la boîte. 3

Propriétés de positionnement

Propriété Description CSS
bottom Définit le décalage entre le bord de marge inférieur d’un élément positionné et le bord inférieur de son bloc conteneur. 2
clear Spécifie de quel côté de l’élément les autres éléments flottants ne sont pas autorisés. 1
clip Découpe les éléments positionnés de manière absolue. 2
cursor Spécifie le type (forme) du curseur à afficher. 2
display Spécifie le type de boîte que l’élément doit générer. 1
float Spécifie si la boîte doit flotter. 1
left Définit le décalage entre le bord de marge gauche d’un élément positionné et le bord gauche de son bloc conteneur. 2
overflow
Spécifie ce qui se passe lorsque le contenu dépasse la boîte de l'élément. 2
position Spécifie le type de positionnement de l’élément. 2
right Définit le décalage entre le bord de marge droit d’un élément positionné et le bord droit de son bloc conteneur. 2
top Définit le décalage entre le bord de marge supérieur d’un élément positionné et le bord supérieur de son bloc conteneur. 2
visibility Spécifie si l'élément est visible. 2
z-index Définit l'ordre d'empilement de l'élément. 2

Propriétés d'impression

Propriété Description CSS
orphans Définit le nombre minimal de lignes qui doivent être conservées en bas de la page lorsqu'un saut de page se produit à l'intérieur de l'élément. 2
page-break-after Définit le comportement de saut de page après l'élément. 2
page-break-before Définit le comportement de saut de page avant l'élément. 2
page-break-inside Définit le comportement de saut de page à l'intérieur de l'élément. 2
widows Définit le nombre minimal de lignes qui doivent être conservées en haut de la page lorsqu'un saut de page se produit à l'intérieur de l'élément. 2

Propriétés Ruby

Propriété Description CSS
ruby-align Contrôle l'alignement du texte Ruby et du contenu de base Ruby l'un par rapport à l'autre. 3
ruby-overhang Lorsque le texte Ruby dépasse la largeur de la base Ruby, détermine si le texte Ruby est autorisé à empiéter partiellement sur tout texte adjacent autre que sa propre base. 3
ruby-position Sa base contrôle la position du texte Ruby. 3
ruby-span Contrôle le comportement d'étalement des éléments d'annotation. 3

Propriétés vocales

Propriété Description CSS
mark Une propriété raccourcie qui définit les propriétés mark-before et mark-after. 3
mark-after Permet de connecter des marqueurs nommés au flux audio. 3
mark-before Permet de connecter des marqueurs nommés au flux audio. 3
phonemes Spécifie une prononciation phonétique dans l'élément correspondant contenant le texte. 3
rest Propriété raccourcie qui définit les propriétés rest-before et rest-after. 3
rest-after Après que le contenu d'un élément a été prononcé, spécifie s'il faut mettre en pause ou respecter une frontière prosodique. 3
rest-before Avant que le contenu d'un élément ait été prononcé, spécifie s'il faut mettre en pause ou respecter une frontière prosodique. 3
voice-balance Spécifie l'équilibre entre les canaux gauche et droit. 3
voice-duration Spécifie la durée nécessaire pour présenter le contenu de l'élément sélectionné. 3
voice-pitch Spécifie la hauteur moyenne (fréquence) de la voix parlée. 3
voice-pitch-range Spécifie la variation de la hauteur moyenne. 3
voice-rate Contrôle le débit de parole 3
voice-stress Indique l'intensité de l'accentuation. 3
voice-volume La synthèse vocale fait référence à l'amplitude de la forme d'onde de sortie. 3

Attributs de tableau

Propriété Description CSS
border-collapse Spécifie si les bordures de tableau doivent être fusionnées. 2
border-spacing Spécifie la distance entre les bordures de cellules adjacentes. 2
caption-side Spécifie la position de la légende du tableau. 2
empty-cells Spécifie s'il faut afficher les bordures et les arrière-plans sur les cellules vides d'un tableau. 2
table-layout Définit l'algorithme de disposition utilisé pour le tableau. 2

Propriétés de texte

Propriété Description CSS
color Définit la couleur du texte. 1
direction Spécifie la direction / le sens d'écriture du texte. 2
letter-spacing Définit l'espacement des caractères. 1
line-height Définit la hauteur de ligne 1
text-align Spécifie l'alignement horizontal du texte. 1
text-decoration Spécifie l'effet de décoration ajouté au texte. 1
text-indent Spécifie l'indentation de la première ligne d'un bloc de texte. 1
text-transform Contrôle la casse du texte. 1
unicode-bidi   2
vertical-align Définit l'alignement vertical de l'élément. 1
white-space Définit la façon dont les espaces blancs sont gérés dans un élément. 1
word-spacing Définit l'espacement des mots. 1
text-emphasis Applique des marques d'emphase au texte de l'élément et la couleur de premier plan des marques d'emphase. 1
hanging-punctuation Spécifie si un signe de ponctuation peut dépasser la boîte de ligne. 3
punctuation-trim Spécifie si un signe de ponctuation doit être supprimé. 3
text-align-last L'alignement de la dernière ligne lorsque text-align est défini sur justify. 3
text-justify Spécifie la méthode de justification lorsque text-align est défini sur justify. 3
text-outline Définit le contour du texte. 3
text-overflow Spécifie ce qui doit se produire lorsque le texte dépasse l'élément conteneur. 3
text-shadow Ajoute une ombre au texte. 3
text-wrap Spécifie les règles de renvoi à la ligne du texte. 3
word-break Spécifie les règles de coupure de ligne pour le texte non-CJK. 3
word-wrap Définit si le navigateur doit renvoyer à la ligne les mots trop longs. 3

Propriétés de transformation 2D/3D

Propriété Description CSS
transform S'applique aux éléments avec des transformations 2D ou 3D. 3
transform-origin Permet de modifier la position de l'élément transformé. 3
transform-style Spécifie comment les éléments imbriqués sont affichés dans l'espace 3D. 3
perspective Spécifie comment les éléments 3D sont visualisés en perspective. 3
perspective-origin Spécifie la position inférieure d'un élément 3D. 3
backface-visibility Définit si un élément doit être visible lorsqu'il ne fait pas face à l'écran. 3

Propriétés de transition

Propriété Description CSS
transition Cette propriété est un raccourci pour transition-property, transition-duration, transition-timing-function et transition-delay. 3
transition-property Définit les propriétés CSS utilisées pour la transition. 3
transition-duration Définit la durée de la transition. 3
transition-timing-function Définit la fonction de temporisation de la transition. 3
transition-delay Spécifie le moment où la transition commence. 3

Propriétés d'interface utilisateur

Propriété Description CSS
appearance Définit le style d'apparence de l'élément. 3
box-sizing Vous permet de définir certains éléments d'une certaine manière pour s'adapter à la zone. 3
icon Spécifie une icône pour un élément. 3
nav-down Spécifie la position vers laquelle naviguer vers le bas lorsque l'utilisateur appuie sur la touche flèche bas. 3
nav-index Spécifie l'ordre de navigation (tabulation). 3
nav-left Spécifie la position vers laquelle naviguer vers la gauche lorsque l'utilisateur appuie sur la touche flèche gauche. 3
nav-right Spécifiez la position pour naviguer vers la droite lorsque l'utilisateur appuie sur la touche flèche droite. 3
nav-up Spécifiez la position pour naviguer vers le haut lorsque l'utilisateur appuie sur la touche flèche haut. 3
outline-offset Définir le décalage du contour à l'extérieur du bord de la bordure. 3
resize Définit si un élément peut être redimensionné. 3
autres extensions