Les CSS et la gestion des différentes polices

Les CSS et la gestion des différentes polices
La police, la taille du texte, gras ou pas, tous ces paramètres
sont réglables en CSS.
font-family:
font-size:
font-style:
font-variant:
font-weight:
Famille de police
Taille de votre police de caratère
Le style de police. Gras, italique, oblique...
La variante de police
La taille de la police
Les CSS et la gestion des différentes polices
1.Famille de police.
Vous devez indiquer le nom de la police comme ceci :
font-family:police;
Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a
pas la même police que vous, on met en général plusieurs noms
de police, séparés par des virgules :
font-family:police1, police2, police3, police4;
Le navigateur essaiera d'abord de mettre la police1. S'il ne l'a pas,
il essaiera de mettre la police2. S'il ne l'a pas, il essaiera la
police3 et ainsi de suite.
En général, on met en tout dernier "serif", ce qui correspond à une
police standard (qui ne se met que si aucune autre police n'a été
trouvée).
Les CSS et la gestion des différentes polices
Voici une liste de polices qui fonctionnent bien sur la plupart des
navigateurs et que vous pouvez donc utiliser sans crainte :
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana
Les CSS et la gestion des différentes polices
2.Taille de votre police de caractère.
Vous devez indiquer le nom de la police comme ceci :
font-size:taille;
En réalité, les possibilités pour modifier la taille du texte sont
nombreuses (et variées !).
En pixels : c'est une façon très précise d'indiquer la taille du
texte. C'est à vous de dire combien de pixels exactement doit faire
le texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :
font-size:16px;
Les CSS et la gestion des différentes polices
En donnant une valeur relative : c'est-à-dire en écrivant
carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr,
comme tout c'est en anglais, vous devez écrire:
font-size: xx-small
Voici la liste des différentes valeurs que vous pouvez mettre ainsi
que leur signification :
xx-small :
minuscule
x-small :
très petit
small :
petit
medium :
moyen
large :
grand
x-large :
très grand
xx-large :
euh... gigantesque
Les CSS et la gestion des différentes polices
En pourcentage : ça c'est facile. Si vous indiquez "100%", le
texte aura une taille "normale". Si vous mettez "130%", le texte
aura une taille correspondant à 130% de la taille normale. Ca
ressemble énormément aux "em" (en fait c'est plus ou moins
pareil). Après, tout est une question de goût. Vous devez écrire:
font-size:140%
Les mentions en pourcentage se réfèrent à la taille de police de
l'élément parent.
Les CSS et la gestion des différentes polices
3.Le style de police. Vous devez indiquer le nom de la police
comme ceci :
font-style: italic;
Avec font-style: vous pouvez spécifier le style de police. Les
données suivantes sont possibles:
italic = style de police italique.
oblique = style de police oblique.
normal = style de police normal.
Les CSS et la gestion des différentes polices
4.La variante de police. Vous devez indiquer le nom de la police
comme ceci :
font-variant:valeur;
Cette option d'afficher en petites capitales, peut vous être utile
pour réaliser des titres ou sous-titres mais son utilité est vite
limitée et sa répétition peut devenir pénible pour le visiteur.
Vous devez écrire:
font-variant: normal
Valeurs possibles
normal
=variante de police normale.
small-caps =petites capitales.
Les CSS et la gestion des différentes polices
5.La taille de la police (graisse de police). La graisse de police
correspond à l'état plus ou moins gras dans lequel la police est
représentée.Vous devez indiquer le nom de la police comme ceci :
font-weight: valeur
Vous pouvez contrôler la taille de votre texte. Valeurs possibles:
bold = gras.
bolder = très gras.
lighter = plus fin.
100,200,300,400,500,600,700,800,900 = très fin (100) jusqu'à très
gras (900)
normal = graisse normale de police.
Attention:
Il n'y a pour ainsi dire aucune police installée qui supporte
toutes les mentions permises relatives à la graisse de police.
Les CSS et la gestion des différentes polices
Exemple:
1. Ouvrir l'éditeur de texte.
Si vous utilisez Notepad++, pensez à aller dans le menu
"Langage / CSS" pour activer la coloration du CSS.
Vous penserez à enregistrer votre fichier en .css au lieu de .html
2. Créons un modèle de texte
Cette page sera un fichier CSS nommée: styles_polices.css
#police {
font-family: Arial, Helvetica, sans serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
Les CSS et la gestion des différentes polices
Ecrire les codes Html suivants dans le fichier polices.htm
Pour inclure notre CSS dans notre page HTML, il nous suffit d'insérer le code
suivant entre les balises <head> et </head>:
<link rel="stylesheet" type="text/css" href="styles_polices.css">
pour indiquer le chemin du fichier style_div.css
Les CSS et la gestion des différentes polices
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link href="styles_polices.css" rel="stylesheet" type="text/css">
<title>Police et CSS</title>
</head>
<body>
<div id="police">Ceci est une police arial de 14px gras italique et avec des
petites majuscules</div>
</body>
</html>
Résultat
Les CSS et la gestion des différentes polices
Les classes et les ID
Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises.
Pour cela les spécifications CSS ont introduit le concept de classe.
La définition des classes est aussi simple que celles des styles. Elle consiste à
préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui
ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la
classe peut-être composé de lettres (accentuées ou non), de chiffres et de tirets :
Modifions notre exemple le # est remplacer par un point
.police {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
Les CSS et la gestion des différentes polices
Appel d'une classe dans le fichier polices.htm
Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class
à la balise :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link href="styles_polices.css" rel="stylesheet" type="text/css">
<title>Police et CSS</title>
</head>
<body>
<div class="police" id="boite">Ceci est une police arial de 14px gras italique et
avec des petites majuscules</div>
</body>
</html>