Styler le texte avec les propriétés de police CSS

Introduction

Dans ce laboratoire, les étudiants apprendront à styliser le texte à l'aide des propriétés de police CSS, en explorant les techniques de typographie fondamentales dans la conception web. Le tutoriel complet guide les apprenants dans la création d'un document HTML et l'application de diverses méthodes de style de police, y compris la famille de police, la taille, la hauteur de ligne, le style et le poids.

Les participants commenceront par configurer une structure HTML de base, puis amélioreront progressivement leurs compétences en typographie en mettant en œuvre les propriétés CSS qui contrôlent l'apparence du texte. Par des pratiques pratiques, les étudiants découvriront comment créer un contenu web attrayant visuellement et lisible à l'aide de différentes techniques de police, acquérant une expérience pratique dans la conception de la typographie web.

Créer un fichier HTML et configurer la structure de base

Dans cette étape, vous allez apprendre à créer un fichier HTML et à configurer sa structure de base pour styliser le texte avec CSS. Nous utiliserons l'IDE Web pour créer un nouveau document HTML qui servira de base à notre exercice de style de typographie.

Tout d'abord, accédez au répertoire ~/projet dans l'IDE Web. Créez un nouveau fichier appelé typographie.html en cliquant droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Voici la structure HTML de base que vous allez créer :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Typography Styling</title>
    <style>
      /* Nous ajouterons nos styles CSS ici dans les étapes suivantes */
    </style>
  </head>
  <body>
    <h1>Welcome to CSS Typography</h1>
    <p>This paragraph will demonstrate various text styling techniques.</p>
  </body>
</html>

Analysons les composants clés de cette structure HTML :

<!DOCTYPE html> déclare que ceci est un document HTML5
<html lang="en"> définit la langue du document
<head> contient les métadonnées du document
<meta charset="UTF-8"> assure un codage correct des caractères
<meta name="viewport"> aide à la conception responsive
<title> définit le titre de la page
La balise <style> est où nous ajouterons notre CSS (nous l'élargirons dans les étapes suivantes)
<body> contient le contenu visible de la page

Exemple de sortie lorsque vous ouvrez ce fichier dans un navigateur :

[Une page simple avec un titre "Welcome to CSS Typography"
et un paragraphe ci-dessous]

Appliquer une famille de polices aux en-têtes

Dans cette étape, vous allez apprendre à appliquer différentes familles de polices aux titres à l'aide de CSS. La famille de police est une propriété cruciale qui détermine la police de caractères du texte, vous permettant de créer une typographie attrayante visuellement et lisible.

Ouvrez le fichier typographie.html dans l'IDE Web et modifiez la section <style> pour ajouter les propriétés de famille de police :

<style>
  h1 {
    font-family: Arial, sans-serif;
  }

  h2 {
    font-family: "Times New Roman", serif;
  }

  p {
    font-family: Verdana, sans-serif;
  }
</style>

Explorons les concepts clés de la famille de police :

Polices sécurisées pour le Web : Ce sont des polices qui sont généralement disponibles sur différents appareils et navigateurs.
- Polices sans-serif (comme Arial) : Aspect propre et moderne
- Polices à serif (comme Times New Roman) : Apparence traditionnelle et formelle
Polices de repli : Toujours fournissez une famille de police générique en tant que sauvegarde
- sans-serif
- serif
- monospace
Plusieurs options de police : Liste des polices par ordre de préférence
- La première police est le choix principal
- Les polices suivantes sont des polices de repli si les polices précédentes ne sont pas disponibles

Agrandissez votre HTML pour démontrer différents titres :

<body>
  <h1>Main Heading (Arial)</h1>
  <h2>Subheading (Times New Roman)</h2>
  <p>Paragraph text in Verdana</p>
</body>

Exemple de sortie dans un navigateur :

[Une page montrant :
- Titre principal en Arial
- Sous-titre en Times New Roman
- Paragraphe en Verdana]

Définir la taille de police et la hauteur de ligne

Dans cette étape, vous allez apprendre à contrôler la lisibilité et l'apparence du texte en définissant la taille de la police et la hauteur de ligne à l'aide de CSS. Ces propriétés sont cruciales pour créer une typographie attrayante visuellement et facile à lire.

Ouvrez le fichier typographie.html et mettez à jour la section <style> avec le CSS suivant :

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1.5;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    line-height: 1.4;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
</style>

Analysons les concepts clés :

Taille de la police :
- Mesurée en pixels (px), en em ou en rem
- Contrôle la hauteur du texte
- Tailles typiques :
  - Titres : 24 - 36 px
  - Texte du corps : 14 - 16 px
Hauteur de ligne :
- Contrôle l'espace vertical entre les lignes de texte
- Améliore la lisibilité
- Généralement définie entre 1,4 et 1,6
- Peut être sans unité (recommandé) ou en pixels

Agrandissez votre HTML pour démontrer différentes tailles de texte :

<body>
  <h1>Main Heading (36px)</h1>
  <h2>Subheading (24px)</h2>
  <p>Paragraph text with increased line height for better readability.</p>
</body>

Exemple de sortie dans un navigateur :

[Une page montrant :
- Grand titre principal
- Sous-titre plus petit
- Paragraphe avec un espacement de ligne confortable]

Ajouter le style et le poids de police

Dans cette étape, vous allez apprendre à utiliser le style et le poids de la police pour ajouter de l'emphase et de la variété à votre texte à l'aide de CSS. Ces propriétés aident à créer une hiérarchie visuelle et à améliorer la conception globale de votre typographie.

Ouvrez le fichier typographie.html et mettez à jour la section <style> avec le CSS suivant :

<style>
  h1 {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: bold;
  }

  h2 {
    font-family: "Times New Roman", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
  }

  p {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
  }

  .highlight {
    font-style: italic;
    font-weight: bold;
  }
</style>

Explorons les concepts clés :

Style de police :
- normal : Apparence standard du texte
- italic : Texte incliné
- oblique : Similaire à italic, mais moins courant
Poids de police :
- normal : Texte régulier (400)
- bold : Texte plus épais et plus prononcé (700)
- Valeurs numériques : 100 - 900 (par incréments de 100)
  - 400 : Normal
  - 600 : Demi-gras
  - 700 : Gras

Modifiez votre HTML pour démontrer ces propriétés :

<body>
  <h1>Main Heading (Italic and Bold)</h1>
  <h2>Subheading (Semi-Bold)</h2>
  <p>
    Regular paragraph text.
    <span class="highlight">This text is highlighted</span>.
  </p>
</body>

Exemple de sortie dans un navigateur :

[Une page montrant :
- Titre principal en italique et gras
- Sous-titre en demi-gras
- Paragraphe avec une partie soulignée]

Combiner les propriétés de police à l'aide d'un raccourci

Dans cette étape, vous allez apprendre à utiliser la propriété raccourcie font en CSS pour combiner plusieurs propriétés liées à la police en une déclaration concise unique. Cette approche rend votre CSS plus lisible et efficace.

Ouvrez le fichier typographie.html et mettez à jour la section <style> avec le CSS suivant :

<style>
  h1 {
    font:
      bold italic 36px Arial,
      sans-serif;
  }

  h2 {
    font:
      600 24px "Times New Roman",
      serif;
  }

  p {
    font:
      normal 16px/1.6 Verdana,
      sans-serif;
  }

  .highlight {
    font:
      bold italic 16px Verdana,
      sans-serif;
  }
</style>

Analysons la syntaxe de la propriété raccourcie font :

Syntaxe de base : font: [style de police] [poids de police] [taille de police] [hauteur de ligne] [famille de police]
- L'ordre est important!
- Toutes les valeurs ne sont pas requises
Modèles de raccourci courants :
- font: style poids taille famille
- font: taille/hauteur de ligne famille
- font: poids taille famille

Modifiez votre HTML pour démontrer les propriétés raccourcies :

<body>
  <h1>Main Heading (Shorthand)</h1>
  <h2>Subheading (Compact Syntax)</h2>
  <p>
    Paragraph with line height. <span class="highlight">Highlighted text</span>.
  </p>
</body>

Exemple de sortie dans un navigateur :

[Une page montrant :
- Titre principal avec un style gras et italique
- Sous-titre avec une déclaration de police compacte
- Paragraphe avec une hauteur de ligne intégrée]

Résumé

Dans ce laboratoire, les participants apprennent les bases de la mise en forme du texte à l'aide des propriétés de police en CSS, étape par étape. La première phase consiste à créer un fichier HTML avec une structure de base, à configurer les métadonnées essentielles et à préparer un canevas pour l'expérimentation de la typographie. Les apprenants sont présentés aux principaux éléments et attributs HTML, y compris la déclaration DOCTYPE, les paramètres de langue et la configuration de la vue.

Le laboratoire progresse vers des techniques pratiques de mise en forme CSS, en se concentrant sur la manipulation des polices. Les participants explorent les méthodes pour appliquer des familles de polices aux titres, ajuster les tailles de police et les hauteurs de ligne, et modifier les styles et les poids de police. En travaillant directement dans l'IDE Web et en construisant progressivement leur code HTML et CSS, les étudiants acquièrent une expérience pratique dans la transformation de l'apparence du texte et dans la compréhension de la manière dont différentes propriétés de police contribuent à une typographie web efficace.