Texte
| Débuter |
Pour commencer... |
Optimiser |
Pour aller plus loin... |
Titres - Styles - Taille et police - Couleur du texte -
Importer un document
|
Styles
Couleur
Combinaison de plusieurs propriétés
Application des propriétés sur différents styles
Mise en forme de quelques mots
Position
Caractères spéciaux
|
|
Cliquez sur le bouton droit de la souris, sélectionnez
"Afficher la source",
puis recherchez le code qui vous intéresse. |
Cette page contient plusieurs exemples de mise en application des feuilles de styles,
pour la mise en forme d'un paragraphe.
Pour faire la même chose sur une page web complète ou sur un ensemble de pages web, vous
reporter au chapitre Mise en forme - Optimiser .
Pour plus d'infos, voir le paragraphe
Feuilles de styles
de la page "Introduction - Optimiser".
Propriétés du texte
police
- voici quelques exemples, mais tous les noms de police peuvent être utilisés
- Il est recommandé de terminer la liste des styles par un nom de famille générique, comme
dans le 3ème exemple, ci-dessous. En effet, ces noms regroupent plusieurs polices très courantes;
cela permet d'afficher le texte même si les polices du début de la liste n'existent pas sur
l'ordinateur du visiteur.
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 1 |||||
texte en police "arial"
texte en police "courier"
dans ce texte c'est le style
"comic sans MS " qui est utilisé, s'il est présent sur l'ordinateur du visiteur, sinon il est remplacé par le
style "verdana" et si celui-ci n'existe toujours pas il est remplacé par une police faisant partie de la famille
générique "serif".
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
style de police
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 2 |||||
style de police "normal"
style de police "italic"
style de police "oblique"
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
espaces entre les lettres et entre les lignes
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 3 |||||
letter-spacing "normal"
letter-spacing "8 pixels"
letter-spacing "3 millimètres"
Dans ce texte, je souhaite que la première ligne soit décalée par
rapport à la suite du texte, comme nous le faisons souvent lorsque nous rédigeons un paragraphe. Je
définis donc un retrait de 50 pixels.
Dans ce texte, j'applique un espacement de 30 pixels, entre les lignes. Bien entendu, je peux également donner une valeur
en millimètres (mm), centimètres(cm)...pour plus d'infos, voir le paragraphe "Dimensions" de la page "Introduction - Optimiser".
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
type d'affichage
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 4 |||||
Font-variant "normal"
Font-variant "small-caps"
Text-transform "none"
Text-transform "uppercase"
Text-transform "lowercase"
Text-transform "capitalize" (ce type ajoute automatiquement des majuscules)
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
il existe 9 densités de police
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 5 |||||
densité de police "100"
densité de police "200"
densité de police "300"
densité de police "400"
densité de police "500"
densité de police "600"
densité de police "700"
densité de police "800"
densité de police "900"
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
taille de la police
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 6 |||||
taille de police "xx-small"
taille de police "x-small"
taille de police "small"
taille de police "medium"
taille de police "large"
taille de police "x-large"
taille de police "xx-large"
taille de police "25 pixels"
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
soulignement du texte
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 7 |||||
texte "none"
texte "underline"
texte "overline"
texte "line-through"
texte "blink"
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
exemple
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 8 |||||
la couleur de ce texte est définie par le nom "red" qui fait partie de la
liste que vous pouvez consulter dans la page "Couleurs - Débuter"
la couleur de ce texte est définie par la valeur hexadécimale "#cc66ff"
qui fait partie de la liste que vous pouvez consulter dans la page "Couleurs - Optimiser"
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
exemple
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 9 |||||
sur ce texte j'applique les propriétés suivantes : police "verdana", densité de police "900",
soulignement "underline", couleur "olive"
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
exemple
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 10 |||||
couleur rouge appliquée sur un titre de style "h2"
couleur rouge appliquée sur un texte de style "p"
couleur rouge appliquée sur un texte de style "strong"
couleur rouge appliquée sur un texte de style "cite"
couleur rouge appliquée sur un texte de style "tt"
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
C'est la balise <span>...</span> qui
permet de réaliser ceci.
exemple
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 11 |||||
Ce texte est défini avec la police "courier" et la
couleur "fuchsia", mais ponctuellement je souhaite que
la couleur bleue s'affiche en bleu et avec un espacement de 5mm, entre les lettres.
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
exemple
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| code 12 |||||
position verticale:
"baseline"
"middle"
"sub"
"super"
"text-top"
"text-bottom"
texte aligné à gauche
texte aligné à droite
texte centré
Bien entendu, un peu comme avec n'importe quel éditeur de texte, j'ai
la possiblité d'appliquer la propriété "justifier", et c'est ce que je fais ici. Comme vous le savez peut-être, cette propriété
dimensionne les espaces de façon à donner une impression d'alignement au niveau du bord gauche et du
bord droit d'un paragraphe.
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Conclusion
A l'intérieur d'une balise, je ne peux pas utiliser certains caractères, comme par
exemple "<"; il faut donc faire usage des caratères spéciaux, dont voici la liste des principaux:
Pour plus d'infos sur les feuilles de styles, voir le paragraphe
Feuilles de styles du carnet d'adresses.