Feuilles de style : Index des paramétres

Les prérequis

1 - Les bases de la structure Html
2 - Mise en forme

Présentation

Selon les balises vous pourrez utiliser tel ou tel format afin de changer sa maniére de fonctionner. En voici la liste.

La commande FONT

font-family : définit un nom ou une famille de police. Nom de police (Arial, Times, Helvetica...) ou famille (serif, sans-serif, cursive, fantasy)
{font-family: Arial}

font-style : définit le style de l'écriture : normal ou italique ou oblique
{font-style: italic}

font-weight : définit l'épaisseur de la police : normal ou bold ou bolder ou lighter ou valeur numérique soit (100 | 200 | 300 |...)
{font-weight: bold}

font-size : définit la taille de la police : xx-small ou x-small ou small ou médium ou large ou x-large ou xx-large ou larger ou smaller ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{font-size: 12pt}

font-variant : définit une variante par rapport à la normale : normal ou small-caps
{font-variant: small-caps}

font : raccourci pour les différentes propriétés de police
{font: bold italic}

La commande TEXT

text-align : définit l'alignement du texte : left ou center ou right
{text-align: center}

text-indent : définit un retrait dans la première ligne d'un bloc de texte. spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)
{text-indent: 5cm}

text-decoration : définit une décoration (?) du texte, soit barré, clignotant, ... : blink ou underline ou line-through ou overline ou none
{text-decoration: underline}

text-transform : définit la casse du texte (majuscule, minuscule) uppercase (met les caractères en majuscules) ou lowercase (met les caractères en minuscules) ou capitalize (met le premier caractère en majuscule)
{text-transform: capitalize}

La commande BORDER

border : regroupe toutes les propriétés des bords
{border: solid 1px gray}

border-top-width : donne l'épaisseur du bord supérieur : thin ou medium ou thick ou spécifié par l'auteur
{border-top-width: thin}

border-right-width : donne l'épaisseur du bord droit : thin ou medium ou thick ou spécifié par l'auteur
{border-right-width: medium}

border-bottom-width : donne l'épaisseur du bord inférieur : thin ou medium ou thick ou spécifié par l'auteur
{border-bottom-width: thick}

border-left-width : donne l'épaisseur du bord gauche : thin ou medium ou thick ou spécifié par l'auteur
{border-left-width: 0.5cm}

border-width : regroupe les différentes propriétés de border-width

border-color : détermine la couleur de la bordure
{border-color: yellow}

border-style : détermine le style du trait de la bordure : none ou solid ou dotted ou dashed ou double ou groove ou ridge ou inset ou outset
{border-style: solid dashed}

La commande MARGIN

margin-top : détermine la valeur de la marge supérieure en unité de longueur ou auto
{ margin-top: 5px }

margin-right : détermine la valeur de la marge droite en unité de longueur ou auto
{ margin-right: 5px }

margin-bottom : détermine la valeur de la marge inférieure en unité de longueur ou auto
{ margin-bottom: 5px }

margin-left : détermine la valeur de la marge gauche en unité de longueur ou auto
{ margin-left: 5px }

margin : regroupe les différentes propriétés de la marge Les bords et les "enrobages"
{ margin : 5px }

La commande BACKGROUND

background-color : définit la couleur de l'arrière-plan : couleur ou transparent
{background-color: #000000}

background-image : définit l'image de l'arrière-plan : URL de l'image
{background-image: image.gif}

définit la façon de répéter l'image d'arrière-plan : repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou
repeat-y (y = nombre de répétitions verticales
{background-image: image.gif; background-repeat: repeat-4}

background-attachment : spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran : scroll ou fixed
{background-image: image.gif; background-attachement: fixed}

background-position : spécifie la position de l'image d'arrière-plan par rapport au coin supérieur gauche de la fenêtre {1, 2}
{top ou center ou bottom , left ou center ou right} ou en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{background-image: img.gif; background-position: right top}

background : raccourci pour les différentes propriétés d'arrière-plan
{background: image.gif fixed repeat}

La commande PADDING

padding-top : valeur de remplissage haut entre l'élément et le bord : en points (pt), inches (in), centimètres (cm), pixels (px)ou pourcentage (%)
{padding-top: 3px}

padding-right : valeur de remplissage droite entre l'élément et le bord : en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{padding-right: 3px}

padding-bottom : valeur de remplissage bas entre l'élément et le bord : en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{padding-bottom: 3px}

padding-left : valeur de remplissage gauche entre l'élément et le bord : en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{padding-left: 3px}

padding : regroupe les différentes propriétés de remplissage
{padding: 3px}

La commande LIST

list-style-type : détermine le type de puces ou de numérotation : disc ou circle ou square decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha
{list-style-type: square}

list-style-image : permet de remplacer les puces par une image : url ou none
{list-style-image: image.gif}

list-style-position : spécifie si les puces sont à l'intérieur ou à l'extérieur du texte : inside ou outside
{list-style-position: inside}

list-style : regroupe toutes les propriétés de liste
{list-style-position: inside image.gif square}

Les autres commandes

color : définit la couleur du texte : En hexadécimal ou lettre ff0000 ou red
{color: #c0c0ff}

word-spacing : définit l'espace entre les mots : en points (pt), inches (in), centimètres (cm), pixels (px)
ou pourcentage (%)
{word-spacing: 5pt}

letter-spacing : définit l'espace entre les lettres : spécifié en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{letter-spacing: 2pt}

line-height : définit l'interligne soit l'espace entre les lignes du texte : en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
P {line-height: 10pt}

width : détermine la longueur d'un élément de texte ou d'une image : en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{width: 200px}

height : détermine la hauteur d'un élément de texte ou d'une image : en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
{heigh: 100px}

white-space : espace ou blanc : normal ou pre ou nowrap
{white-space: pre}