Aligner le texte verticalement
vertical-align permet d'aligner le texte sur la hauteur de ligne.
On peut utiliser un mot clé ou une valeur numérique exprimée en pourcent
Mise en exposant et la mise en indice |
vertical-align : baseline | /*valeur par défaut, alignement vertical normal*/ |
vertical-align : sub | /*place le texte en indice (sans modification de la taille des caractères)*/ |
vertical-align : super | /*place le texte en exposant (sans modification de la taille des caractères)*/ |
vertical-align : 12% | /*place le texte en exposant*/ |
vertical-align : -10% | /*place le texte en indice*/ |
Démo
<html>
<head>
<style>
.av1 {
vertical-align:super;
}
.av2 {
vertical-align:sub;
}
.av3 {
vertical-align:65%;
}
.av4 {
vertical-align:-15px;
}
</style>
</head>
<body>
<div>
Je détiens la vérité, aussi vrai que 3<span class="av1">2</span> font 9<br>
Moi aussi je détiens la vérité, aussi vrai que le mot<span class="av2">coucou</span> est en indice.<br>
L'utilisation des % dans le vertical-<span class="av3">align</span> que j'ai envoyé à 65% vers le haut.<br>
Je détiens la vérité, aussi vrai que j'ai placé le <span class="av4">2</span> 15 px au dessous.<br>
</div>
</body>
</html>
Espaces inter-caractères
La propriété letter-spacing permet d'espacer les caractères d'un mot.
Comme d'habitude on peut utiliser l'unités de son choix, rem est le plus adéquat.
Espacements: |
letter-spacing : 1.2rem | /*espacement de 1.2px des lettres*/ |
Démo
<html>
<head>
<style>
h1{letter-spacing:1.2rem}
</style>
</head>
<body>
<h1>Citations</h1>
<div>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
</body>
</html>
Espaces inter-mots
La propriété word-spacing permet d'espacer les mots d'un texte.
Espacements: |
word-spacing : 1.2rem | /*espacement de 1.2rem des mots dans la phrase*/ |
Comme d'habitude on peut utiliser l'unités de son choix, rem est le plus adéquat.
Démo
<html>
<head>
<style>
div{word-spacing:1.2rem}
</style>
</head>
<body>
<h1>Citations</h1>
<div>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
</body>
</html>
Décorer le texte
La propriété text-decoration permet de décorer le texte.
Décorer le texte: |
text-decoration : underline | /*souligne le texte*/ |
text-decoration : overline | /*surligne le texte*/ |
text-decoration : line-through | /*barre le texte*/ |
text-decoration : blink | /*texte clignotant (uniquement Mozilla)*/ |
text-decoration : none | /*pour annuler un ou plusieurs effets*/ |
Démo
<html>
<head>
<style>
.div1{text-decoration:underline;}
.div2{text-decoration: line-through;}
.div3{text-decoration:overline;}
</style>
</head>
<body>
<h1>Citations</h1>
<div class=div1>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
<div class=div2>Savoir écouter, c'est posséder, outre le sien, le cerveau des autres.</div>
<div class=div3>Jamais le soleil ne voit l'ombre.</div>
</body>
</html>
Transformer le texte
La propriété text-transform permet de modifier la casse des caractères.
Casse: |
text-transform : capitalize | /*les initiales de chaque mot du texte en majuscules*/ |
text-transform : uppercase | /*le texte en majuscules*/ |
text-transform : lowercase | /*le texte en minuscules*/ |
text-transform : none | /*aucun effet sur le texte*/ |
Démo
<html>
<head>
<style>
.div1{text-transform:uppercase;}
</style>
</head>
<body>
<h1>Citations</h1>
<div class=div1>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
</body>
</html>
Aligner le texte
La propriété text-align permet de définir l'alignement d'un texte.
Il s'agit de l'alignement à l'intérieur du bloc qui contient le texte et non pas du bloc lui--même.
|
text-align : center | /*centrer le texte*/ |
text-align : right | /*cadrer le texte à droite*/ |
text-align : left | /*cadrer le texte à gauche*/ |
text-align : justify | /*cadrer le texte à gauche et à droite*/ |
Démo
<html>
<head>
<style>
.div1{text-align:center;}
</style>
</head>
<body>
<h1>Citations</h1>
<div class=div1>Il ne faut pas appeler richesses les choses que l'on peut perdre.</div>
</body>
</html>
Indenter le texte
La propriété text-indent définit l'indentation de la première ligne d'un bloc de texte.
|
text-indent : 1rem | /*indentation de la première ligne de 1 rem (retrait à gauche)*/ |
Démo
<html>
<head>
<style>
.div1{text-indent:1rem;}
</style>
</head>
<body>
<h1>Citations</h1>
<div class=div1>Et si moi je suis barge,<br>
Ce n'est que de tes yeux, <br>
Car ils ont l'avantage d'être deux. (Renaud)
</div>
</body>
</html>
Organiser des colonnes
1er cas : la largeur de l'élément est divisé par le nombre de colonnes
La répartition sur les colonnes se fait automatiquement.
div {column-count : 4;} | /*la largeur de l'élément sera divisé en 4*/ |
Démo
<html>
<head>
<style>
.journal {
column-count : 4;
}
</style>
</head>
<body>
<h1>Texte</h1>
<div class=journal> <!-- Lorem Ipsum -->
</div>
</body>
</html>
2ème cas : la largeur minimale des colonnes est fixée.
On fixe une largeur relative (ou absolue).
div {column-width : 20%;} | /*autant de colonnes de minimum 20% de le taille de l'lément*/ |
Démo
<html>
<head>
<style>
.journal {column-width : 200px;}
</style>
</head>
<body>
<h1>Texte</h1>
<div class=journal> <!-- Lorem Ipsum -->
</div>
</body>
</html>
3ème cas : la largeur minimale et le nombre de colonnes sont fixés.
On fixe le nombre de colonnes et leur largeur.
div {column-count : 2; column-width : 400px;} | /*nombre de colonnes et largeur de chaque colonne/* |
Démo
<html>
<head>
<style>
.journal {
column-count : 2;
column-width : 400px;
}
</style>
</head>
<body>
<h1>Texte</h1>
<div class=journal> <!-- Lorem Ipsum -->
</div>
</body>
</html>
Dans les trois cas si aucune hauteur n'est spécifiée pour la classe les colonnes seront équilibrées.
Si une hauteur est définie et si le texte est trop long pour être contenu dans le nombre de colonnes précisé alors il y a rajout
d'autant de colonnes que nécessaire. Si le rajout n'est pas suffisant une partie du texte sera masqué.