- les titres ci-dessus sont définis en "times" -
Plusieurs chapîtres vont s'ouvrir pour traiter de la mise en forme de la police, du texte, de l'arrière-plan, des paragraphes, des marges, des bordures, des listes, des tableaux et bien sûr du positionnement.
Mise en forme de la police
Découvrez les premières "déclarations" avec les "propriétés" élémentaires et les "valeurs" données pour chacune d'elles, commentées et accompagnées d'exemples.
La spécification finale d'une police se fait selon les caractéristiques suivantes qui permettent de la personnaliser avec le raccourci "font" (tronc commum qui en anglais signifie : police de caractères) . Au final le texte est présentéavec une police, une taille, un style et des variantes bien précises.
"font-family" = la famille de polices
"font-size" = la taille de police (ou corps)
"font-style" = le style de police
"font-variant" = la variante de police
"font-weight" = l'étirement de police
"font-stretch" =chasse de la police
font-family
Une famille de polices correspond à un groupe de polices, dont les caractères représentent des similitudes dans leur présentation comme dans la famille HELVETICA avec des caractères en gras, en italiques, des petites majuscules, ou encore un écartement différent des caractères, etc...Cette propriété suit les règles d'hérédité.
Pour rédiger un document vous avez recours à une ou plusieurs polices de caractères et ce chapitre est certainement un des plus importants concernant la mise en forme du texte dans vos pages. Voici comment d'une part spécifier les polices telles que vous souhaitez les voir apparaître sur l'écran du visiteur, et d'autre part si le visiteur ne possède pas la police que vous avez choisie, voici comment lui substituer une autre police présélectionnée afin de conserver à votre page une présentation dirons-nous honorable.
font-family: georgia, prestige, sans-serif ; propriété et valeurs servant à définir la police et l'ordre de présentation est imposé au navigateur pour l'affichage. En mentionner 2 ou 3 permet si le visiteur n'a pas la première, de lui proposer la seconde et éventuellement la troisième pour éviter l'affichage de sa police par défaut, qui risque souvent de rendre votre page méconnaissable en fonction des paramètres qu'il a choisi ou, parfois il ignore même qu'il peut en choisir une.(en fin de liste serif ou sans-serif sont les plus utilisées vous allez comprendre milieu de cette page)Si une police choisie contient un espace comme Courier New il faut l'encadrer de guillemets : Georgia, "Courier New", "New Roman", Verdana, Serif.
Si vous n'avez pas enlevé dans votre code source la (ou les) polices habituelles HTML, rappelez-vous que la priorité reste accordée au code CSS.
Deux familles distinctes
- famille classique : arial, verdana, times, ....
- famille générique : serif, sans-serif, cursive, fantasy, monospace.
Rappel : Il arrive que chaque visiteur qui possède pourtant un nombre important de fontes n'ait justement pas celle que vous souhaitez lui voir utiliser, surtout si elle n'est pas trop diffusée. C'est pour pallier à cet inconvénient qu'il est recommandé de placer une famille générique prédéfinie en fin de liste. Ainsi lorsque l'ordinateur du visiteur ne possède pas la famille classique ou spéciale proposée, son navigateur va appliquer une police de la famille générique mentionnée dans vos déclarations de styles. ici "sans-serif".
Serif = Bodoni, Roman, Times, Georgia, "Times New Roman", Garamond,... (= avec petit empattement aux extrémités)
Sans-serif = Arial, Helvetica, Verdana, Univers, "MS Trebuchet",... (= extrémités simples et droites)
( les polices Sans-serif plus faciles à lire à l'écran que les polices Serif, mais à l'inverse les polices Serif plus adaptées à l'impression)
Cursive = Chancery, Script, Brush,... (en italique) possèdent différentes dénominations : cursive, italique, oblique, slanted mais en CSS on parle de cursive.
Monospace = (largeur fixe de caractères)
Courier, "MS Courier New", Prestige, Lucida, "Everson Mono";...Fantasy = Algerian, Critter, Rosewwod,... (plutôt de style décoratif) outre les caractères représentent parfois des petites images et symboles.
Codes css placés dans HEAD
.... </title>
<STYLE TYPE="text/css">
h4
{
font-family: times, verdana, sans-serif ;
color: green ;
font-style: italic ;
background-color: #FFFFFF ;
font-size: 16pt ;
}
</style>
Code source dans BODY
<H4> Les feuilles de style en cascade (Cascading Style Sheets - CSS) traitent le problème du contrôle de la mise en page, en permettant aux auteurs de créer des feuilles qui affichent des marges précises, différents styles de polices... etc." </H4>
Résultat de l'exemple
Les feuilles de style en cascade (Cascading Style Sheets - CSS) traitent le problème du contrôle de la mise en page, en permettant aux auteurs de créer des feuilles qui affichent des marges précises, différents styles de polices... etc. "
Sommaire CSS ... @ ... Propriété "font-size"
