Section courante

A propos

Section administrative du site

Voici un tableau de référence de la liste des différents propriétés de CSS :

Propriétés Langage JavaScript Description Version
-moz-background-size   Cette propriété permet de fixer la taille de l'image d'arrière-plan. Mozilla
-ms-word-wrap   Cette propriété permet d'indiquer si un saut de ligne est effectué entre deux mots lorsque la ligne est trop longue. IE 5.5
align-content alignContent Cette propriété permet d'aligner les items de contenu flexible quand les items n'utilisent pas toute l'espace disponible sur l'axe verticale. 3
align-items alignItems Cette propriété permet d'indiquer l'alignement par défaut pour les items à l'intérieur d'un conteneur flexible. 3
align-self alignSelf Cette propriété permet d'indiquer l'alignement pour l'item sélectionné à l'intérieur d'un conteneur flexible. 3
all all Cette propriété permet d'indiquer que toutes les propriétés sont réinitialisés à la valeur initiale ou hérité, sauf pour la direction et l'Unicode-Bidi. 3
animation animation Cette propriété permet d'indiquer toutes les propriétés d'animation. 3
animation-delay animationDelay Cette propriété permet d'indiquer le délai avant le démarrage de l'animation. 3
animation-direction animationDirection Cette propriété permet d'indiquer la direction et le cycle de l'animation. 3
animation-duration animationDuration Cette propriété permet d'indiquer la durée en secondes ou millisecondes de l'animation. 3
animation-fill-mode animationFillMode Cette propriété permet d'indiquer l'apparence de l'élément lorsque l'animation ne fonctionne pas. 3
animation-iteration-count animationIterationCount Cette propriété permet d'indiquer le nombre de fois que l'animation doit se produire. 3
animation-name animationName Cette propriété permet d'indiquer le nom de l'animation «@keyframes». 3
animation-play-state animationPlayState Cette propriété permet d'indiquer si l'animation se produit ou est en pause. 3
animation-timing-function animationTimingFunction Cette propriété permet d'indiquer la vitesse de la courbe d'animation. 3
backface-visibility backfaceVisibility Cette propriété permet d'indiquer si l'élément doit être visible quand il n'est pas face à l'écran. 3
background background Cette propriété permet de fixer le format de l'arrière-plan. 1
background-attachment backgroundAttachment Cette propriété permet de fixer l'effet de déplacement d'immobilité de l'arrière-plan lorsqu'on déplace la fenêtre du navigateur. 1
background-blend-mode backgroundBlendMode Cette propriété permet d'indiquer le mode du mélangeur de l'arrière-plan et sa fusion avec chaque couche de fond. 3
background-clip backgroundClip Cette propriété permet d'indiquer la région de peinturage de l'arrière-plan. 3
background-color backgroundColor Cette propriété permet de fixer la couleur de l'arrière-plan. 1
background-image backgroundImage Cette propriété permet d'indiquer le nom du ficher de l'image d'arrière-plan utilisé comme papier-peint. 1
background-origin backgroundOrigin Cette propriété permet d'indiquer l'emplacement où l'image d'arrière-plan est positionné. 3
background-position backgroundPosition Cette propriété permet de fixer la position de l'image d'arrière-plan utilisé comme papier-peint. 1
background-repeat backgroundRepeat Cette propriété permet de fixer effet de répétition de l'arrière-plan. 1
background-size backgroundSize Cette propriété permet d'indiquer la taille des images d'arrières-plan. 3
behavior behavior Cette propriété permet d'attacher un Script à élément spécifique afin de rendre la composante DHTML (HTML dynamique). IE5.5+
border border Cette propriété permet de définir le format de la bordure d'un élément comme un tableau par exemple. 1
border-bottom borderBottom Cette propriété permet de définir le format de la bordure inférieur d'un élément comme un tableau par exemple. 1
border-bottom-color borderBottomColor Cette propriété permet de définir la couleur de la bordure inférieur d'un élément comme un tableau par exemple. 2
border-bottom-left-radius borderBottomLeftRadius Cette propriété permet d'indiquer la forme de la bordure dans le coin inférieur gauche. 3
border-bottom-right-radius borderBottomRightRadius Cette propriété permet d'indiquer la forme de la bordure dans le coin inférieur droite. 3
border-bottom-style borderBottomStyle Cette propriété permet de définir le style ou l'apparence de la bordure inférieur d'un élément comme un tableau par exemple. 2
border-bottom-width borderBottomWidth Cette propriété permet de définir la largeur de la bordure inférieur d'un élément comme un tableau par exemple. 1
border-image borderImage Cette propriété permet d'indiquer l'aspect d'image de bordure que doit avoir un élément. 3
border-image-outset borderImageOutset Cette propriété permet de fixer la quantité de l'image de bordure allant au delà de la boite de bordure. 3
border-image-repeat borderImageRepeat Cette propriété permet de fixer si l'image de bordure doit avoir une répétition, des arrondissements et des étirements. 3
border-image-slice borderImageSlice Cette propriété permet de découper la bordure d'image. 3
border-image-source borderImageSource Cette propriété permet d'indiquer le chemin et l'image utilisé comme bordure. 3
border-image-width borderImageWidth Cette propriété permet d'indiquer la largeur de bordure de l'image. 3
border-left borderLeft Cette propriété permet de définir le format de la bordure à la gauche d'un élément comme un tableau par exemple. 1
border-left-color borderLeftColor Cette propriété permet de définir la couleur de la bordure à la gauche d'un élément comme un tableau par exemple. 2
border-left-style borderLeftStyle Cette propriété permet de définir le style ou l'apparence de la bordure de gauche d'un élément comme un tableau par exemple. 2
border-left-width borderLeftWidth Cette propriété permet de définir la largeur de la bordure à la gauche d'un élément comme un tableau par exemple. 1
border-radius borderRadius Cette propriété permet de définir l'arrondissement des coins de la bordure d'un élément. 3
border-right borderRight Cette propriété permet de définir le format de la bordure à la droite d'un élément comme un tableau par exemple. 1
border-right-color borderRightColor Cette propriété permet de définir la couleur de la bordure à la droite d'un élément comme un tableau par exemple. 2
border-right-style borderRightStyle Cette propriété permet de définir le style ou l'apparence de la bordure à la droite d'un élément comme un tableau par exemple. 2
border-right-width borderRightWidth Cette propriété permet de définir la largeur de la bordure à la droite d'un élément comme un tableau par exemple. 1
border-spacing borderSpacing Cette propriété permet d'indiquer la distance entre les bordures et les cellules adjacentes. 2
border-style borderStyle Cette propriété permet de définir le style de la bordure d'un élément. 1
border-top borderTop Cette propriété permet de définir le format de la bordure supérieur d'un élément comme un tableau par exemple. 1
border-top-color borderTopColor Cette propriété permet de définir la couleur de la bordure supérieur d'un élément comme un tableau par exemple. 2
border-top-left-radius borderTopLeftRadius Cette propriété permet d'indiquer la forme de la bordure dans le coin supérieur gauche. 3
border-top-right-radius borderTopRightRadius Cette propriété permet d'indiquer la forme de la bordure dans le coin supérieur droit. 3
border-top-style borderTopStyle Cette propriété permet de définir le style ou l'apparence de la bordure supérieur d'un élément comme un tableau par exemple. 2
border-top-width borderTopWidth Cette propriété permet de définir la largeur de la bordure supérieur d'un élément comme un tableau par exemple. 1
border-width borderWidth Cette propriété permet de définir la largeur de la bordure d'un élément. 1
bottom bottom Cette propriété permet d'indiquer la distance vertical d'un élément par rapport à son conteneur en se basant à partir du bas. 2
box-shadow boxShadow Cette propriété permet d'attacher une ou plusieurs ombrages à un élément. 3
box-sizing boxSizing Cette propriété permet d'indiquer ce que doit inclure les dimensions de largeur et de hauteur. 3
caption-side captionSide Cette propriété permet de définir la position d'alignement de cellule de titre d'un tableau. 2
clear clear Cette propriété permet d'indiquer qu'il n'y est pas de flottaison de balise à la droite ou à la gauche d'une image. 1
clip clip Cette propriété permet de fixer le comportement que doit avoir l'élément lorsque l'image est plus grande que le conteneur. 2
color color Cette propriété permet de définir les couleurs de l'écriture du texte. 1
column-count columnCount Cette propriété permet d'indiquer le nombre de colonnes qu'un élément doit avoir dans l'étendue. 3
column-fill columnFill Cette propriété permet d'indiquer comment remplir les colonnes, les balancés ou non. 3
column-gap columnGap Cette propriété permet d'indiquer l'écart entre les colonnes. 3
column-rule columnRule Cette propriété permet d'indiquer la couleur, le style et la largeur d'une règle entre les colonnes. 3
column-rule-color columnRuleColor Cette propriété permet d'indiquer la couleur d'une règle entre les colonnes. 3
column-rule-style columnRuleStyle Cette propriété permet d'indiquer le style d'une règle entre les colonnes. 3
column-rule-width columnRuleWidth Cette propriété permet d'indiquer la largeur d'une règle entre les colonnes. 3
column-span columnSpan Cette propriété permet d'indiquer le nombre de colonnes pouvant s'afficher dans l'étendue. 3
column-width columnWidth Cette propriété permet d'indiquer la largeur optimale des colonnes. 3
columns columns Cette propriété permet d'indiquer les ajustements de largeur et de nombre de colonnes dans un étendue. 3
content content Cette propriété permet d'ajouter un contenu généré avec des pseudo-sélecteurs «:before» et «:after». 2
counter-increment counterIncrement Cette propriété permet d'incrémenter la valeur du compteur de CSS par la valeur donnée 2.1
counter-reset counterReset Cette propriété permet de créer ou réinitialiser un ou plusieurs compteurs de CSS. 2.1
cursor cursor Cette propriété permet d'indiquer le type de pointeur de souris lorsqu'il passe au dessus de la balise. 2
direction color Cette propriété permet d'indiquer la direction horizontal de l'écriture du texte. 2
display display Cette propriété permet d'indiquer si la balise doit être affiché. 1
empty-cells emptyCells Cette propriété permet d'indiquer s'il faut afficher ou non les bordures et l'arrière-plan sur les cellules vides d'un tableau. 2
filter filter Cette propriété permet d'indiquer un type de filtre à appliquer à un objet. IE 5.5+
flex flex Cette propriété permet d'indiquer la longueur d'un item, s'il doit être relativement rétrécie dans le reste de l'item et combien doivent croire dans le même conteneur. 3
flex-basis flexBasis Cette propriété permet d'indiquer la longueur initiale d'un item flexible. 3
flex-direction flexDirection Cette propriété permet d'indiquer la direction des items flexibles. 3
flex-flow flexFlow Cette propriété permet d'indiquer un raccourci de direction et d'enveloppe flexible. 3
flex-grow flexGrow Cette propriété permet d'indiquer combien d'éléments doivent croître par rapport au reste des éléments flexibles à l'intérieur du même conteneur. 3
flex-shrink flexShrink Cette propriété permet d'indiquer comment l'item doit être relativement rétrécie dans le reste des items flexible à l'intérieur du même conteneur. 3
flex-wrap flexWrap Cette propriété permet d'indiquer si les éléments flexibles doivent envelopper ou non. 3
float float Cette propriété permet d'indiquer si la balise doit être flottante vers la gauche, la droite ou autres. 1
font font Cette propriété permet d'indiquer tous les détails de la police de caractères utilisé. 1
font-family fontFamily Cette propriété permet d'indiquer les modèles de police de caractères utilisé. 1
font-size fontSize Cette propriété permet de fixer la taille de la police de caractères utilisé. 1
font-size-adjust fontSizeAdjust Cette propriété permet de fixer le ratio de la taille de la police de caractères utilisé.  
font-stretch fontStretch Cette propriété permet de fixer le facteur d'étirement de la police de caractères utilisé. 1
font-style fontStyle Cette propriété permet de fixer les attributs (gras, souligné,...) de la police de caractères utilisé. 1
font-variant fontVariant Cette propriété permet de fixer la variante (normal, majuscule,...) de la police de caractères utilisé. 1
font-weight fontWeight Cette propriété permet de fixer l'épaisseur de la police de caractères utilisé. 1
hanging-punctuation hangingPunctuation Cette propriété permet d'indiquer si un signe de ponctuation peut être placé en dehors de la ligne de la boite, soit au début ou à la fin, d'une ligne complète de texte. 3
height height Cette propriété permet de spécifier la hauteur de la balise. 1
hyphens hyphens Cette propriété permet de fixer le comportement que doit avoir le navigateur Web lorsqu'un mot trop long pour l'espacement attribué se produit et d'appliquer un trait d'union avec un saut de ligne si nécessaire. 3
left left Cette propriété permet de spécifier la bordure de gauche de la balise. 2
letter-spacing letterSpacing Cette propriété permet de spécifier l'espacement entre chacun des caractères. 1
line-height lineHeight Cette propriété permet de spécifier l'espacement entre chacun des lignes du paragraphe. On appel aussi ce terme l'«Interligne». 1
list-style listStyle Cette propriété permet de fixer le format de la liste. 1
list-style-image listStyleImage Cette propriété permet de fixer l'image de l'attribut de la liste. 1
list-style-position listStylePosition Cette propriété permet d'indiquer l'espacement à gauche des lignes débordante de la liste. 1
list-style-type listStyleType Cette propriété permet de fixer les attributs (numéro, puce, carré,...) de la liste. 1
margin margin Cette propriété permet de définir la bordure entre la fenêtre de navigateur et la page HTML. 1
margin-bottom marginBottom Cette propriété permet de définir la bordure inférieur entre la fenêtre de navigateur et la page HTML. 1
margin-left marginLeft Cette propriété permet de définir la bordure à la gauche entre la fenêtre de navigateur et la page HTML. 1
margin-right marginRight Cette propriété permet de définir la bordure à la droite entre la fenêtre de navigateur et la page HTML. 1
margin-top marginTop Cette propriété permet de définir la bordure supérieur entre la fenêtre de navigateur et la page HTML. 1
max-height maxHeight Cette propriété permet d'indiquer la hauteur maximum que doit avoir un élément. 2
max-width maxWidth Cette propriété permet d'indiquer la largeur maximum que doit avoir un élément. 2
min-height minHeight Cette propriété permet d'indiquer la hauteur minimum que doit avoir un élément. 2
min-width minWidth Cette propriété permet d'indiquer la largeur minimum que doit avoir un élément. 2
mso-footer-margin   Cette propriété permet de fixer la marge du pied de page selon les applications Office de Microsoft. Word
mso-header-margin   Cette propriété permet de fixer la marge de en-têtes de page selon les applications Office de Microsoft. Word
mso-ignore   Cette propriété permet d'interdire l'affichage d'un élément sous Office de Microsoft mais s'affichant sous les navigateurs Internet Explorer ou FireFox. Word
mso-margin-top-alt   Cette propriété permet de définir la marge de haut d'une balise selon les applications Office de Microsoft. Word
mso-page-orientation   Cette propriété permet de définir l'orientation de la page d'une balise selon les applications Office de Microsoft. Word
mso-pagination   Cette propriété permet de définir le type de pagination d'une balise selon les applications Office de Microsoft. Word
mso-style-name   Cette propriété permet d'indiquer le nom du style selon les applications Office de Microsoft. Word
nav-down navDown Cette propriété permet d'indiquer où le navigateur utilise la touche de navigation vers le bas. 3
nav-index navIndex Cette propriété permet d'indiquer l'ordre de navigation séquentiel pour un élément (l'ordre de tabulation). 3
nav-left navLeft Cette propriété permet d'indiquer où le navigateur utilise la touche de navigation vers la gauche. 3
nav-right navRight Cette propriété permet d'indiquer où le navigateur utilise la touche de navigation vers la droite. 3
nav-up navUp Cette propriété permet d'indiquer où le navigateur utilise la touche de navigation vers le haut. 3
opacity opacity Cette propriété permet de fixer le niveau d'opacité pour un élément. 3
order order Cette propriété permet d'indiquer l'ordre d'un élément flexible par rapport au reste des éléments flexibles à l'intérieur du même conteneur. 3
outline outline Cette propriété permet de fixer la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres. 2
outline-color outlineColor Cette propriété permet de fixer la couleur de la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres. 2
outline-offset outlineOffset Cette propriété permet de fixer l'espace entre la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres. 2
outline-style outlineStyle Cette propriété permet de fixer le style de la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres. 2
outline-width outlineWidth Cette propriété permet de fixer le largeur de la ligne autour d'une balise (en dehors de ses frontières) afin qu'elle se démarque des autres. 2
overflow overflow Cette propriété permet de fixer le débordement du défilement d'une balise. 2
overflow-x overflowX Cette propriété permet de fixer le débordement horizontal du défilement d'une balise. 3
overflow-y overflowY Cette propriété permet de fixer le débordement vertical du défilement d'une balise. 3
padding padding Cette propriété permet de définir l'espacement entre la zone attribué au paragraphe et le paragraphe lui-même. 1
padding-bottom paddingBottom Cette propriété permet de définir l'espacement en bas entre la zone attribué au paragraphe et le paragraphe lui-même. 1
padding-left paddingLeft Cette propriété permet de définir l'espacement à la gauche entre la zone attribué au paragraphe et le paragraphe lui-même. 1
padding-right paddingRight Cette propriété permet de définir l'espacement à la droite entre la zone attribué au paragraphe et le paragraphe lui-même. 1
padding-top paddingTop Cette propriété permet de définir l'espacement en haut entre la zone attribué au paragraphe et le paragraphe lui-même. 1
page-break-after pageBreakAfter Cette propriété permet de fixer le saut de page qui doit se produire après l'élément spécifié. 2
page-break-before pageBreakBefore Cette propriété permet de fixer le saut de page qui doit se produire avant l'élément spécifié. 2
page-break-inside pageBreakInside Cette propriété permet de fixer le saut de page qui doit se produire à l'intérieur de l'élément spécifié. 2
perspective perspective Cette propriété permet d'indiquer combien de pixels dans un élément en 3 dimensions est placé dans la vue. 3
perspective-origin perspectiveOrigin Cette propriété permet d'indiquer où l'élément en 3 dimensions base son axe des X et son axe des Y. 3
pointer-events pointerEvents Cette propriété permet d'indiquer les événements associé au pointeur de la souris. 3
position position Cette propriété permet d'indiquer la méthode de type de positionnement utilisé pour un élément (généralement une balise). 2
quotes quotes Cette propriété permet de fixer les types de guillemets dans une balise de citation (Q). 2
resize resize Cette propriété permet d'indiquer s'il est possible qu'un élément soit redimensionnable par l'utilisateur. 3
right right Cette propriété permet d'indiquer le bord droit par rapport à un positionnement absolue. 2
tab-interval   Cette propriété permet de fixer l'intervalle par défaut d'un arrêt de tabulation. 1
tab-size tabSize Cette propriété permet d'indiquer la longueur de l'espace utilisé par le caractère de tabulation. 3
tab-stops   Cette propriété permet de fixer la position d'un arrêt de tabulation. 1
table-layout tableLayout Cette propriété permet de fixer l'algorithme de disposition de table utilisé par une table. 2
text-align textAlign Cette propriété permet de spécifier le déplacement horizontal d'un texte: Vert le gauche, le droite, au milieu, justifié,.... 1
text-align-last textAlignLast Cette propriété permet d'indiquer comment aligner la dernière ligne d'un texte. 3
text-decoration textDecoration Cette propriété permet de spécifier la présentation du texte (soulignement, barré, clignotement,...). 1
text-decoration-color textDecorationColor Cette propriété permet d'indiquer la couleur à utiliser pour la propriété «text-decoration» laquelle affecte la présentation du texte (soulignement, barré, clignotement,...). 3
text-decoration-line textDecorationLine Cette propriété permet d'indiquer le type de ligne à utiliser pour la décoration du texte. 3
text-decoration-style textDecorationStyle Cette propriété permet d'indiquer le style que doit avoir la ligne de texte de décoration est affiché par la propriété «text-decoration». 3
text-indent textIndent Cette propriété permet de spécifier le déplacement horizontal du corps du paragraphe. 1
text-justify textJustify Cette propriété permet d'indiquer la méthode de justification à utiliser pour fixer la propriété «text-align». 3
text-overflow textOverflow Cette propriété permet d'indiquer comment le contenu débordant de l'affichage ne doit pas être signalé à l'utilisateur. 3
text-shadow textShadow Cette propriété permet de définir l'effet d'ombrage de l'écriture du texte. 2
text-transform textTransform Cette propriété permet de définir les «cases» du texte (majuscule, minuscule,...). 1
top top Cette propriété permet d'indiquer la distance vertical d'un élément par rapport à son conteneur. 2
transform transform Cette propriété permet d'appliquer une transformation en 2 dimensions ou en 3 dimensions sur un élément. 3
transform-origin transformOrigin Cette propriété permet de changer la position des éléments transformées. 3
transform-style transformStyle Cette propriété permet d'indiquer comment les éléments imbriqués sont rendus dans un espace en 3 dimensions. 3
transition transition Cette propriété permet de définir toutes les effets d'une transition. 3
transition-delay transitionDelay Cette propriété permet d'indiquer quand l'effet de transition doit commencé. 3
transition-duration transitionDuration Cette propriété permet d'indiquer combien de secondes ou millisecondes un effet de transition prend pour être complété. 3
transition-property transitionProperty Cette propriété permet d'indiquer le nom de la propriété CSS d'effet de transition. 3
transition-timing-function transitionTimingFunction Cette propriété permet de fixer la vitesse de la courbe dans un effet de transition. 3
unicode-bidi unicodeBidi Cette propriété permet d'indiquer si le texte doit remplacer le support de plusieurs langues dans le même document. 2
unicode-range unicodeRange Cette propriété permet de définir les limites d'intervalle de la police de caractères Unicode. 2
vertical-align verticalAlign Cette propriété permet de spécifier le déplacement vertical d'un texte: Vers le haut, le bas, au milieu,.... 1
visibility visibility Cette propriété permet d'indiquer si une balise doit être visible ou non. 2
white-space whiteSpace Cette propriété permet de spécifier la réaction du débordement de l'entrée d'une ligne: on la coupe en morceaux ou on continue. On appel également cette caractéristique la Césure. 1
width width Cette propriété permet de spécifier la largeur de la balise. 1
word-spacing wordSpacing Cette propriété permet de spécifier l'espacement entre chacun des mots. 1
z-index zIndex Cette propriété permet d'indiquer l'ordre d'empilage d'un élément, soit une façon d'indiquer que élément s'affichera au dessus d'un autre même s'il est indiqué avant l'élément afficher après. 2

Légende

    Cette couleur permet d'indiquer les propriétés déconseillées.

Exemple

Le langage «JavaScript» permet de modifier par programmation des éléments de la feuille de style comme par exemple si on veut changer la couleur de fond de «background-color» on emploi «backgroundColor» de la manière suivante :

  1. <DIV id=dvColor>&nbsp;</DIV>
  2. <script language="JavaScript" type="text/javascript">
  3. document.getElementById('dvColor').style.backgroundColor="#FF00FF";
  4. </script>

Voir également

Langage de programmation - HTML - Référence des balises
Langage de programmation - Croix de balise Web

Dernière mise à jour : Vendredi, le 1er janvier 2016