Cours gratuits » Cours informatique » Cours développement web » Cours HTML

Cours Html Formatage de police

Télécharger Cours Html Formatage de police

★★★★★★★★★★5 étoiles sur 5 basé sur 1 votes.
Votez ce document: ☆☆☆☆☆★★★★★

Télécharger aussi :

Formatage de police
	(Famille de police) (Style de police) (Variante de police) (Taille de police) (Graisse de police) (Étirement de la police) (Police en général) (Espace des mots) (Espace des signes) (Décoration du texte) (Transformation du texte) (Couleur du texte) (Ombrage du texte)

Sous le terme formatage de police, il faut comprendre les mentions concernant le genre de police, la taille de police, la graisse de police, les espaces entre les signes et les mots etc Ces mentions se prêtent à tous les éléments HTML qui peuvent contenir du texte. En font partie tous les repères qui sont décrits dans le chapitre sur les , mais aussi par exemple tous les repères pour les . Même sur l'élément body il est possible d'employer les mentions de feuilles de style énumérées ici - dans ce cas les mentions sont valables pour tous les éléments de texte de tout le fichier HTML.

Sous le terme famille de police, il faut comprendre les espèces de polices comme par exemple Arial, Helvetica, Times Roman etc En font également partie des familles de police comme Sans Sérif etc

Avec la commande décrite ici, vous pouvez mentionner des espèces de polices sans vous soucier comment et si la police peut être affichée chez l'utilisateur. Au cas où la police mentionnée ne peut pas être affichée, la mention reste sans effet. Une possibilité d'imposer des polices en mentionnant une certaine source de données de polices est décrite dans la partie traitant du .

Exemple:

<html><head><title>font-family</title>

petit texte d'exemple en

Times New Roman

grand texte d'exemple

en Times New Roman

petit texte d'exemple

en Verdana

grand texte d'exemple en Verdana

</body></html>

Explication:

Avec font-family: vous pouvez spécifier une ou plusieurs polices. Si vous en mentionnez plusieurs, l'ordre dans lequel vous les mentionnez est déterminant: si la première est disponible, elle sera utilisée, sinon ce sera la deuxième au cas où elle est disponible etc

Séparez les noms de polices par des virgules. Le consortium W3 recommande de mettre entre guillemets les noms de police qui contiennent des espaces, donc par exemple font-familiy:"Century Schoolbook",Times. Vous pouvez utiliser pour le faire les guillemets doubles ou le guillemet simple (apostrophe). Au cas où les propriétés CSS comme dans l'exemple ci-dessus sont placées dans un attribut style dans du code source HTML, elles ne peuvent pas utiliser les mêmes guillemets que ceux utilisés pour l'affectation de valeur à l'attribut HTML. Dans l'exemple ci-dessus, vous voyez que l'affectation de style est placée dans des guillemets doubles. À l'intérieur sont utilisés pour cette raison des guillemets simples pour 'Times New Roman', ce qui permet d'éviter les conflits.

Les familles de police génériques suivantes dont prédéfinies - Vous pouvez utiliser ces mentions à côté du nom de police:
serif = une famille de police avec empattement,
sans-serif = une famille de police sans empattement,
cursive = une famille de police pour écriture manuscrite,
fantasy = une famille de police pour écriture originale,
monospace = une famille de police avec des signes courrier.
Il est recommandé, de noter ces familles de polices comme dernière mention d'une affectation de valeur à font-family - comme dans le premier des exemples ci-dessus. Vous donnez ainsi la chance au navigateur de choisir une famille de police qui corresponde au moins au type de celle que vous désirez, au cas ou la police désirée ne peut pas être affichée.

Le style de police désigne l'orientation de la police.

Exemple:

<html><head><title>font-style</title>

.italique { font-style:italic; }

.granditalique { font-style:italic; font-size:200%; }

</style>

petit texte d'exemple avec le style de police italique

grand texte d'exemple avec le style de police italique

</body></html>

Explication:

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.

Comme variante de police particulière existent les capitales (petites majuscules).

Exemple:

<html><head><title>font-variant</title></head>

petit texte d'exemple

avec la variante de police normale

grand

texte d'exemple avec la variante de police normale

petit texte d'exemple

avec la variante de police petites capitales

grand texte d'exemple avec la variante de police petites capitales

</body></html>

Explication:

Avec font-variant: vous pouvez spécifier la variante de police. Les données suivantes sont possibles:

small-caps = petites capitales.
normal = variante de police normale.

La taille de police est la taille dans laquelle elle sera représentée.

Exemple:

Texte d'exemple avec une taille de police de 6pt

</body></html>

Explication:

Avec font-size: vous pouvez spécifier la taille de police. Une . est permise. Une mention en pourcentage est également permise. Les mentions en pourcentage se réfèrent à la taille de police de l'élément parent.

Les mentions "approximatives" suivantes sont aussi possibles et offrent une alternative aux données numériques:

xx-small =minuscule.
x-small = très petit.
small = petit.
medium = moyen.
large = grand.
x-large = très grand.
xx-large = géant.
smaller = visiblement plus petit que normal.
larger = visiblement plus grand que normal.

Attention:

Vous pouvez combiner la mention de la taille de police avec la mention de la , en notant les deux mentions dans la propriété en respectant la syntaxe suivante (exemple): p { font:12pt/14pt }. Dans l'exemple la taille de police est de 12 points et la hauteur de ligne est de 14points. Pour cette façon de noter, le nombre placé avant la barre oblique désigne la taille de police et le nombre derrière la barre oblique, la hauteur de la ligne.

La graisse de police correspond à l'état plus ou moins gras dans lequel la police est représentée.

Exemple:

<html><head><title>font-weight</title>

</head><body bgcolor="#FFFFFF" text="#000000">

petit texte d'exemple

avec un poids de police en gras

grand texte d'exemple

avec un poids de police en gras

petit texte d'exemple

avec un poids de police 100

grand texte d'exemple

avec un poids de police 100

</body></html>

Explication:

Avec font-weight: vous pouvez déterminer la graisse de la police. les mentions permises relatives à la graisse de la police:

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.

Pour les valeurs numériques la mention 500 correspond dans le domaine DTP au réglage habituel medium(moyen), et la mention 700 correspond au réglage bold(gras).

Attention:

Il n'y a pour ainsi dire aucune police installée qui supporte toutes les mentions permises relatives à la graisse de police.

L'étirement de la police mentionne à quel point la police paraît étroite ou large.

Exemple:

<html><head><title>font-stretch</title>

</head><body bgcolor="#FFFFFF" text="#000000">

petit texte d'exemple avec un étirement plus large (wider)

grand texte d'exemple avec un étirement plus large (wider)

petit texte d'exemple avec un étirement plus serré (narrower)

grand texte d'exemple avec un étirement plus serré (narrower)

</body></html>

Explication:

Avec font-stretch: vous pouvez fixer l'étirement de la police. Les mentions suivantes sont possibles:

wider = plus large que normal.
narrower = plus serré que normal.
condensed = condensé.
semi-condensed = à moitié condensé.
extra-condensed = très condensé.
ultra-condensed = extrêmement condensé.
expanded = étendu.
semi-expanded = à moitié étendu.
extra-expanded = très étendu.
ultra-expanded = extrêmement étendu.
normal = étirement normal.

Attention:

Cette propriété n'est pas encore interprétée par les navigateurs répandus.

Cette mention est un résumé des mentions distinctes facultatives suivantes:

Exemple:

#Texte01 { font:bold 12pt Times; }

#Texte02 { font:italic 1cm Helvetica; }

#Texte03 { font:small-caps 14pt Verdana; }

</style>

Texte d'exemple avec police: bold 12pt Times

Texte d'exemple avec police: italic 1cm Helvetica

Texte d'exemple avec police: small-caps 14pt Verdana

</body></html>

Explication:

Avec font: vous pouvez mélanger différents formatages de police. Les mentions de valeur habituelles sont permises pour les propriétés de feuilles de style autorisées qui sont résumées dans font:. L'ordre des mentions n'a pas d'importance.

Avec cette mention, vous pouvez spécifier l'espace entre les mots dans le texte.

Exemple:

<html><head><title>word-spacing</title>

</head><body bgcolor="#FFFFFF" text="#000000">

Texte d'exemple avec espacement des mots de 6pt

Texte d'exemple avec espacement des mots de 8pt

</body></html>

Explication:

Avec word-spacing: vous pouvez déterminer l'espace entre les mots. Une est permise, mais cependant aucune en pourcentage.

Attention:

Cette mention n'est pas encore interprétée par tous les navigateurs.

Avec cette mention vous pouvez spécifier l'espace entre les lettres ou signes dans le texte.

Exemple:

<html><head><title>letter-spacing</title>

</head><body bgcolor="#FFFFFF" text="#000000">

Texte d'exemple avec espacement des caractères de 1pt

Texte d'exemple avec espacement des caractères de 2pt

</body></html>

Explication:

Avec letter-spacing: vous pouvez spécifier l'espacement de la police. Une est permise, mais cependant aucune en pourcentage.

Attention:

Cette mention n'est pas encore interprétée par Netscape 4.x .

Avec cette propriété vous pouvez apporter des formatages supplémentaires comme préciser si le texte doit être souligné ou barré.

Exemple:

<html><head><title>text-decoration</title>

a:link { text-decoration:none; }

a:visited { text-decoration:line-through; }

a:hover { text-decoration:underline; }

a:active { text-decoration:underline; }

</style>

</head><body bgcolor="#FFFFFF" text="#000000">

Vour connaissez certainement la <a href="">page d'accueil à SELFHTML</a>

Mais vous connaissez aussi les <a href="">modules CPAN</a>?

ou bien les <a href="">abréviations de langue</a>?

</body>

</html>

Explication:

Avec text-decoration: vous pouvez spécifier des formatages complémentaires. Les mentions suivantes sont possibles:

underline = souligné.
overline = ligne au dessus.
line-through = barré.
blink = clignotant.
none = normal (pas de décoration du texte).

Attention:

L'Explorer Internet MS n'interprète pas la mention blink. Netscape 4.x n'interprète pas encore la mention overline ce que fait pourtant Netscape 6.x.

Avec cette mention vous pouvez imposer dans un passage de texte des minuscules, des majuscules ou des capitales indépendamment de la façon dont les lettres figurent effectivement dans le fichier.

Exemple:

<html><head><title>text-transform</title>

</head><body bgcolor="#FFFFFF" text="#000000">

petit texte d'exemple

avec transformation du texte capitalize

grand texte d'exemple avec transformation du texte capitalize

</body>

</html>

Avec text-transform: vous pouvez forcer une transformation du texte. Les données suivantes sont possibles:

capitalize = début des mots en majuscules.
uppercase = tout en majuscules.
lowercase = tout en minuscules.
none = normal (pas de transformation du texte).

Attention:

L'Explorer Internet 4.x n'interprète pas encore la mention capitalize.

Avec cette mention vous pouvez spécifier la couleur de premier plan pour le texte ou bien une couleur de police.

Exemple:

<html><head><title>color</title>

</head><body bgcolor="#FFFFFF" text="#000000">

petit texte d'exemple avec la couleur bleu

grand texte d'exemple avec la couleur bleu

</body></html>

Explication:

Avec color: vous pouvez spécifier la couleur du texte. Les sont permises.

Astuce:

Pour la définition de couleurs vous pouvez utiliser l' de SELFHTML.

Avec cette mention vous pouvez créer un effet d'ombre pour le texte.

Exemple:

<html><head><title>text-shadow</title>

#ombrerouge { text-shadow:black; font-size:36pt; color:red; }

#ombrebleue { text-shadow:black; font-size:36pt; color:blue; }

</style>

</head><body bgcolor="#FFFFFF" text="#000000">

grand Texte rouge avec ombre noire

grand Texte noir avec ombre verte

</body></html>

Explication:

Avec text-shadow: vous pouvez imposer un ombrage au texte. Les ou bien la valeur none pour "aucune ombre pour le texte" sont permises.

Attention:

Cette commande qui appartient à la version 2.0 des feuilles de style CSS n'est encore interprétée à l'heure actuelle par aucun des navigateurs répandus.

1141