- Les styles de police
- L'alignement
- Les couleurs et les arrière-plans
- Les boites et leurs bordures
- L'affichage et le positionnement
- Les listes et les tableaux
Les styles de police
L'alignement
| Type | Propriété | Valeurs possibles |
|---|---|---|
| Alignement horizontal | text-align | left : à gauche (par défaut) center : centré right : à droite justify : texte justifié (prend toute la largeur de la page) |
| Alignement vertical | vertical-align | A utiliser dans des cellules de tableau, ou dans des éléments inline eux-mêmes contenus dans un élément inline. top : en haut middle : au milieu bottom : en bas |
| Hauteur de ligne | line-height | Indiquer une valeur en pixels (px) ou en pourcentage (%) |
| Alinéa | text-indent | Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes. Vos paragraphes commenceront avec le retrait que vous avez indiqué. |
| Césure | white-space | normal : le passage à la ligne est automatique (par défaut) nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML comme <br /> ne soit présente. pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise xHTML <pre>) |
Couleurs et arrières-plans
Couleurs
| Type | Propriété | Valeurs possibles |
|---|---|---|
| Couleur de texte | color | Indiquer une couleur avec l'une des méthodes suivantes :
|
| Couleur de fond | background-color | Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte |
Image de fond
| Type | Propriété | Valeurs possibles | ||
|---|---|---|---|---|
| Image de fond | background-image | Indiquer l'url de l'image (notation absolue ou relative) Code : CSS
|
||
| Fond fixé | background-attachment | fixed : le fond reste fixe quand on descend plus bas sur la page scroll : le fond défile avec le texte (par défaut) |
||
| Répétition du fond | background-repeat | repeat : le fond se répète (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 |
||
| Position du fond | background-position | 2 façons de faire :
|
||
| Méga-propriété de fond | background |
Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-repeat, background-attachment, background-position. L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de mettre toutes les valeurs de ces propriétés (au moins une suffit) Code : CSS
|
Les boites et leurs bordures
Dimensions des boites
| Type | Propriété | Valeurs possibles |
|---|---|---|
| Largeur | width | Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur) |
| Hauteur | height | Idem |
| Largeur minimale | min-width | Indiquer une valeur, en pixels par exemple. |
| Largeur maximale | max-width | Idem |
| Hauteur minimale | min-height | Idem |
| Hauteur maximale | max-height | Idem |
Marges extérieures
| Type | Propriété | Valeurs possibles | |
|---|---|---|---|
| Marge en haut | margin-top | Indiquer une valeur comme 20px, 1.5em... | |
| Marge à gauche | margin-left | Idem | |
| Marge à droite | margin-right | Idem | |
| Marge en bas | margin-bottom | Idem | |
| Méga-propriété de marge | margin | Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
Code : CSS
|
Marges intérieures
| Type | Propriété | Valeurs possibles |
|---|---|---|
| Marge intérieure en haut | padding-top | Indiquer une valeur comme 20px, 1.5em... |
| Marge intérieure à gauche | padding-left | Idem |
| Marge intérieure à droite | padding-right | Idem |
| Marge intérieure en bas | padding-bottom | Idem |
| Méga-propriété de marge intérieure | padding | Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
|
Bordures
| Type | Propriété | Valeurs possibles | |
|---|---|---|---|
| Epaisseur de la bordure | border-width | Indiquer une valeur en px. | |
| Couleur de la bordure | border-color | Indiquer une valeur de couleur. | |
| Type de bordure | border-style | none : pas de bordure (par défaut) hidden : bordure cachée solid : ligne pleine double : ligne double (nécessite une taille de bordure de 3px minimum) dashed : en tirets dotted : en pointillés inset : effet 3D "enfoncé" outset : effet 3D "surélevé" ridge : autre effet 3D |
|
| Bordure à gauche | border-left | Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche. L'ordre n'a pas d'importance. Exemple : Code : CSS
|
|
| Bordure en haut | border-top | Idem | |
| Bordure à droite | border-right | Idem | |
| Bordure en bas | border-bottom | Idem | |
| Méga-propriété de bordure | border | Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche. |
Affichage et positionnement
Affichage
| Type | Propriété | Valeurs possibles | |
|---|---|---|---|
| Type d'élément | display | none : l'élément ne sera pas affiché block : l'élément devient de type "block" (bloc, comme <p>) inline : l'élément devient de type "inline" (en ligne, comme <strong>) list-item : l'élément devient de type "élément de liste à puce" (comme <li>) |
|
| Affichage | visibility | hidden : masqué visible : visible (par défaut) display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément, qui continue quand même à prendre de la place sur l'écran. |
|
| Afficher seulement une partie | clip | Indiquer 4 valeurs comme ceci : Code : CSS
Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les coordonnées du rectangle qui sera affiché. Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle. |
|
| Limiter les dimensions | overflow | 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". |
Positionnement
| Type | Propriété | Valeurs possibles |
|---|---|---|
| Flottant | float | left : flottant à gauche right : flottant à droite none : pas de flottant (par défaut) |
| Stopper un flottant | clear | left : supprime l'effet d'un flottant à gauche précédent right : supprime l'effet d'un flottant à droite précédent both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite none : pas de suppression de l'effet du flottant (par défaut) |
| Type de positionnement | position | 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) |
| Position par rapport au haut | top | Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif. |
| Position par rapport au bas | bottom | Idem |
| Position par rapport à gauche | left | Idem |
| Position par rapport à droite | right | Idem |
| Ordre d'affichage | z-index | En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être affiché au-dessus de l'autre. Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant. Par exemple, si vous avez 2 éléments positionnés en absolus avec un z-index de 10 pour l'un et de 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus. |
Listes et tableaux
Les listes
| Type | Propriété | Valeurs possibles | |
|---|---|---|---|
| Type de liste | list-style-type |
|
|
| Position en retrait | list-style-position | inside : sans retrait outside : avec retrait (par défaut) |
|
| Puce personnalisée | list-style-image | Indiquer l'url de l'image qui servira de puce. Exemple : Code : CSS
|
|
| Méga-propriété de liste | list-style | Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image. Vous n'êtes pas obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance. Exemple : Code : CSS
|
Les tableaux
| Type | Propriété | Valeurs possibles |
|---|---|---|
| Type de bordure | border-collapse | 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). |
| Cellules vides | empty-cells | show : les bordures des cellules vides sont affichées. collapse : les cellules vides sont masquées (par défaut). |
| Position du titre | caption-side | Indique la position du titre du tableau, défini via la balise <caption> top : en haut du tableau bottom : en bas du tableau left : à gauche du tableau right : à droite du tableau |
Divers
| Type | Propriété | Valeurs possibles | |
|---|---|---|---|
| Curseur de souris | cursor | 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. Exemple :
Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani |