CSS

Mise en page du texte

Laisser un commentaire

Bienvenue à ce nouveau cour  .Nous avons vu ensemble dans le tuto précédant la mise en forme du texte. Dans ce tuto , nous allons voir  La mise en page du texte avec CSS qui peut être réalisée en utilisant diverses propriétés et techniques.

Alignement du Texte (text-align):

La propriété CSS text-align est utilisée pour définir l’alignement horizontal du texte à l’intérieur d’un élément. Voici comment utiliser text-align avec différentes valeurs :

  • text-align: left
  • text-align: right
  • text-align: center
  • text-align: justify
  • text-align: initial
  • text-align: inherit
 <h1>Alignement du Texte</h1>
   <p>La propriété CSS text-align est utilisée pour définir l'alignement horizontal du texte à l'intérieur d'un élément. </p>
   <p id="gauche">Voici comment utiliser text-align avec différentes valeurs :</p>
h1 {
    text-align: center;
}
p {
    text-align: justify;
}
#gauche{
    text-align: right;
}

La propriété text-align est particulièrement utile pour le placement du texte à l’intérieur des blocs, comme les paragraphes, les divs, les titres, etc. Vous pouvez choisir la valeur qui convient le mieux à votre conception en fonction de l’alignement souhaité.

Décoration du texte

La propriété CSS text-decoration est utilisée pour spécifier la décoration du texte, telle que le soulignement, la ligne médiane, la ligne supérieure, etc. Voici comment utiliser text-decoration avec différentes valeurs :

  • Soulignement : text-decoration: underline;
  • Ligne au Milieu (Barré) : text-decoration: line-through;
  • Soulignement et Ligne au Milieu : text-decoration: underline line-through;
  • Aucune Décoration : text-decoration: none;
  • Une ligne au-dessus du texte : text-decoration: overline;
  • Une ligne au milieu du texte : text-decoration: line-through;
  • Une ligne sous le texte : text-decoration: underline ;
  • Un texte clignotant : text-decoration:blink :(note : cette valeur n’est généralement pas recommandée car elle peut être gênante et n’est pas bien supportée).
 <h1>Décoration du texte</h1>
    <p>La propriété CSS text-decoration est utilisée pour spécifier la décoration du texte, telle que le soulignement, la ligne médiane, la ligne supérieure, etc. Voici comment utiliser text-decoration avec différentes valeurs</p>
    <h2>text-decoration: line-through;</h2>
    <h3>text-decoration: underline line-through;</h3>
    <h4>text-decoration: overline;</h4>
h1{
    text-decoration: underline;
}
h2{
    text-decoration: line-through;
}
h3{
    text-decoration: underline line-through;
}
h4{
    text-decoration: overline;
}
p{
    text-decoration:none ;
}

Transformer les lettres en majuscules ou minuscules

En CSS, vous pouvez utiliser les propriétés text-transform pour transformer le texte en majuscules, minuscules ou d’autres styles de casse. Voici comment vous pouvez l’utiliser :

Pour transformer le texte en majuscules :

text-transform: uppercase;

Pour transformer le texte en minuscules :

text-transform: lowercase;

Pour transformer uniquement la première lettre de chaque mot en majuscule :

text-transform: capitalize;

Pour ne pas appliquer de transformation de casse au texte (valeur par défaut) :

text-transform: none;
 <h1> text-transform: uppercase;</h1>
    <h2>text-transform: lowercase;</h2>
    <h3>text-transform: capitalize;</h3>

h1{
    text-transform: uppercase;
}
h2{
    text-transform: lowercase;
}
h3{
    text-transform: capitalize;
}

Retrait de la première ligne de texte

Pour effectuer un retrait de la première ligne de texte en CSS, vous pouvez utiliser la propriété text-indent. Cependant, il est important de noter que cette propriété spécifie l’indentation de la première ligne d’un élément de bloc, et non la première ligne d’un paragraphe spécifique.

Voici un exemple d’utilisation de text-indent pour rétracter la première ligne de tous les paragraphes <p> dans votre document :

<body>
    <p>Pour effectuer un retrait de la première ligne de texte en CSS, vous pouvez utiliser la propriété text-indent.</p>
    <p>Cependant, il est important de noter que cette propriété spécifie l'indentation de la première ligne d'un élément de bloc, et non la première ligne d'un paragraphe spécifique.</p>
</body>
p {
    text-indent: 20px; 
}

Cela signifie que chaque paragraphe <p> aura une indentation de 20 pixels à partir de la marge gauche.

Si vous souhaitez appliquer le retrait uniquement à certains paragraphes et non à tous, vous pouvez utiliser une classe ou un sélecteur plus spécifique. Par exemple :

.retrait-premiere-ligne {
    text-indent: 20px;
}

Espacement des Lignes

L’espacement entre les lignes en CSS peut être contrôlé à l’aide de la propriété line-height. Cette propriété définit la hauteur de ligne, c’est-à-dire l’espace vertical entre les lignes de texte à l’intérieur d’un élément.

Voici comment vous pouvez l’utiliser :

<h1>Espacement des Lignes</h1>
<p>L'espacement entre les lignes en CSS peut être contrôlé à l'aide de la propriété line-height. Cette propriété définit la hauteur de ligne, c'est-à-dire l'espace vertical entre les lignes de texte à l'intérieur d'un élément.</p>
h1 {
    line-height: 50px; 
}
p {
    line-height: 2; 
}

Dans le premier exemple, la propriété line-height est définie à 50 pixels pour l’en-tête <h1>.

Dans le deuxième exemple, la propriété line-height est définie à 2, ce qui signifie que la hauteur de ligne sera égale à 2 fois la taille de la police actuelle pour le paragraphe <p>.

Vous pouvez également utiliser des unités sans dimension pour spécifier la hauteur de ligne. Par exemple, line-height: 2; et line-height: 200%; produiraient le même résultat.

L’espacement des lignes peut également être hérité des éléments parent. Par défaut, la plupart des navigateurs définissent une hauteur de ligne automatique qui s’adapte à la taille du texte.

Il est important de choisir une valeur appropriée pour la line-height en fonction de la conception et de la lisibilité de votre site web. Un espacement des lignes adéquat peut améliorer la lisibilité du texte.

Espacement des Caractères

La propriété CSS letter-spacing est utilisée pour ajuster l’espacement entre les caractères d’un texte. Elle permet de spécifier la distance supplémentaire ou réduite entre chaque paire de caractères dans une chaîne de texte.

Voici comment vous pouvez utiliser letter-spacing :

<h1>Espacement des Caractères</h1>
<p>La propriété CSS letter-spacing est utilisée pour ajuster l'espacement entre les caractères d'un texte. Elle permet de spécifier la distance supplémentaire ou réduite entre chaque paire de caractères dans une chaîne de texte.</p>

/* Espacement des caractères avec une valeur fixe en pixels */
p {
    letter-spacing: 2px; /* Vous pouvez ajuster la valeur selon vos besoins */
}

/* Espacement des caractères avec une valeur en unités em */
h1 {
    letter-spacing: 0.1em; /* Vous pouvez ajuster la valeur selon vos besoins */
}

Dans le premier exemple, la propriété letter-spacing est définie à 2 pixel pour le paragraphe <p>, ce qui augmentera l’espacement entre les caractères de deux pixel.

Dans le deuxième exemple, la propriété letter-spacing est définie à 0.1 em pour l’en-tête <h1>, ce qui ajustera l’espacement en fonction de la taille de la police.

Vous pouvez également utiliser des valeurs négatives pour rapprocher les caractères :

p {
    letter-spacing: -1.5px; 
}

Espacement des mots

L’espacement entre les mots en CSS peut être contrôlé à l’aide de la propriété word-spacing. Cette propriété définit l’espacement additionnel entre les mots dans un texte.

Voici comment vous pouvez utiliser word-spacing :

 <h1>Espacement des mots</h1>
 <p>L'espacement entre les mots en CSS peut être contrôlé à l'aide de la propriété word-spacing. Cette propriété définit l'espacement additionnel entre les mots dans un texte.</p>

p {
    word-spacing: 7px; /* Vous pouvez ajuster la valeur selon vos besoins */
}

/* Espacement des mots avec une valeur en unités em */
h1 {
    word-spacing: 1em; /* Vous pouvez ajuster la valeur selon vos besoins */
}

Dans le premier exemple, la propriété word-spacing est définie à 7 pixels pour le paragraphe <p>, ce qui augmentera l’espacement entre les mots de 7 pixels.

Dans le deuxième exemple, la propriété word-spacing est définie à 1em pour l’en-tête <h1>, ce qui ajustera l’espacement en fonction de la taille de la police.

Vous pouvez également utiliser des valeurs négatives pour rapprocher les mots

Soulignement personnalisé

Si vous souhaitez créer un soulignement personnalisé en CSS, vous pouvez utiliser la propriété border-bottom pour créer une bordure en bas de l’élément que vous souhaitez souligner. Ensuite, vous pouvez styliser cette bordure pour obtenir un effet de soulignement personnalisé.

Voici un exemple simple de soulignement personnalisé en utilisant la propriété border-bottom :

.souligne-personnalisee {
    border-bottom: 2px solid #3498db; /* Couleur et épaisseur de la bordure */
    padding-bottom: 3px; /* Espace entre le texte et la bordure */
   
}

Dans cet exemple, la classe .souligne-personnalisee crée une bordure en bas de l’élément avec une couleur bleue (#3498db) et une épaisseur de 2 pixels. La propriété padding-bottom est utilisée pour ajouter de l’espace entre le texte et la bordure.

Vous pouvez appliquer cette classe à n’importe quel élément HTML que vous souhaitez souligner de manière personnalisée :

 <p class="souligne-personnalisee">Texte avec soulignement personnalisé.</p>

Vous pouvez personnaliser davantage l’aspect du soulignement en ajustant les valeurs dans la classe CSS en fonction de vos besoins spécifiques. Vous pouvez également utiliser des propriétés supplémentaires telles que border-radius pour arrondir les coins de la bordure si nécessaire.

Ombre de Texte

Pour ajouter une ombre au texte en CSS, vous pouvez utiliser la propriété text-shadow. Cette propriété permet de spécifier une ou plusieurs ombres qui seront appliquées au texte.

Voici un exemple simple :

<p class="texte-ombre">Une ombre au texte </p>
.texte-ombre {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Dans cet exemple, la classe .texte-ombre ajoute une ombre au texte avec les caractéristiques suivantes :

  • Déplacement horizontal de l’ombre : 2px.
  • Déplacement vertical de l’ombre : 2px.
  • Flou de l’ombre : 4px.
  • Couleur de l’ombre : rgba(0, 0, 0, 0.5) (noir avec une opacité de 0.5).

Vous pouvez ajuster ces valeurs en fonction de vos besoins spécifiques. Par exemple, vous pouvez modifier la couleur, l’opacité, la taille du déplacement horizontal et vertical, ainsi que la taille du flou.

.texte-ombre-personnalisee {
    text-shadow: 3px 3px 2px rgba(255, 0, 0, 0.8);
}

Dans cet exemple, la classe .texte-ombre-personnalisee applique une ombre rouge avec un déplacement horizontal et vertical de 3 pixels, une taille de flou de 2 pixels, et une opacité de 0.8.

Il est également possible d’appliquer plusieurs ombres en les séparant par des virgules. Chaque ombre est spécifiée par trois valeurs pour le déplacement horizontal, vertical et le flou, suivies de la couleur.

.texte-multiple-ombres {
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}

Cet exemple applique deux ombres au texte : une ombre noire en bas à droite et une ombre blanche en haut à gauche.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *