Type | Nom | Valeurs possibles | ||||
---|---|---|---|---|---|---|
Nom de police | font-family | Indiquer les noms de polices possibles par ordre de préférence : Code : CSS - Sélectionner
Si le visiteur a la police 1, il l'utilisera. Sinon, il regarde s'il a la police 2, puis la police 3 etc. Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours mettre comme dernière police possible "serif" ou "sans-serif". Code : CSS - Sélectionner
Il est possible d'utiliser des polices personnalisées en combinaison avec @font-face. |
||||
Police personnalisée | @font-face | Permet de déclarer une nouvelle police, qui sera téléchargée sur l'ordinateur de vos visiteurs. Code : CSS - Sélectionner
|
||||
Taille du texte | font-size | Indiquez la taille du texte. Plusieurs unités sont possibles :
|
||||
Gras | font-weight | bold : gras bolder : plus gras lighter : plus fin normal : pas gras (par défaut) |
||||
Italique | font-style | italic : italique oblique : autre façon de mettre en italique normal : normal (par défaut) |
||||
Décoration | text-decoration | underline : souligné overline : ligne au-dessus line-through : barré blink : clignotant none : normal (par défaut) |
||||
Petites capitales | font-variant | small-caps : petites capitales normal : normal (par défaut) |
||||
Capitales | text-transform | uppercase : tout mettre en majuscules lowercase : tout mettre en minuscules capitalize : début des mots en majuscules none : normal (par défaut) |
||||
Super-propriété de police | font | Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight, font-style, font-size, font-variant, font-family. Attention exception : le nom de la police (font-family) doit être placé en dernier dans la liste dans tous les cas. Vous n'êtes pas obligés de mettre une valeur de chacune de ces propriétés. Exemple : Code : CSS - Sélectionner
Cela mettra votre texte en gras, 16 pixels, Arial. |
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-block. 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 HTML 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 <pre>) |
||
Césure forcée | word-wrap | Avec la valeur break-word, le texte sera coupé s'il dépasse du cadre. | ||
Ombre de texte | text-shadow | Décalage vertical, décalage horizontal, adoucissement, couleur Code : CSS - Sélectionner
|
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 |
Type | Propriété | Valeurs possibles | ||||
---|---|---|---|---|---|---|
Image de fond | background-image | Indiquer l'url de l'image (notation absolue ou relative) Code : CSS - Sélectionner
Il est possible de combiner plusieurs images de fond, en séparant les déclarations par des virgules. |
||||
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 :
Code : CSS - Sélectionner
|
||||
Super-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 - Sélectionner
|
||||
Transparence | opacity | Valeur entre 0 (transparence totale) et 1 (opacité totale). Exemple pour une transparence de 50% :Code : CSS - Sélectionner
|
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 |
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 | ||
Super-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 - Sélectionner
|
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 |
Super-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 :
|
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 - Sélectionner
|
||
Bordure en haut | border-top | Idem | ||
Bordure à droite | border-right | Idem | ||
Bordure en bas | border-bottom | Idem | ||
Super-propriété de bordure | border | Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche. | ||
Bordure arrondie | border-radius | Indiquer une valeur en px, ou 4 valeurs pour chacun des coins, en partant de celui en haut à gauche. | ||
Ombre | box-shadow | Décalage vertical, décalage horizontal, adoucissement, couleur Code : CSS - Sélectionner
|
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>) inline-block : l'élément est affiché comme un inline mais peut être redimensionné comme un block. 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 - Sélectionner
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". |
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. |
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 - Sélectionner
|
||
Super-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 - Sélectionner
|
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 |
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 : Code : CSS - Sélectionner
Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani. Notez aussi la présence du mot auto à la fin. Cela signifie que le navigateur tentera de charger le curseur personnalisé. S'il n'a pu être chargé pour une quelconque raison, le curseur correspondant à la valeur auto sera utilisé. |
Recenser les propriétés CSS n'est ni reposant, ni amusant je vous l'assure
!
Les plus experts d'entre vous auront remarqué que je n'ai pas mis toutes
les propriétés CSS, comme je l'ai dit au début. En effet, mon but n'était
pas de faire la liste complète mais plutôt de vous fournir un support
lorsque vous codez en CSS.
J'ai donc conservé les propriétés CSS qui me paraissaient les plus souvent
utilisées.