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