Vous lisez
Dictionnaire CSS

Sommaire

Affichage
Nom Code Valeurs possibles Commentaire
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 :

1
clip: rect(valeur1, valeur2, valeur3, valeur4);
 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 ».

Alignement
Nom Code Valeurs possibles Commentaire
Alignement horizontal text-align left : à gauche (par défaut)center : centréright : à droitejustify : texte justifié (prend toute la largeur de la page)
Alignement vertical vertical-align top : en hautmiddle : au milieubottom : en bas A utiliser dans des cellules de tableau, ou dans des éléments inline eux-mêmes contenus dans un élément inline.
Hauteur de ligne line-height Valeur en pixels (px) ou en pourcentage (%)
Alinéa text-indent Valeur en pixels (px) Définir l’alinéa des paragraphes.Ces derniers commenceront avec le retrait indiqué.
Césure white-space normal : Passage à la ligne est automatique (par défaut)nowrap : Pas de passage à la ligne automatiquepre : Passage à la ligne tel que le texte a été saisi dans le code source (comme la balise xHTML <pre>) Pour nowrap: automatique sauf si utilisation d’une balise xHTML <br />.

Bordures
Nom Code Valeurs possibles Commentaire
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.

1
2
border-left: 2px inset blue;
/* Bordure bleue de 2px + effet 3D "enfoncé" */
 L’ordre n’a pas d’importance.
Bordure en haut border-top Idem que border-left
Bordure à droite border-right Idem que border-left
Bordure en bas border-bottom Idem que border-left
Méga-propriété de bordure border Indique l’apparence des bordures en haut, à droite, en bas et à gauche.

Couleur
Nom Code Valeurs possibles Commentaire
Couleur de texte color Nom de couleurs possibles:

black

blue

green

red

Autres noms en anglais…

En indiquant la couleur en hexadécimal:

#CC48A1

En indiquant la couleur en RGB:

rgb (128, 255, 0)

 Définir la couleur du texte.
Couleur de fond background-color Même fonctionnement que color ci-dessus. Définir la couleur de fond d’un élément.

Curseur
Nom Code Valeurs possibles Commentaire
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 possiblen-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-ouesturl : curseur personnalisé, de type .cur ou .ani. Exemple :

1
cursor: url("images/curseur.cur");
 Utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani

Dimensions des boites DIV
Nom Code Valeurs possibles Commentaire
Largeur width Valeur en pixels (px), pourcentages (%), ou encore « auto » (valeur par défaut) En « auto » la largeur dépendra du texte à l’intérieur.
Hauteur height Idem que pour width.
Largeur minimale min-width Valeur en pixels (px) ou pourcentage (%). Définir la largeur minimale d’un élément.
Largeur maximale max-width Idem que pour min-width. Définir la largeur maximale d’un élément.
Hauteur minimale min-height Idem que pour min-width. Définir la hauteur minimale d’un élément.
Hauteur maximale max-height Idem que pour min-width. Définir la hauteur maximale d’un élément.

Image de fond
Nom Code Valeurs possibles Commentaire
Image de fond background-image
1
background-image: url("images/fond.png");
 Url absolue ou relative de l’image.
Fond fixé background-attachment fixed : Fond fixe lorsqu’on descend sur la pagescroll : Fond défilant avec le texte (par défaut)
Répétition du fond background-repeat repeat : Fond répété (par défaut)repeat-x : Fond répété uniquement sur une ligne horizontalerepeat-y : Fond répété uniquement sur une colonne verticaleno-repeat : Fond non-répété, il n’est affiché qu’une fois
Position du fond background-position Distance en px ou %.

1
background-position: 50px 200px;/* 50 px à droite, 200px en bas */

Ou, valeurs prédéfinies:

top : en haut, verticalement

center : au milieu, verticalement

bottom : en bas, verticalement

left : à gauche, horizontalement

center : au centre, horizontalement

right : à droite, horizontalement

1
2
3
background-position: bottom right;

/* en bas à droite */
 Par rapport au coin en haut à gauche.Une valeur pour la position verticale et une pour l’horizontale.
Méga-propriété de fond background Une ou plusieurs valeurs issues des propriétés background-image, background-repeat, background-attachment, background-position.

1
/* Le fond fond.png reste affiché en haut à droitede l'écran et n'est pas répété. */background: url("images/fond.png")no-repeat fixed top right;
 L’ordre des valeurs n’a pas d’importance et il n’est pas obligé de mettre toutes les valeurs de ces propriétés (au moins une suffit).

Listes
Nom Code Valeurs possibles Commentaire
Type de liste list-style-type 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.
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.

1
list-style-image: url("images/puce.png");
Méga-propriété de liste list-style Valeurs de list-style-type, list-style-position et list-style-image.

1
list-style: inside square;
 Toutes les valeurs ne sont pas obligatoires et l’ordre n’a pas d’importance.

Marges extérieures
Nom Code Valeurs possibles Commentaire
Marge en haut margin-top Indiquer une valeur comme 20px, 1.5em…
Marge à gauche margin-left Idem que margin-top
Marge à droite margin-right Idem que margin-top
Marge en bas margin-bottom Idem que margin-top
Méga-propriété de marge margin Indiquer de 1 à 4 valeurs à la suite.

1
2
3
margin: 20px 5px;
/* 20px de marge en haut et en bas,
5px à gauche et à droite */
 La signification change avec le nombre de valeurs indiquées:
1 valeur: sera la marge pour le haut, le bas, la gauche et la droite
2 valeurs: la première sera la marge pour le haut et le bas, la seconde pour la gauche et la droite
3 valeurs: la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas
4 valeurs: respectivement la marge du haut, de la droite, du bas, de la gauche.

Marges intérieures
Nom Code Valeurs possibles Commentaire
Marge intérieure en haut padding-top Indiquer une valeur comme 20px, 1.5em…
Marge intérieure à gauche padding-left Idem que padding-top
Marge intérieure à droite padding-right Idem que padding-top
Marge intérieure en bas padding-bottom Idem que padding-top
Méga-propriété de marge intérieure padding Indiquer de 1 à 4 valeurs à la suite. La signification change avec le nombre de valeurs indiquées:
1 valeur: ce sera la marge pour le haut, le bas, la gauche et la droite
2 valeurs: la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
3 valeurs: la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas
4 valeurs: respectivement la marge du haut, de la droite, du bas, de la gauche.

Positionnement
Nom Code Valeurs possibles Commentaire
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 que top
Position par rapport à gauche left Idem que top
Position par rapport à droite right Idem que top
Ordre d’affichage z-index Indiquer un nombre. 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.
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.

Styles de police
Nom Code Valeurs possibles Commentaire
Nom de police font-family
1
2
font-family: police1, police2, police3;
font-family: "Arial Black", Arial, serif;
 Noms de polices possibles par ordre de préférence et selon disponibilité sur le navigateur du visiteur.Utiliser des guillemets si le nom de la police comporte des espaces. Essayer de toujours mettre comme dernière police possible « serif » ou « sans-serif ».
Taille du texte font-size Unités possibles:

px : pixels

% : pourcentage (100% = normal)

em : taille relative (1.0 = normal)

ex : relatif à la hauteur de la lettre « x » (1.0 = normal)

Noms de tailles:

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

 Indiquez la taille du texte.
Gras font-weight bold : grasbolder : plus graslighter : plus finnormal : pas gras (par défaut) Indiquez l’épaisseur du texte.
Italique font-style italic : italiqueoblique : autre façon de mettre en italiquenormal : normal (par défaut) Indiquez le style du texte.
Décoration text-decoration underline : soulignéoverline : ligne au-dessusline-through : barréblink : clignotantnone : normal (par défaut) Indiquez la décoration du texte.
Petites capitales font-variant small-caps : petites capitalesnormal : normal (par défaut)
Capitales text-transform uppercase : tout mettre en majusculeslowercase : tout mettre en minusculescapitalize : début des mots en majusculesnone : normal (par défaut) Appliquer une transformation au texte.
Méga-propriété de police font
1
font: bold, 16px, Arial;

Texte en gras, de 16 pixels de haut et de police Arial.

 Indiquer dans n’importe quel ordre les 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.Il n’est obligatoire d’indiquer chacune des propriétés.

Tableaux
Nom Code Valeurs possibles Commentaire
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 top : en haut du tableau
bottom : en bas du tableau
left : à gauche du tableau
right : à droite du tableau		 Indique la position du titre du tableau, défini via la balise <caption>

Source: Vieytes

Qu'avez-vous pensé de cet article ?
J'aime
12%
Merci
24%
Pratique
56%
Incomplet
8%
Rien de neuf
0%
Posté dans
HTML/CSS, Web & Python
Tags
css, dictionnaire, liste, valeurs
, , ,
A propos de l'auteur
Olivier Schmitt
Photographe professionnel, originaire d'Alsace (France), ancien Directeur Technique sur les films d'animation "Minions", "Moi, Moche et Méchant" et "Le Lorax".
Commentaires
Laisser une réponse

Laisser une réponse