retour à la page d'accueil

COURS

Le calendrier des cours

Le cahier des charges

Méthode de travail

Les principes du html

Le traitement des images

Les liens

Les tableaux

Les bases du CSS


AIDE MEMOIRE

Les balises HTML

Dictionnaire CSS
Les noms des couleurs

Les codes de couleur hexadécimaux

Les images réactives

Comment faire neiger

Les fenêtres ou frames

Faire dérouler du texte

Liens utiles
pour m'écrire

Dictionnaire CSS

Les styles de police

TypeNomValeurs possibles
Nom de police font-family
Indiquer les noms de polices possibles par ordre de préférence :

Code : CSS 
1
 
font-family:police1, police2, police3;

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
1
font-family: "Arial Black", Arial, serif;

Taille du texte font-size Indiquez la taille du texte.
Plusieurs unités sont possibles :
  • px (pixels)
  • % (pourcentage, 100% = normal)
  • em (taille relative, 1.0 = normal)
  • ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
  • nom de taille :
    • 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
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)
Méga-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
1
font: bold, 16px, Arial;

Cela mettra votre texte en gras, 16 pixels, Arial.



L'alignement

TypeProprié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ère-plans

Couleur

TypePropriétéValeurs possibles
Couleur de texte color Indiquer une couleur avec l'une des méthodes suivantes :
  • En tapant le nom de la couleur en anglais (black, blue, green, white, red...).
  • En indiquant la couleur en hexadécimal (#CC48A1)
  • En indiquant la couleur en RGB : rgb (128, 255, 0)
Couleur de fond background-color Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte


Image de fond

TypePropriétéValeurs possibles
Image de fond background-image Indiquer l'url de l'image (notation absolue ou relative)
Code : CSS
1
2
 
background-image:url("images/fond.png"); 
/* Notation relative */
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 :
  • En notant une distance en px ou %, par rapport au coin en haut à gauche.

    Code : CSS
    1
    background-position:50px 200px; 
/* 50 px à droite, 200px en bas */
  • En utilisant des valeurs prédéfinies, une pour la verticale et une pour l'horizontale :
    top : en haut, verticalement
    center : au milieu, verticalement
    bottom : en bas, verticalement

    left : à gauche, horizontalement
    center : au centre, horizontalement
    right : à droite, horizontalement

Code : CSS
1
background-position : bottom right; 
/* en bas à droite */
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 
1

2

/* Le fond fond.png reste affiché en haut à droite 
de l'écran et n'est pas répété. */
background:url("images/fond.png") 
no-repeat fixed top right;


Les boites et leurs bordures

Dimensions des boites

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

TypeProprié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 :
  • 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.
Par exemple, si je mets 2 valeurs :
Code : CSS
1
margin:20px 5px; 

/* 20px de marge en haut et en bas, 
5px à gauche et à droite */


Marges intérieures

TypeProprié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 :
  • 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.

Bordures

TypeProprié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
1
border-left: 2px inset blue; 

/* Bordure bleue de 2px + effet 3D "enfoncé" */
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

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


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

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

TypePropriétéValeurs possibles
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. Exemple :

Code : CSS
1
list-style-image: url("images/puce.png");
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
1
list-style: inside square;

Les tableaux

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

TypeProprié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
1
cursor: url("images/curseur.cur");


Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani