Feuilles de style : propriétés & valeurs

Les propriétés de style, par ordre alphabétique

background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom

border-collapse
border-color
border-left

border-right

border-spacing
border-style
border-top

border-width
bottom

caption-side
clear
clip
color
cursor
display
empty-cells
float
font
font-family
font- size
font-style
font-variant
font-weight
height
left
letter-spacing

line-height
list-style
list- style-image
list-style-position
list-style- type
margin
margin-bottom
margin-left
margin-right
margin- top
max-height
max-width
min-height
min-width
overflow
padding
padding-bottom

padding-left
padding- right
padding-top
position
right
text-decoration
text- align
text-transform
text-indent
top
vertical-align
visibility
width
white-space
word-spacing
z-index

Listes de propriétés par domaine et effet recherchés

Police et texteAlignementCouleursFondsBoîtesPosition et affichageListesTableauxGé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.
Les valeurs sont indiquées à la suite, sans ordre prédéfini et séparées par un espace.
Exemple : background : url("images/fond.gif") #ffffff no-repeat fixed top center;

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") :

  • fixed : le fond reste fixe quand on descend plus bas sur la page
  • scroll : le fond défile avec le texte (par défaut)

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 :

  • couleur en anglais, hexadécimal ou RGB
  • transparent (valeur par défaut)

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 :

  • Indication de valeurs absolues par rapport coin en haut à gauche de la fenêtre du navigateur (X Y), avec une préférence pour le pixel, pris par défaut sans indication d’unité (ex : "background-position : 50 40" = "background-position : 50px 40px")
  • Indication de valeurs en % par rapport coin en haut à gauche de la fenêtre du navigateur (X Y) Une seule valeur centrera l’image verticalement, (ex : "background-position : 5% 4% ")
  • Indication de mots clés précisant la position, seul ou en coulple, la valeur par défaut étant (top left)
    • top : en haut, verticalement
    • center : au milieu, verticalement
    • bottom : en bas, verticalement
    • left : à gauche, horizontalement
    • center : au centre, horizontalement
    • right : à droite, horizontalement

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 :

  • repeat : le fond se répète horizontalement et verticalement (par défaut)*
  • repeat-x : le fond ne se répète que sur une ligne, horizontalement*
  • repeat-y : le fond ne se répète que sur une colonne, verticalement*
  • no-repeat : le fond ne se répète pas, il n’est affiché qu’une fois

* 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 :

  1. Haut
  2. Droite
  3. Bas
  4. Gauche

avec les valeurs suivantes :

  • l’épaisseur
    • par mots clé
      • thin : mince
      • medium : moyenne
      • thick : large
    • par une valeur numérique et son unité
  • le style
    • none : aucun
    • dotted : en pointillé
    • dashed : en tirets
    • solid : continue
    • double : double trait
    • groove : 3D en creux
    • ridge : 3D en saillie
    • inset : 3D vers l’arrière
    • outset : 3D vers l’avant
  • la couleur

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 :

  • l’épaisseur
    • par mots clé
      • thin : mince
      • medium : moyenne
      • thick : large
    • par une valeur numérique et son unité
  • le style
    • none : aucun
    • dotted : en pointillé
    • dashed : en tirets
    • solid : continue
    • double : double trait
    • groove : 3D en creux
    • ridge : 3D en saillie
    • inset : 3D vers l’arrière
    • outset : 3D vers l’avant
  • la couleur

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

  • collapse : les bordures du tableau et des cellules sont mélangées.
  • separate : les bordures du tableau et des cellules sont séparées (par défaut).

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 :

  1. Haut
  2. Droite
  3. Bas
  4. Gauche

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 :

  • l’épaisseur
    • par mots clé
      • thin : mince
      • medium : moyenne
      • thick : large
    • par une valeur numérique et son unité
  • le style
    • none : aucun
    • dotted : en pointillé
    • dashed : en tirets
    • solid : continue
    • double : double trait
    • groove : 3D en creux
    • ridge : 3D en saillie
    • inset : 3D vers l’arrière
    • outset : 3D vers l’avant
  • la couleur

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 :

  • l’épaisseur
    • par mots clé
      • thin : mince
      • medium : moyenne
      • thick : large
    • par une valeur numérique et son unité
  • le style
    • none : aucun
    • dotted : en pointillé
    • dashed : en tirets
    • solid : continue
    • double : double trait
    • groove : 3D en creux
    • ridge : 3D en saillie
    • inset : 3D vers l’arrière
    • outset : 3D vers l’avant
  • la couleur

border-spacing

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 :

  1. Haut (border-top)
  2. Droite (border-right)
  3. Bas (border-bottom)
  4. Gauche (border-left)

avec les valeurs suivantes :

  • none : aucun
  • dotted : en pointillé
  • dashed : en tirets
  • solid : continue
  • double : double trait
  • groove : 3D en creux
  • Ridge : 3D en saillie
  • inset : 3D vers l’arrière
  • outset : 3D vers

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 :

  • l’épaisseur
    • par mots clé
      • thin : mince
      • medium : moyenne
      • thick : large
    • par une valeur numérique et son unité
  • le style
    • none : aucun
    • dotted : en pointillé
    • dashed : en tirets
    • solid : continue
    • double : double trait
    • groove : 3D en creux
    • ridge : 3D en saillie
    • inset : 3D vers l’arrière
    • outset : 3D vers l’avant
  • La couleur

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 :

  1. Haut
  2. Droite
  3. Bas
  4. Gauche

avec les valeurs suivantes :

  • par mots clé
    • thin : mince
    • medium : moyenne
    • thick : large
  • par valeur numérique relative ou absolue et son unité

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 :

  • top : en haut du tableau
  • bottom : en bas du tableau
  • left et right, pour la gauche et la droite sont peut intéressantes

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 :

  • left : supprime l’effet d’un élément flottant à gauche précédent
  • right : supprime l’effet d’un élément flottant à droite précédent
  • both : supprime l’effet d’un élément flottant précédent, qu’il soit à gauche ou à droite et déplace l’élément à la suite de l’élément précédent le plus encombrant.
  • none : pas de suppression de l’effet du flottant (par défaut)

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

  • auto : curseur automatique (par défaut)
  • default : curseur standard
  • pointer : curseur en forme de main, comme quand on pointe sur un lien
  • text : curseur utilisé quand on pointe sur du texte
  • wait : curseur utilisé pour indiquer une attente (sablier)
  • progress : curseur utilisé pour indiquer une tâche de fond (curseur avec sablier)
  • help : curseur en forme de point d’interrogation, indiquant une aide
  • move : curseur en forme de croix, indiquant un déplacement possible
  • n-resize : flèche vers le nord
  • ne-resize : flèche vers le nord-est
  • e-resize : flèche vers l’est
  • se-resize : flèche vers le sud- est
  • s-resize : flèche vers le sud
  • sw-resize : flèche vers le sud-ouest
  • w-resize : flèche vers l’ouest
  • nw-resize : flèche vers le nord-ouest
  • url : curseur personnalisé, de type .cur ou .ani. (la création d’image curseur nécessite d’utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani)

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 :

  • none : l’élément ne sera pas affiché et devient invisible, en libérant son emplacement
  • block : l’élément devient de type "block" et est affiché au début d’une nouvelle ligne
  • inline : l’élément devient de type "inline" et l’élément suivant est affiché dans le cours de la ligne, sans retour à la ligne suivante.
  • list-item : l’élément devient de type "élément de liste à puce"

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 :

  • show : les bordures des cellules vides sont affichées.
  • collapse : les cellules vides sont masquées (par défaut).

float

Alignement d’un élément par rapport à un autre (flottement) – Propriété s’appliquant à tous les éléments avec les valeurs suivantes :

  • left : flottant à gauche
  • right : flottant à droite
  • none : pas de flottement (par défaut)

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.
Les valeurs, sans obligation, sont indiquées à la suite, sans ordre prédéfini, hormis pour le nom de la police qui doit être placé à la fin, et séparées par un espace.

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 :

  • le nom exact de la police : arial, courier, "comic sans ms", verdana, helvetica, "times roman"…)
  • un nom générique : serif, sans serif, monospace, cursive, fantasy.

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.
Si le nom de police comporte des espaces, le mettre entre guillemets.
Utilisez des guillemets si le nom de la police comporte des espaces.

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 :

  • Taille absolue :
    • xx-small : très très petit
    • x-small : très petit
    • small : petit
    • medium : moyen
    • large : grand
    • x-large : très grand
    • xx- large : très très grand
       
  • Taille relative, par rapport à la taille courante :
    • smaller : plus petite
    • larger : plus grande
       
  • valeur numérique relative ou absolue, avec son unité :

font- style

Application de styles italiques aux caractères – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs :

  • italic : italique
  • oblique : autre façon de mettre en italique
  • normal : normal (par défaut)

font-variant

Affichage en petites capitales – Propriété s’appliquant à tous les éléments comportant du texte, avec les valeurs :

  • small-caps : petites capitales
  • normal : normal (par défaut)

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 :

  • Mots clés :
    • bold : gras
    • bolder : plus gras
    • lighter : plus fin
    • normal : pas gras (par défaut)
  • 9 valeurs numériques allant du plus léger au plus gras : 100, 200, 300, 400, 500, 600, 700, 800 et 900

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 :

  • valeur numérique relative ou absolue avec son unité
  • auto : adaptation de la hauteur au texte contenu à l’intérieur (valeur par défaut)

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é.

letter-spacing

Espacement entre caractères – Propriété s’appliquant à tous les éléments comportant du texte, afin d’ajuster l’espace entre les caractères.

  • valeur numérique relative ou absolue, éventuellement négative, et son unité, avec une préférence pour "em" qui le lie à la police utilisée

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 :

  • Valeur d’interligne simple, comprenant des valeurs nuériques sans unités. La valeur indiquée fait office de multiplicateur de la taille de police courante :
    • 2 : double interligne
    • 3 : triple interligne
  • valeur numérique relative ou absolue (obligatoirement positive) suivie de son unité ou du caractère %, permettant de régler l’interligne à volonté.

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.
Les valeurs, sans obligation, sont indiquées à la suite, sans ordre prédéfini et séparées par un espace.

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 :

  • inside : sans retrait (aligné sur la marge gauche du texte)
  • outside : avec retrait (par défaut)

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 :

  • pour les listes non ordonnées (<ul>) :
    • disc : un disque noir (par défaut).
    • circle : un cercle.
    • square : un carré.
    • none : aucune puce ne sera utilisée.
  • Pour les listes ordonnées (<ol>) :
    • decimal : des nombres 1, 2, 3, 4, 5… (par défaut)
    • decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05…).
    • upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V…)
    • lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v…)
    • upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E…)
    • lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e…)
    • lower-greek : numérotation grecque.

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.
Les valeurs sont indiquées à la suite, séparées par un espace, en fonction des dimensions des marges recherchées :

  • 1 valeur : valeur identique pour les 4 marges
  • 2 valeurs : la première pour les marges haute et basse, la seconde pour les marges gauche et droite
  • 3 valeurs : la première pour la marge du haut, la seconde pour les marges gauche et droite, la troisième pour la marge du bas
  • 4 valeurs : respectivement, la marge du haut, de la droite, du bas, de la gauche.

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 :

  • visible : tout l’élément sera affiché (par défaut).
  • hidden : l’élément sera coupé s’il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée.
  • scroll : tout comme hidden, l’élément sera coupé s’il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu’on puisse voir la suite du texte.
  • auto : c’est le navigateur qui décide d’ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la valeur "scroll".

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.
Les valeurs sont indiquées à la suite, séparées par un espace, en fonction des dimensions des marges recherchées :

  • 1 valeur : valeur identique pour les 4 marges
  • 2 valeurs : la première pour les marges haute et basse, la seconde pour les marges gauche et droite
  • 3 valeurs : la première pour la marge du haut, la seconde pour les marges gauche et droite, la troisième pour la marge du bas
  • 4 valeurs : respectivement, la marge du haut, de la droite, du bas, de la gauche.

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 :

  • absolute : position absolue par rapport au coin en haut à gauche
  • fixed : position fixe (fonctionne comme la position absolue). L’élément reste à sa position même quand on descend plus bas dans la page.
  • relative : position relative, par rapport à la position "normale" de l’élément
  • static : positionnement normal (par défaut)

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 :

  • underline : souligné
  • overline : ligne au-dessus
  • line-through : barré
  • blink : clignotant
  • none : normal (par défaut)

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 :

  • left : à gauche (par défaut)
  • center : centré
  • right : à droite
  • justify : texte justifié (prend toute la largeur de la page)

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 :

  • uppercase : tout mettre en majuscules
  • lowercase : tout mettre en minuscules
  • capitalize : première lettre de chaque mot en majuscules
  • none : normal (par défaut)

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 :

  • baseline : lignes de base de l’enfant et du parent alignées
  • sub : ligne de base de l’enfant un peu plus bas que la ligne de base du parent (indice de texte)
  • super : ligne de base de l’enfant un peu plus bas que la ligne la partie la plus haute de son prent (exposant)
  • text-top : alignement sur les parties les plus hautes (alignement texte et image)
  • text-bottom : alignement sur les parties les plus basses (alignement texte et image)
  • middle : alignement des milieux verticaux des 2 éléments (alignement au centre d’une cellule de tableau)
  • top : haut de l’enfant aligné sur la partie la plus haute de la ligne (alignement en haut d’une cellule de tableau)
  • bottom : bas de l’enfant aligné sur la partie la plus basse de la ligne (alignement en bas d’une cellule de tableau)
  • valeur en pourcentage (posititf vers le haut et négatif vers le bas) permettant de maitriser exactement les positions respectives des 2 objets

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 :

  • inherit : la propriété est héritée de l’élément parent
  • hidden : élément masqué, mais occupant toujours son emplacement
  • visible : l’élément est visible (par défaut)

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 :

  • valeur numérique relative ou absolue avec son unité
  • auto : adaptation de la largeur au texte contenu à l’intérieur (valeur par défaut)

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.

  • normal : séparateurs correspondant à un espace unique avec passage à la ligne est automatique (par défaut)
  • pre : défini un style préformaté,comme la balise HTML <pre> , avec passage à la ligne tel que le texte a été saisi dans le code source (pas automatique)
  • nowrap : même chose que la valeur "pre" à la diférence que les lignes trop longues seront coupées pour se poursuivre sur la ligne suivante.

word-spacing

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 :

  • valeur numérique, éventuellement négative, avec unité et une préférence pour "em" qui le lie à la police utilisée

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 :

  • auto : empilement des zone dans l’ordre de déclaration dans le document html
  • valeur numérique sans unité : l’empilement se faisant dans l’ordre croissant. En cas de valeur identique pour certains éléments, il est pris en compte leur ordre de déclaration dans le document. Le contenu normal de la page a pour valeur 0.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *