Cours IT Bases CSS 022_Texte, polices, liens

Texte

Le contrôle du texte CSS nous aide à mieux présenter les informations textuelles sur les pages web et à améliorer l’effet visuel.

Indentation

Utilisé pour définir l’indentation de la première ligne du texte, adapté à l’indentation des paragraphes. Évitez de l’utiliser sur les éléments en ligne. La propriété accepte des valeurs absolues ou relatives. Les unités absolues incluent les pixels (px), pouces (in), centimètres (cm), millimètres (mm), etc. Les unités relatives incluent em, rem, vw, vh, etc.

Exemple :

1
p {
2
  text-indent: 2em;
3
}

Effet :

Mode d’écriture

Le mode d’écriture en CSS fait référence à la direction de disposition du texte, incluant les modes horizontal, vertical et mixte. En réalité, il définit la direction d’affichage des éléments de bloc sur la page — soit de haut en bas, soit de droite à gauche, soit de gauche à droite. Cela détermine la direction du texte.

• horizontal-tb : Flux de bloc de haut en bas. La direction du texte correspondante est horizontale.
• vertical-rl : Flux de bloc de droite à gauche. La direction du texte correspondante est verticale.
• vertical-lr : Flux de bloc de gauche à droite. La direction du texte correspondante est verticale.

Exemple :

1
body {
2
  writing-mode: vertical-rl;
3
}

Effet : Lorsque nous changeons le mode d’écriture, nous changeons également la direction du bloc et du texte en ligne. En mode d’écriture horizontal-tb, la direction du bloc est horizontale de haut en bas, tandis qu’en mode vertical-rl, la direction du bloc est verticale de droite à gauche. La dimension de bloc fait toujours référence à la direction d’affichage du bloc dans le mode d’écriture de la page. La dimension en ligne fait toujours référence à la direction du texte.

Cette image montre les deux dimensions en mode d’écriture horizontal.

Cette image montre les deux dimensions en mode d’écriture vertical.

Direction du texte

Utilisez la propriété direction pour définir la direction de lecture du texte : de gauche à droite (ltr) ou de droite à gauche (rtl). Adapté aux sites web multilingues, pour définir la direction de lecture selon la langue du texte. Certaines langues (comme l’arabe) s’écrivent horizontalement mais de droite à gauche.

Exemple :

1
html {
2
  direction: rtl;
3
}

Effet :

Décoration du texte

Utilisez la propriété text-decoration pour définir les effets de décoration de ligne du texte.

• none : Pas de ligne
• overline : Ligne au-dessus
• underline : Soulignement
• line-through : Barré

Exemple :

1
<p style="text-decoration: none;">Pas de ligne de texte</p>
2
<p style="text-decoration: overline;">J'ai une ligne au-dessus</p>
3
<p style="text-decoration: underline;">J'ai un soulignement</p>
4
<p style="text-decoration: line-through;">J'ai un texte barré</p>

Effet :

Alignement du texte

Définit l’alignement horizontal du texte.

• left : Texte aligné à gauche, valeur par défaut dans la plupart des langues.
• center : Texte centré horizontalement.
• right : Texte aligné à droite.
• justify : Texte justifié, remplissant chaque ligne avec des espaces supplémentaires. En raison de la disposition du texte et de la largeur du conteneur (texte court, manque d’espaces, peu de lignes, langue unique), l’effet de justification peut ne pas être facilement visible dans certains cas.
• justify-all (peu courant) : Similaire à justify, mais distribue l’espace supplémentaire uniformément au début et à la fin de la ligne.
• start : Selon la direction du texte du navigateur, le texte est aligné au début (généralement à gauche).
• end : Selon la direction du texte du navigateur, le texte est aligné à la fin (généralement à droite).

Exemple :

1
<p style="text-align: left;">Ce texte est aligné à gauche</p>
2
<p style="text-align: right;">Ce texte est aligné à droite</p>
3
<p style="text-align: center;">Ce texte est centré</p>

Effet :

Hauteur de ligne

Avec la propriété line-height, on peut définir la hauteur entre les lignes de texte. Ajuster la hauteur de ligne selon la taille de police et les exigences de conception peut améliorer la lisibilité.

Exemple :

1
<p>Ceci est une hauteur de ligne normale <br>Ceci est une hauteur de ligne normale</p>
2
<p style="line-height: 3;">Regardez la hauteur de ligne de ce texte <br>Regardez la hauteur de ligne de ce texte</p>

Effet :

Espacement

Définit l’espacement entre les contenus textuels.

• letter-spacing définit l’espacement entre les lettres, caractères chinois et chiffres.
• word-spacing définit l’espacement entre les mots (caractères de chaque côté des espaces).

Exemple :

1
<p style="letter-spacing: 10px;">Regardez mon espacement de texte CSS</p>
2
<p style="word-spacing: 10px;">Regardez mon espacement de texte CSS 123</p>

Effet :

Retour à la ligne

Contrôle la façon dont le texte effectue les retours à la ligne.

word-wrap : Contrôle principalement le retour à la ligne des mots longs ou des URLs, plus adapté aux scénarios en anglais.

• normal (valeur par défaut) : Suit les règles normales de retour à la ligne, pas de coupure à l’intérieur des mots.
• break-word : Permet la coupure à l’intérieur des mots, peut forcer le retour à la ligne des mots longs ou des URLs.

Exemple :

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    word-wrap: normal;
7
}
8
.example2{
9
    word-wrap: break-word;
10
}

1
    <p class="base example1">Regardez comment je fais le retour à la ligne HelloCSS Hello-CSS</p>
2
    <p class="base example2">Regardez comment je fais le retour à la ligne HelloCSS Hello-CSS</p>

Effet :

white-space : Contrôle la gestion des espaces blancs à l’intérieur d’un élément, y compris les espaces, les sauts de ligne, etc.

• normal (valeur par défaut) : Gestion normale des espaces blancs, fusionne les espaces consécutifs et effectue des retours à la ligne selon les caractères de nouvelle ligne.
• nowrap : Pas de retour à la ligne autorisé, ignore les caractères de nouvelle ligne.
• pre : Préserve les espaces blancs, ne fusionne pas les espaces consécutifs, le texte s’affiche selon le format du code source.
• pre-line : Préserve les caractères de nouvelle ligne, fusionne les espaces consécutifs, les autres espaces sont traités normalement.
• pre-wrap : Préserve les espaces blancs, fusionne les espaces consécutifs, préserve les caractères de nouvelle ligne.

Exemple :

1
.base{
2
    background: #d7d8d9;
3
    width: 60px;
4
}
5
.example1{
6
    white-space: normal;
7
}
8
.example2{
9
    white-space: nowrap;
10
}
11
.example3{
12
    white-space: pre;
13
}

1
    <p class="base example1">Regardez comment je fais le retour à la ligne HelloCSS Hello-CSS</p>
2
    <p class="base example2">Regardez comment je fais le retour à la ligne HelloCSS Hello-CSS</p>
3
    <p class="base example3">Regardez comment je fais le retour à la ligne HelloCSS Hello-CSS</p>

Effet :

Ombre

Permet d’ajouter un ou plusieurs (séparés par des virgules) effets d’ombre au texte pour améliorer la lisibilité ou créer des effets de design uniques.

• h-shadow : Position de l’ombre horizontale. Peut être une valeur positive (décalage vers la droite) ou négative (décalage vers la gauche).
• v-shadow : Position de l’ombre verticale. Peut être une valeur positive (décalage vers le bas) ou négative (décalage vers le haut).
• blur : Optionnel. Indique le degré de flou de l’ombre, plus la valeur est grande, plus c’est flou. Peut être omis.
• color : Couleur de l’ombre. Peut être une valeur de couleur spécifique, un mot-clé ou une valeur RGBA.

Exemple :

1
<p style="text-shadow: 2px 2px black;">Regardez mon ombre</p>
2
<p style="text-shadow: 1px 1px 1px red;">Regardez mon ombre</p>
3
<p style="text-shadow: 3px 3px 5px darkgrey;">Regardez mon ombre</p>
4
<p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">Regardez mon ombre</p>

Effet :

Transformation

Contrôle la transformation majuscules/minuscules du texte.

• none : Valeur par défaut, conserve la casse originale.
• capitalize : Convertit la première lettre de chaque mot en majuscule.
• uppercase : Convertit tout le texte en majuscules.
• lowercase : Convertit tout le texte en minuscules.

Exemple :

1
<p style="text-transform: none;">Regardez comment je suis transformé hello CSS</p>
2
<p style="text-transform: capitalize;">Regardez comment je suis transformé hello CSS</p>
3
<p style="text-transform: uppercase;">Regardez comment je suis transformé hello CSS</p>
4
<p style="text-transform: lowercase;">Regardez comment je suis transformé hello CSS</p>

Effet :

Débordement de texte

En CSS, on peut utiliser la propriété overflow pour gérer le débordement de texte.

• visible : Le texte ne déborde pas, il est affiché entièrement.
• hidden : Lorsque le texte déborde, il est masqué.
• scroll : Lorsque le texte déborde, des barres de défilement apparaissent pour que l’utilisateur puisse voir tout le contenu.
• auto : Lorsque le texte déborde, la décision d’afficher des barres de défilement dépend de la largeur et de la hauteur de l’élément.

Exemple :

1
.base{
2
    white-space: nowrap;
3
    background: #d7d8d9;
4
    width: 120px;
5
}
6
.example1{
7
    overflow: visible;
8
}
9
.example2{
10
    overflow: hidden;
11
}
12
.example3{
13
    overflow: scroll;
14
}
15
.example4{
16
    overflow: auto;
17
}

1
    <p class="base example1">Regardez si mon contenu textuel déborde</p>
2
    <p class="base example2">Regardez si mon contenu textuel déborde</p>
3
    <p class="base example3">Regardez si mon contenu textuel déborde</p>
4
    <p class="base example4">Regardez si mon contenu textuel déborde</p>

Effet :

Polices

Comment contrôler et définir les polices est une partie importante du design web.

Famille de polices

Définissez la police avec la propriété font-family. font-family peut spécifier une police, il est recommandé de fournir plusieurs polices alternatives. Le navigateur essaiera ces polices par ordre de priorité jusqu’à trouver une police disponible appropriée. Si le nom de la police contient des espaces, des caractères spéciaux ou des caractères chinois, il est recommandé de l’entourer de guillemets. Les services de polices web peuvent être utilisés, attention aux droits d’auteur des polices.

Exemple :

1
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p>
2
<p style="font-family: Gabriola; ">hello CSS hello CSS</p>

Effet :

Taille

La taille de police en CSS peut être définie avec la propriété font-size. Utilisé pour définir la taille de la police du texte. La taille de police peut être spécifiée avec des valeurs absolues ou relatives. Avec des valeurs absolues, la taille de police est fixe et ne change pas avec la résolution de l’écran. Les unités absolues incluent : pixels (px), pouces (in), centimètres (cm), millimètres (mm), etc. Avec des valeurs relatives, la taille de police est relative à la taille de police de l’élément parent. Les unités relatives incluent : em, rem, vw, vh, etc. Utiliser des mots-clés pour spécifier la taille de police peut améliorer la lisibilité et la cohérence. Les mots-clés incluent : xx-small, x-small, small, medium, large, x-large, xx-large.

Exemple :

1
body {
2
  font-size: 16px;
3
}

Design responsive :

• La taille de police en design responsive devrait être relative pour garantir une bonne expérience de lecture sur différentes tailles d’écran et appareils.

Accessibilité :

• Assurez-vous que la taille de police est suffisamment grande pour répondre aux normes d’accessibilité. Il est recommandé d’utiliser au moins 16px pour le texte du corps.

Choix des unités de police :

• L’utilisation d’unités relatives (em, rem, %) s’adapte mieux aux préférences de taille de police de l’utilisateur dans le navigateur, augmentant l’accessibilité du site web.

Réglage de la hauteur de ligne :

• Réglez la hauteur de ligne selon la taille de police pour améliorer la lisibilité du texte. Généralement, la hauteur de ligne peut être réglée entre 1,4 et 1,6 fois la taille de police.

Graisse

La graisse de la police en CSS peut être définie avec la propriété font-weight.

• normal : Graisse de police par défaut.
• bold : Police en gras.
• bolder : Plus gras que l’élément parent.
• lighter : Plus fin que l’élément parent.
• Valeurs numériques : Définir la graisse avec des valeurs numériques, généralement de 100 à 900.

Exemple :

1
<div style="font-weight: normal;">Graisse de police par défaut</div>
2

3
<div style="font-weight: bold;">
4
    Police en gras
5
    <div style="font-weight: bolder;">Plus gras que l'élément parent</div>
6
</div>
7

8
<div style="font-weight: 700;">
9
    Police en gras avec valeur numérique
10
    <div style="font-weight: lighter;">Plus fin que l'élément parent</div>
11
</div>

Effet :

Style

Le style de police en CSS peut être défini avec la propriété font-style.

• normal : Style de police par défaut.
• italic : Style italique, utilise le design italique spécifique du fichier de police.
• oblique : Style oblique, similaire à l’italique. Si le fichier de police n’a pas de design italique spécifique, il force l’inclinaison de la police normale.

Exemple :

1
<div style="font-style: normal;">Style de police par défaut 123 ABC</div>
2
<div style="font-style: italic;">Style italique 123 ABC</div>
3
<div style="font-style: oblique;">Style oblique 123 ABC</div>

Effet :

Couleur

La couleur de police en CSS peut être définie avec la propriété color.

• Noms de couleurs prédéfinis : par exemple, red, green, blue, etc.
• Valeurs de couleur hexadécimales : par exemple, #FF0000, #00FF00, #0000FF, etc.
• Valeurs de couleur RGB, RGBA : par exemple, rgb(255, 0, 0), rgba(0, 255, 0, 0.5), etc.
• Valeurs de couleur HSL, HSLA : par exemple, hsl(0, 100%, 50%), hsla(120, 100%, 50%, 0.7), etc.

Exemple :

1
<div style="color: blue;">Couleur de police</div>
2
<div style="color: #ff6a00;">Couleur de police</div>
3
<div style="color: rgba(0, 128, 0);">Couleur de police</div>
4
<div style="color: rgba(0, 128, 0, 0.5);">Couleur de police</div>
5
<div style="color: hsla(0, 100%, 50%);">Couleur de police</div>
6
<div style="color: hsla(0, 100%, 50%, 0.7);">Couleur de police</div>
7
<div style="color: transparent;">Couleur de police</div>

Effet :

Liens

En CSS, on peut utiliser la propriété color pour définir la couleur de police des liens (hyperliens).

Définir la couleur des liens

• a - Définir la couleur globale des liens
• a:link - Normal, lien non visité
• a:visited - Lien déjà visité par l’utilisateur
• a:hover - Lorsque l’utilisateur survole le lien avec la souris
• a:active - Le moment où le lien est cliqué

Exemple :

1
/* Lien global */
2
a {
3
  color: #3498db; /* Bleu */
4
}
5

6
/* Lien non visité */
7
a:link {
8
    color: #3498db; /* Bleu */
9
}
10

11
/* Lien visité */
12
a:visited {
13
    color: #884dff; /* Violet */
14
}
15

16
/* Lien au survol de la souris */
17
a:hover {
18
    color: #ff6600; /* Orange */
19
}
20

21
/* Couleur du lien au clic */
22
a:active {
23
    color: #ff0000; /* Rouge */
24
}

Définir le soulignement des liens

Exemple :

1
a {
2
    text-decoration: none; /* Supprimer le soulignement */
3
}
4

5
a:hover {
6
    text-decoration: underline; /* Afficher le soulignement au survol */
7
}