Propriétés de formatage de texte
Je résume ici la plupart des
propriétés de formatage de texte.
Qu'est-ce que le formatage de texte ? C'est tout ce qui consiste à mettre en
forme le texte : mettre en gras, italique, souligné, changer la police,
l'alignement etc...
Police, taille et décorations
Type
|
Nom
|
Valeurs possibles
|
Nom de
police
|
font-family
|
Indiquer les noms de polices possibles par ordre de préférence :
Code : CSS
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
font-family: "Arial Black", Arial, Verdana, 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
font: bold,
16px, Arial;
Cela mettra votre texte en gras, 16 pixels, Arial.
|
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.
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>)
|
Propriétés de couleur et de fond
Couleur
Type
|
Proprié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
Type
|
Propriété
|
Valeurs possibles
|
Image de
fond
|
background-image
|
Indiquer
l'url de l'image (notation absolue ou relative)
Code : CSS
background-image:url("images/fond.png"); /*
Notation relative */
background-image:url("http://www.monsite.com/images/fond.png");
/* Notation absolue */
|
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
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
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
/* 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;
|
Propriétés des boîtes
Dimensions
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 :
- 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
margin:20px 5px; /* 20px de marge en
haut et en bas, 5px à gauche et à droite */
|
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 :
- 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
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
border-left: 2px inset blue; /* Bordure bleue de 2px avec 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.
|
Propriétés de positionnement et d'affichage
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
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
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.
|
Propriétés des listes
Type
|
Proprié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...). Ne fonctionne
pas sur Internet Explorer
- 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. Ne fonctionne pas
sur Internet Explorer
|
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
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
list-style: inside
square;
|
Propriétés des 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
|
Autres propriétés
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)
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
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
|
|