Les propriétés de style, par ordre alphabétique
Listes de propriétés par domaine et effet recherchés
Police et texte – Alignement – Couleurs – Fonds – Boîtes – Position et affichage – Listes – Tableaux – Générales à la page
Police de caractère et format de texte
Nom de la police | font- family | Style de casse : capitales | text-transform | |
Taille | font- size | Alinéa de paragraphe | text-indent | |
Style de graisse | font-weight | Alignement horizontal | text-align | |
Style d’italique | font-style | Espacement entre les mots | word-spacing | |
Style de décoration | text-decoration | Espacement entre les lettres | letter -spacing | |
Style de casse : petites capitales | font-variant | Valeur d’interligne | line- height | |
Méga-propriété de police | font | Césure | white-space | |
Couleur de texte | color | Proprités non traitées : text-shadow, quote |
Alignement (textes, images, autres éléments et objets)
Alignement horizontal | text-align | Alinéa de paragraphe | text-indent | |
Alignement vertical | vertical-align | Césure | white-space | |
Hauteur de ligne | line-height |
Propriétés de couleurs
Couleur de texte | color |
Couleur de fond | background-color |
Couleur de bordure | border-color |
Propriétés de fond
Couleur de fond | background-color | Répétition du fond | background- repeat | |
Image de fond | background- image | Position du fond | background-position | |
Fond fixé | background-attachment | Méga-propriété de fond | background |
Propriétés des boîtes
Largeur | width | Marge intérieure en haut | padding-top | |
Hauteur | height | Marge intérieure à gauche | padding- left | |
Largeur minimale | min-width | Marge intérieure à droite | padding-right | |
Largeur maximale | max-width | Marge intérieure en bas | padding-bottom | |
Hauteur minimale | min-height | Méga-propriété de marge intérieure | padding | |
Hauteur maximale | max- height | Epaisseur de la bordure | border-width | |
Marge extérieure en haut | margin-top | Couleur de la bordure | border-color | |
Marge extérieure à gauche | margin-left | Type de bordure | border-style | |
Marge extérieureà droite | margin-right | Bordure à gauche | border- left | |
Marge extérieure en bas | margin- bottom | Bordure en haut | border-top | |
Méga-propriété de marge extérieure | margin | Bordure à droite | border-right | |
Méga-propriété de bordure | border | Bordure en bas | border-bottom | |
Alignement vertical | vertical-align |
Propriétés de positionnement et d’effet visuel
Type d’élément | display | Type de positionnement | position | |
Affichage | visibility | Position par rapport au haut | top | |
Afficher seulement une partie | clip | Position par rapport au bas | bottom | |
Limiter les dimensions | overflow | Position par rapport à gauche | left | |
Positionnement flottant | float | Position par rapport à droite | right | |
Stopper un positionnment flottant | clear | Ordre d’affichage | z-index |
Propriétés des listes
Symbole affiché en tête de ligne | list-style- type |
Position (retrait) de la puce ou du numéro d’ordre | list-style-position |
Personalisation de la puce ou le numéro d’ordre par une image | list-style-image |
Méga-propriété de liste | list-style |
Propriétés des tableaux
Mélange des bordure | border-collapse | Alignement vertical | vertical-align | |
Cellules vides | empty-cells | Espacement entre cellules | border- spacing | |
Position du titre | caption- side | Proprités non traitées : table-layout |
Propriétés générales de l’interface utilisateur
Curseur de souris | cursor | Défini l’apparence du curseur et ses effets auto |
Caractéristiques et valeurs admises pour chaques propriété de style
Propriétés | Valeurs possibles |
---|---|
background
[ haut de page ]
|
Méga-propriété de fond pour l’image de fond – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 5 propriétés concernant le fond d’un élément : background-color, background-image, background-attachment, background-position et/ou background-repeat.
|
background-attachment
|
Fixation de l’image de fond définie par background-image – Propriété pouvant s’appliquer à tout élément dont une image de fond est définie, afin de contrôler son déplacement envuel par action de l’ascenseur vertical (convient particulièrement en propriété de l’élément « Body ») :
|
background-color
|
Couleur de fond – Propriété s’appliquant à tous les éléments dont on veux coloriser le fond. La couleur est définie selon l’une des méthodes suivantes :
|
background-image
|
Image de fond – Propriété s’appliquant à tous les éléments dont on veux décorer le fond avec une image, avec une valeur de type url(), précisant l’adresse relative ou absolue.
|
background-position
|
Fixation de l’emplacement d’un image de fond définie par background-image – Propriété s’appliquant aussi bien à l’arrière plan de l’élément « Body » qu’à d’autres éléments particuliers, selon l’une des trois méthodes suivantes :
Exemples : « background-position : 50 40 » = « background-position : 50px 40px » – « background-position : 5% 4% » – « background-position : center right » – « background-position : top center »
|
background-repeat
|
Répétition de l’image de fond définie par background-image – Propriété pouvant s’appliquer à tout élément dont une image de fond est définie , avec les valeurs suivantes :
* Nécessité que les bords de l’image se raccordent de façon continue
|
border
[ haut de page ]
|
Méga-propriété pour définir les bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour les 4 bordures, dans l’ordre suivant :
avec les valeurs suivantes :
|
border-bottom
|
Caractéristiques de la bordure basse d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure du bas :
|
border-collapse
[ haut de page ]
|
Type d’affichage des bordures des cellules et tableaux – Propriété s’appliquant aux éléments d’un tableau et déterminant si leurs bordures doivent être afficfées séparément ou fusionnées
|
border- color
|
Couleur des bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété, d’appliquer une ou plusieurs couleur pour les 4 bordures, dans l’ordre suivant :
avec les valeurs de couleur désirées.
|
border- left
|
Caractéristiques de la bordure gauche d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure gauche :
|
border-right
[ haut de page ]
|
Caractéristiques de la bordure droite d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure droite :
|
|
Espacement entre les cellules d’un tableau – Proriété s’appliquant aux tableaux et déterminant l’espacement entre les cellules (sans bordures, remplissage et marges), avec une valeur numérique relative ou absolue et son unité. Une valeur donne le même espacement horizontal et vertical. Deux valeurs donnent respectivement l’espacement horizontal et vertical. |
border-style
|
Couleur des bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété, d’appliquer une ou plusieurs couleur pour les 4 bordures, dans l’ordre suivant :
avec les valeurs suivantes :
|
border-top
|
Caractéristiques de la bordure haute d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 3 propriétés de personnalisation (border-color, border-style et border-width), pour la bordure du haut :
|
border-width
[ haut de page ]
|
Epaisseur des bordures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété, d’appliquer une ou plusieurs épaisseurs pour les 4 bordures, dans l’ordre suivant :
avec les valeurs suivantes :
|
bottom
|
Position par rapport au bas d’unélément, lorsque la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, par rapport au bas, avec une valeur numérique relative ou absolue et son unité. |
caption-side
|
Position de la légende d’un tableau – Propriété s’appliquant au tableau et spécifiant l’emplacement de sa légende, avec les valeurs :
|
clear
|
Contrôle d’un élément par rapport au flotement d’un autre – Propriété s’appliquant à tous les éléments, complétant la propriété float avec les valeurs suivantes :
|
clip
|
Affichage d’une partie d’élément – Propriété s’appliquant à tous les éléments, dont la propriété position a pour valeur « absolue » et définissant une zone rectangulaire de l’élément visible, avec la valeur rect (), comprenant les coordonnées du rectangle qui sera affiché, séparées par une virgule. Cette propriété peut être utile pour rogner l’affichage d’images. Exemple : {clip : rect(10px, 30px, 20px, 40px);}
|
color
|
Couleur de texte – Propriété s’appliquant à tous les éléments de type texte pour définir leur couleur. |
cursor
[ haut de page ]
|
Curdeur de souris – Propriété s’appliaquant à tous les éléments et spécifiant le type de curseur qui sera utilisé à la place de la flèche par défaut, avec les valeurs
|
display
|
Type d’affichage d’un élément – Propriété s’appliquant à tous les éléments et défini la façon dont ils sont affichés :
|
empty-cells
|
Bordure des cellules vides d’un tableau – Propriété s’appliquant aux cellules d’un tableau et spécifiant si la bordure des cellules “réellement vides” doit être dessinée ou non, avec les valeurs :
|
float
|
Alignement d’un élément par rapport à un autre (flottement) – Propriété s’appliquant à tous les éléments avec les valeurs suivantes :
|
font
|
Méga-propriété pour la police de caractères – Propriété pouvant s’appliquer à tout élément texte pour en définir, par une unique propriété, la prise en compte des 7 propriétés concernant la police de caractère : font-family, color, font-style, font-size, font-weight, font-variant, line height. Exemple : {font : #000000 bold 12px italic verdana,arial;}
|
font-family
[ haut de page ]
|
Définition du type de police de caractère – Propriété s’appliquant à tous les éléments qui comportent du texte. Il est possible d’utiliser :
Il est recommandé d’indiquer plusieurs nom, séparés par des espaces, pour cibler, dans l’ordre, les polices pouvant être instalées sur l’appareil du visiteur. Evitez les polices exotiques, qui risquent de ne pas être disponible sur l’ordinateur du visiteurs et peut être protégére par copyright.
|
font-size
|
Taille de la police de caractère – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs, selon l’une des 4 méthodes suivantes :
|
font- style
|
Application de styles italiques aux caractères – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs :
|
font-variant
|
Affichage en petites capitales – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs :
|
font- weight
|
Application des style de graisse des caractères – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs, selon l’une des 2 méthodes suivantes :
|
height
[ haut de page ]
|
Hauteur d’un élément – Propriété s’appliquant à tous les éléments pour en définir la hauteur, avec les valeurs suivantes :
Même principe que pour la propriété width qui défini la hauteur d’un élément.
|
left
|
Position par rapport à la gauche d’un élément, lorsque la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, par rapport à la gauche, avec une valeur numérique relative ou absolue et son unité. |
|
Espacement entre caractères – Propriété s’appliquant à tous les éléments comportant du texte, afin d’ajuster l’espace entre les caractères.
|
line-height
|
Interligne – Propriété s’appliquant à tous les éléments comportant du texte, afin d’ajuster l’espace entre les lignes d’un même paragraphe selon l’une des méthodes suivantes :
|
list-style
|
Méga-propriété pour les listes – Propriété s’appliquant aux éléments affichés par des listes, pour en définir, par une unique propriété, la prise en compte des propriétés concernant les listes, en fonction de l’affichage d’un caractère ou d’une image : list-style-type et list-style-position ou list-style-image et list-style-position. Exemple : {list- style: inside square;}
|
list-style-image
|
Personalisation de la puce ou le numéro d’ordre par une image, dans les listes – Propriété s’appliquant aux éléments affichés par des listes en précisant l’url de l’image. Exemple : list-style-image: url(« images/puce.png »)
|
list-style- position
[ haut de page ]
|
Position (retrait) de la puce ou du numéro d’ordre pour les listes – Propriété s’appliquant aux éléments affichés par des listes avec les valeurs :
|
list-style- type
|
Symbole affiché en tête de ligne, pour les listes à puces – Propriété s’appliquant aux éléments affichés par des listes et déterminant le symbole affiché en tête de ligne, avec au choix :
|
margin
|
Méga-propriété pour définir les marges extérieures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 4 marges d’un éléments et par conséquent les propriétés suivantes : margin- top, margin-right, margin-bottom et margin-left.
|
margin-bottom
|
Marge extérieure en bas. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure basse par une valeur numérique et son unité.
|
margin-left
|
Marge extérieure à gauche. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure de gauche par une valeur numérique et son unité. |
margin-right
|
Marge extérieure à droite. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure de droite par une valeur numérique et son unité. |
margin-top
|
Marge extérieure en haut. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge exterieure haute par une valeur numérique et son unité. |
max- heigh
|
Hauteur maximale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.
|
max-width
|
Largeur maximale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.
|
min-height
|
Hauteur minimale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.
|
min-width
|
Largeur minimale d’un élément – Propriété s’appliquant à tous les éléments redimentionables, avec une valeur numérique, relative ou absolue positive et son unité.
|
overflow
[ haut de page ]
|
Affichage d’une partie d’élément dont le contenu est trop grand- Propriété s’appliquant à tous les éléments, dont la propriété position a pour valeur « absolue » ou « relative » et définissant les modalités d’affichage d’une zone dont le contenu est trop grand, selon les valeurs :
|
padding
|
Méga- propriété pour définir les marges intérieures d’un élément. – Propriété pouvant s’appliquer à tout élément permettant par une unique propriété la prise en compte des 4 marges intérieures d’un éléments et par conséquent les propriétés suivantes : padding-top, padding-right, padding-bottom et padding-left.
|
padding-bottom
|
Marge intérieure en bas. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure basse par une valeur numérique et son unité.
|
padding-left
|
Marge intérieureà gauche. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure de gauche par une valeur numérique et son unité. |
padding-right
|
Marge intérieureà droite. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure de droite par une valeur numérique et son unité. |
padding-top
|
Marge intérieure en haut. – Propriété pouvant s’appliquer à tout élément permettant de définir sa marge intérieure haute par une valeur numérique et son unité. |
position
[ haut de page ]
|
Type de positionnment d’un élement – Propriété s’appliquant à tous les éléments et définissant une zone rectangulaire définissant une zone dans laquel pouront être placés d’autres éléments, avec les valeurs :
Les valeurs « absolute », « fixed » et « relative » nécessite en complément les propriétés top ou bottom et left ou right qui determinent les ordonnées et abcisses nécessaires au positionnement.
|
right
|
Position par rapport au bord droit d’un élément, lorsque la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, par rapport à la droite, avec une valeur numérique relative ou absolue et son unité. |
text-decoration
|
Décoration de la police de caractère – Propriété s’appliquant à tous les éléments qui comportent du texte dont on veux modifier l’affichage selon les valeurs suivantes :
|
text-align
|
Alignement horizontal du texte – Propriété s’appliquant à tous les éléments qui comportent du texte dont on veux ajuster l’alignement selon les valeurs suivantes :
|
text- transform
|
Transformation de la police en majuscules ou minuscules – Propriété s’appliquant à tous les éléments qui comportent du texte, selon les valeurs suivantes :
|
text-indent
|
Indentation de paragraphe (décalage 1ère ligne) – Propriété s’appliquant à tous les éléments comportant du texte, mais n’ayant de sens qu’avec un alignement du text (text-align) à gauche ou justifié, avec valeur numérique relative ou absolue (pouvant être négative) et son unité.
|
top
|
Position par rapport au haut d’un élément, dont la propriété position a pour valeur « absolue », « relative » ou « fixed » – Propriété s’appliquant à tous les éléments et définissant l’ordonné de positionnement, la propriété left donnant l’absice, avec une valeur numérique relative ou absolue et son unité.
|
vertical-align
[ haut de page ]
|
Alignement vertical – Propriété s’appliquant à tous les éléments (comportant ou non du texte) et definissant l’alignement d’un élément (parent) par rapport à un autre élément pouvant être d’un autre type (enfant) – 9 valeur exprimant la relation de l’enfant par rapport au parent :
|
visibility
|
Affichage d’un élément – Propriété s’appliquant à tous les éléments, caractérisant l’état initial de son affichage sans affecter sa mise en place, avec les valeurs suivantes :
Cette propriété semble proche de la propriété display, mais cette dernière, à la valeur « none » libère complètement l’emplacement
|
width
|
Largeur d’un élément – Propriété s’appliquant à tous les éléments pour en définir la largeur, avec les valeurs suivantes :
Même principe que pour la propriété height qui défini la hauteur d’un élément.
|
white-space
[ haut de page ]
|
Formatage des séparateurs (espaces, tabulations, alinéas) – Propriété s’appliquant à tous les éléments comportant du texte, afin de préciser le rendu des séparateurs.
|
|
Espacement entre les mots – Propriété s’appliquant à tous les éléments comportant du texte, afin d’ajuster l’espace entre les mots, avec pour valeur :
|
z-index
|
Empilement de l’affichage – Propriété s’appliquant à tous les éléments entrant dans une zone positionnable (propriété position) en indiquant l’ordre d’empilement et du même coup leur niveau de transparence, les valeurs suivantes :
|
Petit lien pour aller plus loin :
https://developer.mozilla.org/fr/docs/Web/CSS/Reference