Le CSS : Annexe

Le CSS : Annexe
1°) Mise en forme du texte
• Taille du texte : On utilise la propriété font-size. Pour l'utiliser, on peut choisir d'indiquer une taille absolue en pixels
ou une taille relative. Cette dernière méthode est conseillée car elle permet au texte de s'adapter plus facilement aux
réglages de tous les visiteurs.
Exemples :
font-size : 20px;
taille absolue : affichera le texte avec une taille de 16 pixels de hauteur.
font-size : small;
taille relative : affichera le texte en petit (les autres valeurs possibles sont
xx-small, x-small, medium, large, x-large, xx-large.
• Police de caractères : Pour que votre site s'affiche en utilisant une police de caractères particulière plutôt que celle
par défaut, vous pouvez utiliser la propriété font-family. Mais cela suppose que la police en question doit être présente
sur l'ordinateur du visiteur. Pour cette raison, il est conseillé de proposer plusieurs possibilités de polices. Elle seront
essayées dans l'ordre jusqu'à en trouver une qui soit installée.
Exemple : font-family : Arial, ”Courier New”, Verdana;
• Italique (mais pas que) : Le CSS permet en fait de choisir entre deux types d'écritures en utilisant la propriété fontstyle. Elle peut prendre trois valeurs : italic (le texte est écrit en italique), oblique (écriture légèrement différente de
l'italique), normal (pour annuler une mise en italique, par exemple).
Exemple : font-style : italic;
Le texte sera en italique.
• Gras : On peut mettre un texte en gras avec la propriété font-weight qui peut prendre deux valeurs : bold et normal.
Exemple : font-weight : bold;
Le texte sera écrit en gras.
• Décorations diverses : La propriété text-decoration permet d'appliquer d'autres effets sur un texte. Elle peut prendre
les valeurs : underline, line-through, overline, blink, none. Je vous laisse le soin de les tester.
Exemple : text-decoration : underline;
Le texte sera souligné.
• Aligner son texte : Par souci de clarté, il est conseillé de toujours aligner son texte dans un paragraphe, c'est-à-dire de
choisir s'il sera aligné à gauche, aligné à droite, centré ou justifié. C'est ce dernier réglage qui est adopté dans la plupart
des publications en presse. Il faut alors utiliser la propriété text-align qui peut prendre les valeurs left (par défaut), right,
center, justify.
Exemple : text-align : justify;
Le texte sera justifié.
• Image flottante : Faire flotter une image, c'est faire en sorte de l'intégrer à un paragraphe de texte et que ce dernier
l'entoure. Pour ce faire, il faut d'abord modifier le fichier HTML sur lequel sera appliqué l'effet : Il faut commencer par
indiquer le chemin de l'image juste avant le texte et l'identifier avec l'attribut class. Il faut ensuite, dans votre fichier
CSS utiliser la propriété float qui peut prendre deux valeurs : left et right.
Exemple :
Le CSS – Annexe 1/3
2°) Couleur et fond
• Couleur du texte : Pour modifier la couleur du texte, on utilise la propriété color. Elle doit prendre comme valeur la
couleur voulue. Cependant, il existe trois méthodes pour la donner :
- Donner le nom de la couleur en anglais. Facile mais limité à quelques couleurs car impossible à utiliser pour des
nuances précises.
- Donner le code hexadécimal de la couleur. Précis mais pas très intuitif. Il existe des sites Internet qui vous permettent
de trouver facilement le code hexadécimal de n'importe quelle couleur. Vous pouvez aller par exemple sur :
http://www.jokconcept.net/codes-couleurs-hexdecimal.php.
- Donner le code RVB de la couleur désirée.
Exemple : écrire en rouge par les trois méthodes.
color: red;
color: #FF0000;
color : rgb(255,0,0) ;
• Couleur de fond : Pour changer la couleur de fond d'un élément, on utilise la propriété background-color. Cette
propriété peut s'appliquer pour modifier la couleur de fond de votre page mais aussi celle de n'importe quel élément
repéré par sa balise : paragraphe, titre...
Exemple :
p
{
background-color: blue;
Tous les paragraphes seront sur fond bleu.
}
• Image de fond : La propriété background-image fonctionne de la même manière que la précédente et peut s'appliquer
à n'importe quel élément de votre page.
Exemple :
body
{
Toute la page sera affectée.
background-image: url(”images/fond.jpg”);
}
• Réglages divers pour l'image de fond : Il existe d'autres propriétés CSS facultatives qui permettent d'affiner
l'affichage de votre image de fond. En voici quelques-unes :
background-attachment : permet de choisir si l'image va être fixe ou défiler avec le texte. Ses deux valeurs possibles
sont fixed ou scroll.
background-repeat : répétition ou nom de l'image de fond. Par défaut, celle-ci est répétée sous forme de mosaïque
jusqu'à remplir tout le fond. Les valeurs possibles sont no-repeat, repeat-x, repeat-y et repeat. Je vous laisse découvrir
leurs effets.
background-position : permet de placer l'image de fond où l'on veut, si on a choisi de ne pas la répéter. Sa valeur peut
être top, bottom, left, center ou right. On peut même faire des combinaisons comme top right.
Exemple :
body
{
background-image: url(”images/fond.jpg”);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: top left;
/*
/*
/*
/*
le
le
le
le
fond
fond
fond
fond
est fond.jpg */
défile */
n'est pas répété */
en haut à gauche */
}
Ainsi, si on utilise plusieurs propriétés pour l'image de fond, le fichier CSS a tendance à s'alourdir assez vite. D'où
l'utilité de la super-propriété background qui permet de tout condenser en une seule ligne. L'ordre des valeurs n'y a
aucune importance et leur nombre non plus. Si on l'utilise, le code précédent devient :
body
{
Le CSS – Annexe 2/3
background: url(”images/fond.jpg”) scroll no-repeat top left;
}
• Transparence : Avec le CSS, on peut attribuer une transparence aux éléments de la page grâce à la propriété opacity.
Sa valeur peut varier de 1 (opaque) à 0 (totalement transparent).
Exemple :
p
{
opacity: 0.5; /* les paragraphes ont 50 % de transparence */
}
On peut aussi utiliser la transparence avec l'attribut RVB de la propriété color (voir plus haut) en y ajoutant un
quatrième paramètre, le canal alpha, qui correspond en fait au niveau de transparence.
Exemple :
color: rgb(255,0,0,0.5); /* écrit en rouge avec une transparence à 50 % */
Voilà, c'est tout pour cette fois. On peut encore faire beaucoup de choses avec le CSS : des bordures, des ombres, des
apparences dynamiques et surtout la mise en page...
Le CSS – Annexe 3/3