Le texte
Alignement horizontal : text-align
Le contenu d'unélément de bloc peut
être aligné :
- à gauche (valeur par défaut)
-> text-align:left;
- à droite -> text-align:right;
- centré -> text-align:center;
- justifié -> text-align:justify;
Un
élément de bloc dont
le texte est cadré à gauche
Un
élément de bloc dont
le texte est cadré à droite
Un
élément de bloc dont
le texte est centré
Un
élément de bloc dont
le texte est jsutifié. La justification n'apparait que
lorsque le contenu textuel du bloc dépasse la longeur de
deux lignes. Les lignes sont alignées à gauche et
à droite. Pour parvenir à ce résultat
le navigateur insère des caractères "espace"
arificiels qu'il répartit entre les mots. Lorsque le rapport
entre la largeur de l'élément et la taille de sa
police est faible, le résultat risque de ne
pas être très esthétique. En
général les ergonomes recommandent
d'éviter la justification du texte sur un média
visuel. Elle sera plutôt réservée
à l'impression.
Lorsque
le rapport
entre la largeur de l'élément et la taille de sa
police est faible, le résultat risque de ne
pas être très esthétique.
La propriété text-align est
héritée
Retrait de la première ligne : text-indent
La
propriété text-indent permet de
réaliser un retrait positif ou négatif de la
première ligne d'un élément de bloc.
Les lignes suivantes du bloc se positionnent normalement en tenant
compte des marges de l'élément et des marges
intérieures de l'élément parent. Dans
cet exemple on a défini text-indent: : 50px,
La
propriété text-indent permet de
réaliser un retrait positif ou négatif de la
première ligne d'un élément de bloc.
Les lignes suivantes du bloc se positionnent normalement en tenant
compte des marges de l'élément et des marges
intérieures de l'élément parent. Dans
cet exemple on a défini
text-indent : -50px,
On notera que le retrait négatif ne modifie ni les
dimensions, ni le positionnemnt de l'élément
indenté.
La propriété text-indent est
héritée
Alignement vertical : vertical-align
L'alignement vertical ne s'applique qu'aux
éléments incorporés et
éléments de tableau (tr, td)
Pour un tableau
Appliquée aux cellules d'un tableau, la
propriété vertical-align peut prendre les
varleurs :
Elle permet de spécifier la position verticale du
contenu d'une
cellule de tableau :
| vertcal-align:top; |
vertical-align:middle;
valeur par défaut |
vertical-align:bottom; |
pour un élément incorporé
Un pourcentage
La valeur de vertical-align peut être un pourcentage
de la
hauteur de ligne (line-height) de l'élément
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:0%;
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:0%;
Bloc
contenant un élément
incorporéélément
incorporé
avec la propriété : vertical-align:100%;
Bloc
contenant un élément
incorporéélément
incorporé
avec la propriété : vertical-align:100%;
Bloc
contenant un élément
incorporéélément
incorporé
avec la propriété : vertical-align:-100%;
Bloc
contenant un élément
incorporé
élément
incorporé
avec la propriété : vertical-align:-100%;
Un mot clé
La propriété vertical-align peut
également prendre l'une des valeur suivantes :
- baseline
- sub
- super
- text-top ou top
- middle
- text-bottom ou bottom
- une valeur exprimée en pourcentage de la la
valeur de la propriété lin-height de
l'élément
base-line : équivalent
à 0%
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:baseline;
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:baseline;
sub : pour positionner un
élément en
indice
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:sub;
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:sub;
super : pour positionner un
élément en
exposant
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:super;
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:super;
text-top : le text-top
de
l'élément et de son parent sont alignés
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:text-top;
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:text-top;
middle : le milieu de
l'élément et de
son parent sont alignés
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:middle;
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:middle;
text-top : le
text-bottom de
l'élément et de son parent sont alignés
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:text-bottom;
Bloc
contenant un élément
incorporé
avec la propriété : vertical-align:text-bottom;
La propriété vertical align n'est pas
héritée
Espacement entre les caractères : letter-spacing
Bien qu'en général il n'a pas lieu
d'être modifié, l''espacement des
caractères peut être redéfini.
Un
texte dont les caractères sont
normalement espacés
Un
texte dont les
caractères sont
espacés de 5px - letter-spacing:5px;
Un
texte dont les
caractères sont
espacés de -1px - letter-spacing:-1px;
Un
texte dont les
caractères sont
espacés de 1em- letter-spacing:1em;
L'espacement entre les lettre peut être
donné en px ou en em. Il peut être
négatif, auquel cas il y a supperposition des
caractères.
La propriété letter-spacing est
héritée
Espacement entre les mots : word-spacing
Un
texte dont les mots sont
normalement espacés
Un
texte dont les
mots sont
espacés de 20px - word-spacing:20px;
Un
texte dont les
mots sont
espacés de -8px - word-spacing:-8px;
Un
texte dont les
mots sont
espacés de 1em - word-spacing:1em;
La propriété word-spacing est
héritée
Traitement des espaces : white-space
<div> Normalement le positionnement d'un
élément ne dépend que de sa nature
(bloc ou incorporé) et d'éventuelles
propriétés CSS. En fixant la valeur de la
propriété white-space à "pre", le
contenu se positionne tel qu'il a été saisi dans
le code source. En fixant la valeur ˆ "nowrap" les auts de lignes
automatiques n'ont plus lieu
</div>
comportement par défaut
Normalement le
positionnement d'un élément ne dépend
que de sa nature (bloc ou incorporé) et
d'éventuelles propriétés CSS. En
fixant la valeur de la propriété white-space
à "pre", le contenu se positionne tel qu'il a
été saisi dans le code source. En fixant la
valeur ˆ "nowrap" les auts de lignes automatiques n'ont plus lieu
white-space:pre
Normalement
le
positionnement d'un élément ne dépend
que de sa nature (bloc ou incorporé) et
d'éventuelles propriétés CSS.
En
fixant la valeur de la propriété white-space
à "pre", le contenu se positionne tel qu'il a
été saisi dans le code source. En fixant la
valeur ˆ "nowrap" les auts de lignes automatiques n'ont plus lieu
white-space:no-wrap
Normalement
le
positionnement d'un élément ne dépend
que de sa nature (bloc ou incorporé) et
d'éventuelles propriétés CSS. En
fixant la valeur de la propriété white-space
à "pre", le contenu se positionne tel qu'il a
été saisi dans le code source. En fixant la
valeur ˆ "nowrap" les auts de lignes automatiques n'ont plus lieu
La propriété white-space est héritée
Sens d'écriture : direction
C'est la propriété direction
qui détermine le sens de l'écriture. Elle peut
prendre deux valeur :
- ltr : left to right (valeur
par dŽfaut)
- rtl : right to left
Un
élément dont la direction est ltr
Un
élément dont la direction est rtl
La propriété direction est
héritée
Contenu : content
La propriété content ne s'applique
qu'aux pseudo-élément :before
et :after
Elle permet d'associer un contenu avant un
élément (:before) ou après (:after)
l'élément
Le contenu peut-tre :
- du texte brut (les balises html ne sont pas interprŽtŽes)
- la valeur d'un attribut
- une image
<p> class="telephone domicile"> 03882552
</p>
<p> class="telephone travail"> 03881763
</p>
p.telephone:before{ content: url(puce1.gif) "numero : "
}
p.telephone:after{ content:"(" attr(class) ")" url(Fonds/puce1.gif)
}
Les propriétés de texte, à l'exclusion de la
propriété vertical-align sont héritées
