From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../learn/css/styling_text/fundamentals/index.html | 756 +++++++++++++++++++++ .../initiation-mise-en-forme-du-texte/index.html | 756 --------------------- .../mise_en_forme_des_liens/index.html | 448 ------------ .../css/styling_text/styling_links/index.html | 448 ++++++++++++ 4 files changed, 1204 insertions(+), 1204 deletions(-) create mode 100644 files/fr/learn/css/styling_text/fundamentals/index.html delete mode 100644 files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html delete mode 100644 files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html create mode 100644 files/fr/learn/css/styling_text/styling_links/index.html (limited to 'files/fr/learn/css/styling_text') diff --git a/files/fr/learn/css/styling_text/fundamentals/index.html b/files/fr/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..283d1fff00 --- /dev/null +++ b/files/fr/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,756 @@ +--- +title: Initiation à la mise en forme du texte +slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte +tags: + - Alignement + - CSS + - Débutant + - Guide + - Polices de caractères + - Style + - Texte +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

+ + + + + + + + + + + + +
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
+ +

En quoi consiste la mise en forme du texte avec CSS ?

+ +

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

+ +
+

Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

+
+ +

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

+ + + +
+

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

+
+ +

Fontes

+ +

Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

+ +
<h1>Tommy le Chat</h1>
+
+<p>Je m'en souviens comme mon dernier repas...</p>
+
+<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager
+ce corps étranger qui s'était niché au fond de sa redoutable gueule.
+Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile
+brillant au fond du canon de cet extraordinaire rôdeur en quête de proie.
+Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat
+avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares
+occasions, comme maintenant.</p>
+ +
+

(NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

+
+ +

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

+ +

Couleur

+ +

La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

+ +

color accepte toutes les unités de couleur des CSS, par exemple :

+ +
p {
+  color: red;
+}
+ +

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

+ + + +

{{ EmbedLiveSample('Couleur', '100%', 220) }}

+ +

Familles de fontes

+ +

Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :

+ +
p {
+  font-family: arial;
+}
+ +

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

+ +

Polices web sûres

+ +

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.

+ +

La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

+ +

La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomType génériqueNotes
Arialsans-serifIl est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.
Courier NewmonospaceCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
+ +
+

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

+
+ +
+

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

+
+ +

Polices par défaut

+ +

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.serif, sans-serif et monospace sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, cursive et fantasy sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.

+ +

Les 5 noms sont définis comme suit :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TermeDéfinitionExemple
serifLes polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rouge
sans-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rouge
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
+ +

Pile de polices

+ +

Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, par exemple :

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

+ +

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

+ +
+

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

+
+ +

Un exemple de font-family

+ +

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Cela donne le résultat suivant :

+ + + +

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

+ +

Taille de la police de caractères

+ +

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

+ + + +

La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

+ +

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 em (24 px), puis, vous voulez que les paragraphes de l'<article> aient une taille de police calculée de 20 px, quelle valeur de em utiliseriez-vous ?

+ +
<!-- font-size vaut 16px pour la base du document -->
+<article> <!-- Si font-size vaut 1.5em -->
+  <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? -->
+</article>
+ +

Vous devrez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.

+ +

Un simple exemple de dimensionnement

+ +

Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la font‑size de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de font‑size dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

+ +

Notre nouveau résultat ressemble à :

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}

+ +

Style de fonte, graisse, transformation et décoration de texte

+ +

CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :

+ + + +

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

+ +

Notre nouveau résultat ressemble à :

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

+ +

Ombres du texte

+ +

Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

+ +
text-shadow: 4px 4px 5px red;
+ +

Les 4 propriétés sont les suivantes :

+ +
    +
  1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des unités de longueur et de taille des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. +
  2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.
    3. +
  3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les unités de longueur et de taille des CSS.
    4. +
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. +
+ +
+

Note : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

+
+ +

Ombres multiples

+ +

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

+ + + +

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

+ +
+

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

+
+ +

Mise en page du texte

+ +

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

+ +

Alignement du texte

+ +

La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :

+ + + +

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

+ + + +

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

+ +

Hauteur de ligne

+ +

La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des unités de longueur et de taille, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de line-height. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :

+ +
line-height: 1.5;
+ +

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

+ + + +

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

+ +

Espacement entre les lettres et les mots

+ +

Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

+ +

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

Nous obtiendrons :

+ + + +

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

+ +

D'autres propriétés intéressantes

+ +

Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :

+ +

Styles de police de caractères :

+ + + +

styles de mise en page du texte

+ + + +

Abréviations pour propriétés de fontes

+ +

De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.

+ +

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque la propriété abrégée font est utilisée.

+ +

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

+ +

Un exemple complet ressemblerait à ceci :

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Apprentissage actif : jouer avec les styles du texte

+ +

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.

+ +

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Résumé

+ +

Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ +

 

+ + + +

 

+ +

 

diff --git a/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html b/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html deleted file mode 100644 index 283d1fff00..0000000000 --- a/files/fr/learn/css/styling_text/initiation-mise-en-forme-du-texte/index.html +++ /dev/null @@ -1,756 +0,0 @@ ---- -title: Initiation à la mise en forme du texte -slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte -tags: - - Alignement - - CSS - - Débutant - - Guide - - Polices de caractères - - Style - - Texte -translation_of: Learn/CSS/Styling_text/Fundamentals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
- -

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

- - - - - - - - - - - - -
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages web.
- -

En quoi consiste la mise en forme du texte avec CSS ?

- -

Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}.

- -
-

Note : si le paragraphe ci‑dessus vous paraît confus,  pas de problème — revenez en arrière et revoyez l'article sur la théorie du Modèle de boîte avant de poursuivre.

-
- -

Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article :

- - - -
-

Note : Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme ::first-letter (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

-
- -

Fontes

- -

Passons directement aux propriétés pour le style des polices. Dans cet exemple, nous allons appliquer différentes propriétés CSS au même exemple HTML, qui ressemble à ceci :

- -
<h1>Tommy le Chat</h1>
-
-<p>Je m'en souviens comme mon dernier repas...</p>
-
-<p>Dit Tommy le Chat en jetant la tête en arrière pour dégager
-ce corps étranger qui s'était niché au fond de sa redoutable gueule.
-Beaucoup de rats bien gras trépassèrent dans la ruelle en regardant l'étoile
-brillant au fond du canon de cet extraordinaire rôdeur en quête de proie.
-Un véritable miracle de la nature ce prédateur urbain — Tommy le Chat
-avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares
-occasions, comme maintenant.</p>
- -
-

(NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

-
- -

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

- -

Couleur

- -

La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}.

- -

color accepte toutes les unités de couleur des CSS, par exemple :

- -
p {
-  color: red;
-}
- -

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

- - - -

{{ EmbedLiveSample('Couleur', '100%', 220) }}

- -

Familles de fontes

- -

Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une  {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela :

- -
p {
-  font-family: arial;
-}
- -

Cette commande définit la police de caractères arial (qui existe sur tous les ordinateurs) pour tous les paragraphes de la page.

- -

Polices web sûres

- -

En parlant de la disponibilité des polices, il y a seulement un certain nombre de polices qui sont généralement disponibles sur tous les systèmes, et peuvent donc être utilisées sans trop de soucis. Ce sont les polices web dites sûres.

- -

La plupart du temps, en tant que développeur web, nous voulons avoir un contrôle précis sur les polices utilisées pour afficher le contenu textuel. Le problème est de trouver un moyen de savoir quelle police est disponible sur l'ordinateur utilisé pour voir nos pages web. Il n'y a aucun moyen systématique de le savoir, mais les polices web sûres sont disponibles sur presque tous les systèmes d'exploitation les plus utilisés (Windows, Mac, les distributions Linux les plus courantes, Android et iOS).

- -

La liste des polices web vraiment sûres changera à mesure que les systèmes d'exploitation évolueront, mais on peut considérer les polices suivantes comme sûres sur le web, du moins pour le moment (beaucoup ont été popularisées grâce aux polices Microsoft Core pour le web à la fin des années 90 et début des années 2000) :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NomType génériqueNotes
Arialsans-serifIl est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante.
Courier NewmonospaceCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Courier New appelée Courier. Il est recommandé d'utiliser les deux avec Courier New comme alternative préférée.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police Times New Roman appelée Times. Il est recommandé d'utiliser les deux avec Times New Roman comme alternative préférée.
Trebuchet MSsans-serifVous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles.
Verdanasans-serif 
- -
-

Note : Le site cssfontstack.com met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage.

-
- -
-

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

-
- -

Polices par défaut

- -

CSS définit cinq noms génériques pour les polices : serif, sans-serif, monospace, cursive et fantasy. À cause de leur caractère générique la police de caractères exacte utilisée, lors de l'emploi de ces noms, dépend de chaque navigateur et peut varier pour chaque système d'exploitation sur lequel ils s'exécutent. Dans le pire des cas, le navigateur essaiera de trouver une police appropriée.serif, sans-serif et monospace sont tout à fait prévisibles et devraient donner quelque chose de raisonnable. Par contre, cursive et fantasy sont moins prévisibles et nous vous recommandons de les utiliser avec précaution, en les testant au fur et à mesure.

- -

Les 5 noms sont définis comme suit :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TermeDéfinitionExemple
serifLes polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices)Mon grand éléphant rouge
sans-serifLes polices qui n'ont pas d'empattementsMon grand éléphant rouge
monospaceLes polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes.Mon grand éléphant rouge
cursiveLes polices destinées à émuler l'écriture, avec des traits fluides et connectés.Mon grand éléphant rouge
fantasyLes polices destinées à être décoratives.Mon grand éléphant rouge
- -

Pile de polices

- -

Comme la disponibilité des polices que vous souhaitez utiliser sur vos pages web n'est pas garantie (même une police web peut échouer pour une raison quelconque), vous pouvez indiquer une pile de polices afin que le navigateur ait à sa disposition plusieurs polices. Il convient simplement d'indiquer pour valeur de font-family plusieurs noms de polices séparés par des virgules, par exemple :

- -
p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
-}
- -

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

- -

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

- -
-

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

-
- -

Un exemple de font-family

- -

Faisons un ajout à notre exemple précédent et donnons aux paragraphes une police sans-serif :

- -
p {
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

Cela donne le résultat suivant :

- - - -

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

- -

Taille de la police de caractères

- -

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

- - - -

La propriété font-size d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété font‑size est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 em définie par défaut, donc aura une taille finale de 32 px.

- -

Les choses deviennent plus difficiles lorsque vous commencez à modifier la taille de la police des éléments imbriqués. Par exemple, vous avez un élément {{htmlelement ("article")}} dans la page dont la taille de police est 1.5 em (24 px), puis, vous voulez que les paragraphes de l'<article> aient une taille de police calculée de 20 px, quelle valeur de em utiliseriez-vous ?

- -
<!-- font-size vaut 16px pour la base du document -->
-<article> <!-- Si font-size vaut 1.5em -->
-  <p>Mon paragraphe</p> <!-- Comment calculer une hauteur de fonte de 20px ? -->
-</article>
- -

Vous devrez définir sa valeur em à 20/24 ou 0,83333333 em. Les mathématiques peuvent être compliquées, vous devez donc faire attention à la façon dont vous composez les choses. Il est préférable d'utiliser rem quand vous le pouvez, pour garder les choses simples et éviter d'avoir à définir la taille des polices des éléments du conteneur si possible.

- -

Un simple exemple de dimensionnement

- -

Quand vous dimensionnez votre texte, c'est généralement une bonne idée de définir la font‑size de base du document à 10 px, de sorte que les maths sont beaucoup plus faciles à travailler — les valeurs requises (r) em sont alors la taille de la police en pixels divisée par 10, et non par 16. Après cela, vous pouvez facilement dimensionner les différents types de texte dans votre document à votre goût. C'est une bonne idée de lister tous les jeux de règles de font‑size dans une zone désignée de votre feuille de style, afin qu'ils soient faciles à trouver.

- -

Notre nouveau résultat ressemble à :

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Un_simple_exemple_de_dimensionnement', '100%', 220) }}

- -

Style de fonte, graisse, transformation et décoration de texte

- -

CSS fournit quatre propriétés communes pour modifier le poids et l'emphase visuelles du texte :

- - - -

Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

- -

Notre nouveau résultat ressemble à :

- - - -
html {
-  font-size: 10px;
-}
-
-h1 {
-  font-size: 2.6rem;
-  text-transform: capitalize;
-}
-
-h1 + p {
-  font-weight: bold;
-}
-
-p {
-  font-size: 1.4rem;
-  color: red;
-  font-family: Helvetica, Arial, sans-serif;
-}
- -

{{ EmbedLiveSample('Style_de_fonte_graisse_transformation_et_décoration_de_texte', '100%', 220) }}

- -

Ombres du texte

- -

Vous pouvez ombrer votre texte avec la propriété {{cssxref("text-shadow")}}. Elle prend 4 valeurs, comme vous pouvez le voir dans l'exemple ci-dessous :

- -
text-shadow: 4px 4px 5px red;
- -

Les 4 propriétés sont les suivantes :

- -
    -
  1. Le décalage horizontal de l'ombre par rapport au texte original — cette grandeur acepte la plupart des unités de longueur et de taille des CSS disponibles, mais vous utiliserez en règle générale le px. Cette valeur doit être précisée.
    2. -
  2. Le décalage vertical de l'ombre par rapport au texte original — cette grandeur se comporte à la base comme la précédente, sauf que l'ombre est portée vers le haut ou vers le bas, et non vers la gauche ou la droite. Cette valeur doit être précisée.
    3. -
  3. Le rayon de floutage — plus cette valeur est élevée, plus l'ombre est étalée largement. Si cette valeur n'est pas précisée, la valeur par défaut est 0, ce qui signifie pas de flou. Elle accepte toutes les unités de longueur et de taille des CSS.
    4. -
  4. La couleur de l'ombre, qui peut prendre toute unité de couleur CSS. Si elle n'est pas définie, c'est la couleur noire par défaut.
    5. -
- -
-

Note : Les valeurs positives de décalage déplacent l'ombre à droite et en bas, mais vous pouvez aussi utiliser des valeurs négatives pour obtenir une ombre à gauche et en haut, par exemple -1px -1px.

-
- -

Ombres multiples

- -

Vous pouvez appliquer plusieurs ombres à un même texte, en mettant plusieurs valeurs d'ombrage séparées par une virgule, par exemple :

- -
text-shadow: -1px -1px 1px #aaa,
-             0px 4px 1px rgba(0,0,0,0.5),
-             4px 4px 5px rgba(0,0,0,0.7),
-             0px 0px 7px rgba(0,0,0,0.4);
- -

Si nous l'appliquons à l'élément {{htmlelement ("h1")}} de notre exemple Tommy le Chat, nous nous obtenons :

- - - -

{{ EmbedLiveSample('Ombres_du_texte', '100%', 220) }}

- -
-

Note : Vous pouvez voir plus d'exemples intéressants de text-shadow dans l'article de Sitepoint Moonlighting with CSS text-shadow (Clair de lune avec text-shadow).

-
- -

Mise en page du texte

- -

Après les propriétés de base des polices, examinons maintenant celles permettant de modifier la disposition des textes.

- -

Alignement du texte

- -

La propriété {{cssxref("text-align")}} s'utilise pour contrôler la disposition du texte dans la zone de contenu. Les valeurs acceptées sont les suivantes. Elles fonctionnent à peu près de la même manière que dans un traitement de texte :

- - - -

Si nous appliquons text-align: center; à l'élément {{htmlelement("h1")}} de notre exemple, nous aurons :

- - - -

{{ EmbedLiveSample('Alignement_du_texte', '100%', 220) }}

- -

Hauteur de ligne

- -

La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne de texte — elle peut prendre la plupart des unités de longueur et de taille, mais elle peut également prendre une valeur sans unité, qui agit comme un multiplicateur et est considérée habituellement comme la meilleure option — la valeur de {{cssxref ("font-size")}} est multipliée par ce facteur pour obtenir la valeur de line-height. Le corps de texte semble généralement plus agréable et est plus facile à lire lorsque les lignes sont espacées ; la hauteur de ligne recommandée est d'environ 1,5-2 (double interligne). Donc, pour définir une hauteur de ligne de texte égale à 1,5 fois la hauteur de la police, vous utiliserez ceci :

- -
line-height: 1.5;
- -

En appliquant cette règle à l'élément {{htmlelement("p")}}  de l'exemple, nous obtenons :

- - - -

{{ EmbedLiveSample('Hauteur_de_ligne', '100%', 250) }}

- -

Espacement entre les lettres et les mots

- -

Les propriétés {{cssxref ("letter-spacing")}} et {{cssxref ("word-spacing")}} permettent de définir l'espacement entre les lettres et les mots de votre texte. Vous ne les utiliserez pas très souvent, mais vous pourriez les utiliser pour obtenir une certaine apparence ou pour améliorer la lisibilité d'une police particulièrement dense. Ils peuvent prendre la plupart des unités de longueur et de taille.

- -

Si nous appliquons les paramètres suivants à la première ligne des éléments {{htmlelement("p")}} dans notre exemple :

- -
p::first-line {
-  letter-spacing: 2px;
-  word-spacing: 4px;
-}
- -

Nous obtiendrons :

- - - -

{{ EmbedLiveSample('Espacement_entre_les_lettres_et_les_mots', '100%', 250) }}

- -

D'autres propriétés intéressantes

- -

Les propriétés ci-dessus donnent un début d'idée de la manière de composer un style pour un texte de page web, mais beaucoup d'autres propriétés peuvent être utilisées. Nous n'avons juste évoqué que les plus importantes. Une fois que vous serez un familier de l'utilisation de ce qui précède, explorez donc ce qui suit :

- -

Styles de police de caractères :

- - - -

styles de mise en page du texte

- - - -

Abréviations pour propriétés de fontes

- -

De nombreuses propriétés des fontes peuvent être déclarées de manière abrégée avec {{cssxref("font")}}. Elles sont écrites dans l'ordre suivant : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}}.

- -

Parmi toutes ces propriétés, seules font-size et font-family sont requises lorsque la propriété abrégée font est utilisée.

- -

Une barre oblique doit être placée entre les propriétés {{cssxref("font-size")}} et {{cssxref("line-height")}}.

- -

Un exemple complet ressemblerait à ceci :

- -
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
- -

Apprentissage actif : jouer avec les styles du texte

- -

Dans cette session d'apprentissage actif, nous n'avons pas d'exercice spécifique à vous proposer : nous voulons juste vous permettre de jouer avec certaines propriétés de police ou mise en page de texte et de voir ce que vous pouvez produire ! Vous pouvez le faire en utilisant des fichiers HTML / CSS hors ligne ou en entrant votre code dans l'exemple modifiable en direct ci-dessous.

- -

Si vous faites une erreur, vous pouvez toujours Réinitialiser avec le bouton de même nom.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Résumé

- -

Nous espérons que vous avez aimé jouer avec le texte dans cet article ! Le prochain article vous donnera tout ce que vous devez savoir sur le style des listes HTML.

- -

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- -

 

- - - -

 

- -

 

diff --git a/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html b/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html deleted file mode 100644 index f216d54186..0000000000 --- a/files/fr/learn/css/styling_text/mise_en_forme_des_liens/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -title: Mise en forme des liens -slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens -tags: - - Article - - Beginner - - CSS - - Focus - - Guide - - Learn - - Links - - Pseudo-class - - hover - - hyperlinks - - menus - - tabs -translation_of: Learn/CSS/Styling_text/Styling_links ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
- -

Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.

- - - - - - - - - - - - -
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.
- -

Un coup d'œil à quelques liens

- -

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

- -

État des liens

- -

La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes pseudo-classes :

- - - -

Styles par défaut

- -

L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).

- -
<p><a href="#">Un simple lien</a></p>
-
- -
p {
-  font-size: 2rem;
-  text-align: center;
-}
- -

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

- -
-

Note : tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.

-
- -

Vous remarquerez quelques petites choses en explorant les styles par défaut :

- - - -

De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :

- - - -

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

- - - -
-

Note : vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !

-
- -

Mise en forme de quelques liens

- -

Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.

- -

Pour commencer, nous écrirons notre jeu de règles vides :

- -
a {
-
-}
-
-
-a:link {
-
-}
-
-a:visited {
-
-}
-
-a:focus {
-
-}
-
-a:hover {
-
-}
-
-a:active {
-
-}
- -

Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).

- -

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-size: 1.2rem;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: #265301;
-}
-
-a:visited {
-  color: #437A16;
-}
-
-a:focus {
-  border-bottom: 1px solid;
-  background: #BAE498;
-}
-
-a:hover {
-  border-bottom: 1px solid;
-  background: #CDFEAA;
-}
-
-a:active {
-  background: #265301;
-  color: #CDFEAA;
-}
- -

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

- -
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
-Firefox</a>, <a href="#">Google Chrome</a>, et
-<a href="#">Microsoft Edge</a>.</p>
- -

En mettant les deux ensemble, nous obtenons ce résultat :

- -

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

- -

Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :

- - - -

Apprentissage actif : mettez en forme vos propres liens

- -

Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.

- -

Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 800) }}

- -

Inclusion d'icônes dans des liens

- -

Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.

- -

Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :

- -
<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
-jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p>
- -

Ensuite, le CSS:

- -
body {
-  width: 300px;
-  margin: 0 auto;
-  font-family: sans-serif;
-}
-
-p {
-  line-height: 1.4;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  padding: 2px 1px 0;
-}
-
-a:link {
-  color: blue;
-}
-
-a:visited {
-  color: purple;
-}
-
-a:focus, a:hover {
-  border-bottom: 1px solid;
-}
-
-a:active {
-  color: red;
-}
-
-a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
-  background-size: 16px 16px;
-  padding-right: 19px;
-}
- -

{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

- -

Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions no-repeat de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.

- -

Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.

- -

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

- -

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un sélecteur d'attribut : a[href*="http] sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.

- -

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

- -
-

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

-
- -

Mise en forme de liens comme des boutons

- -

Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.

- -

En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.

- -

D'abord, un peu d'HTML :

- -
<ul>
-  <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li>
-</ul>
- -

Et maintenant, notre CSS :

- -
body,html {
-  margin: 0;
-  font-family: sans-serif;
-}
-
-ul {
-  padding: 0;
-  width: 100%;
-}
-
-li {
-  display: inline;
-}
-
-a {
-  outline: none;
-  text-decoration: none;
-  display: inline-block;
-  width: 19.5%;
-  margin-right: 0.625%;
-  text-align: center;
-  line-height: 3;
-  color: black;
-}
-
-li:last-child a {
-  margin-right: 0;
-}
-
-a:link, a:visited, a:focus {
-  background: yellow;
-}
-
-a:hover {
-  background: orange;
-}
-
-a:active {
-  background: red;
-  color: white;
-}
- -

Cela nous donne le résultat suivant :

- -

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

- -

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

- - - -
-

Note : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur Fighting the space between inline block elements.

-
- -

Résumé

- -

Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

- -

Dans ce module

- - - - diff --git a/files/fr/learn/css/styling_text/styling_links/index.html b/files/fr/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..f216d54186 --- /dev/null +++ b/files/fr/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,448 @@ +--- +title: Mise en forme des liens +slug: Learn/CSS/Styling_text/Mise_en_forme_des_liens +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.

+ + + + + + + + + + + + +
Prérequis :notions de base en informatique, notions de base en HTML (étudier l'Introduction au HTML), notions de base en CSS (étudier l'Introduction à CSS), initiation à la mise en forme de texte.
Objectif :apprendre à mettre en forme les états des liens, et comment utiliser efficacement les liens dans les fonctionnalités courantes de l'IU, comme les menus de navigation.
+ +

Un coup d'œil à quelques liens

+ +

Nous avons regardé comment les liens sont implémentés dans votre HTML selon les meilleures pratiques dans Création d'hyperliens. Dans cet article, nous allons développer ces connaissances en vous montrant les meilleures pratiques pour la mise en forme de liens.

+ +

État des liens

+ +

La première chose à comprendre est le concept d'états des liens : les différents états dans lesquels les liens peuvent exister, qui peuvent être mis en forme en utilisant différentes pseudo-classes :

+ + + +

Styles par défaut

+ +

L'exemple suivant illustre le comportement d'un lien par défaut (le CSS simplement agrandit et centre le texte pour le rendre plus visible).

+ +
<p><a href="#">Un simple lien</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Styles_par_défaut', '100%', 120) }}

+ +
+

Note : tous les liens dans les exemples de cette page sont de faux liens : un # (hash, ou signe dièse) est mis à la place de l'URL réelle. En effet, si des liens réels étaient inclus, un simple clic sur ceux-ci cassererait les exemples (vous vous retrouveriez avec une erreur, ou une page chargée dans l'exemple intégré de laquelle vous ne pourriez pas revenir) ; # ne redirige que vers la page actuelle.

+
+ +

Vous remarquerez quelques petites choses en explorant les styles par défaut :

+ + + +

De façon assez intéressante, ces styles par défaut sont pratiquement les mêmes que ce qu'ils étaient aux premiers temps des navigateurs, au milieu des années 1990. C'est parce que les utilisateurs connaissent - et s'attendent à - ce comportement ; si les liens étaient mis en forme différemment, cela créerait beaucoup de confusion. Cela ne signifie pas que vous ne deviez pas du tout mettre en forme les liens, mais simplement que vous ne devriez pas vous éloigner trop du comportement attendu. Vous devriez au moins :

+ + + +

Les styles par défaut peuvent être désactivés/modifiés en utilisant les propriétés CSS suivantes :

+ + + +
+

Note : vous n'êtes pas limité aux propriétés ci-dessus pour mettre en forme vos liens ; vous êtes libre d'utiliser les propriétés que vous aimez. Essayez seulement de ne pas devenir trop fou !

+
+ +

Mise en forme de quelques liens

+ +

Maintenant que nous avons examiné les états par défaut en détail, regardons un ensemble typique de mises en forme de liens.

+ +

Pour commencer, nous écrirons notre jeu de règles vides :

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Cet ordre est important parce que les styles de liens se construisent les uns par dessus les autres ; par exemple, les styles de la première règle s'appliqueront à toutes les suivantes, et lorsqu'un lien est activé, il est également survolé. Si vous les mettez dans le mauvais ordre, les choses ne fonctionneront pas correctement. Pour se souvenir de l'ordre, vous pouvez essayer d'utiliser un moyen mnémotechnique comme La Vie Fuit la HAine (LoVe Fears HAte).

+ +

Maintenant, ajoutons quelques informations supplémentaires pour mettre en forme cela correctement :

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

Nous allons aussi fournir un extrait d'HTML auquel appliquer le CSS :

+ +
<p>Il y a plusieurs navigateurs disponibles, tels que <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, et
+<a href="#">Microsoft Edge</a>.</p>
+ +

En mettant les deux ensemble, nous obtenons ce résultat :

+ +

{{EmbedLiveSample('Mise_en_forme_de_quelques_liens', '100%', 150)}}

+ +

Alors qu'avons-nous fait ici ? Cela semble certainement différent de la mise en forme par défaut, mais cela donne toujours une expérience suffisamment familière pour que les utilisateurs sachent ce qui se passe :

+ + + +

Apprentissage actif : mettez en forme vos propres liens

+ +

Dans cette session d'apprentissage actif, nous aimerions que vous utilisiez notre ensemble de règles vide, et que vous ajoutiez vos propres déclarations pour que les liens soient vraiment cools. Utilisez votre imagination, soyez fou. Nous sommes sûrs que vous pourrez trouver quelque chose d'encore plus cool et tout aussi fonctionnel que notre exemple ci-dessus.

+ +

Si vous faites une erreur, vous pouvez toujours l'annuler en utilisant le bouton Réinitialiser. Si vous êtes vraiment bloqué, appuyez sur le bouton Afficher la solution pour insérer l'exemple que nous avons montré ci-dessus.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

Inclusion d'icônes dans des liens

+ +

Une pratique courante consiste à inclure des icônes dans des liens pour fournir plus d'un indicateur concernant le type de contenu vers lequel le lien pointe. Regardons un exemple très simple qui ajoute une icône à des liens externes (les liens qui mènent à d'autres sites). Une telle icône ressemble généralement à une petite flèche pointant hors d'une boîte ; pour cet exemple, nous allons utiliser cet excellent exemple de icons8.com.

+ +

Regardons un peu d'HTML et de CSS qui nous donneront l'effet que nous voulons. Tout d'abord, un peu d'HTML simple à mettre en forme :

+ +
<p>Pour davantage d'information sur la météo, visitez notre <a href="http://#">page météo</a>,
+jetez un œil sur <a href="http://#">météo sur Wikipedia</a>, ou regardez la <a href="http://#">météo sur Science Extrême </a>.</p>
+ +

Ensuite, le CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample("Inclusion_d'icônes_dans_des_liens", '100%', 150) }}

+ +

Alors, qu'est-ce qui se passe ici ? Nous allons sauter le gros du CSS, du fait que c'est seulement la même information que celle que vous avez déjà regardée. La dernière règle est cependant intéressante : ici, nous insérons une image d'arrière-plan personnalisée sur les liens externes d'une manière similaire à celle dont nous avons traité les puces personnalisées sur les éléments de liste dans le dernier article ; cette fois, nous utilisons le raccourci {{cssxref("background")}} au lieu des propriétés individuelles. Nous définissons le chemin vers l'image que nous voulons insérer, nous spécifions no-repeat de façon à obtenir l'insertion d'une seule une copie, puis nous indiquons la position comme étant 100% de la distance à droite du contenu du texte, et 0 pixels à partir du haut.

+ +

Nous utilisons également {{cssxref("background-size")}} pour indiquer à quelle taille nous voulons afficher l'image d'arrière-plan - il est utile d'avoir une icône plus grande et de la redimensionner comme nécessaire dans un but de conception web adaptative. Cela ne fonctionne cependant qu'avec IE 9 et ultérieur, donc si vous avez besoin de prendre en charge ces navigateurs plus anciens, il vous suffira de redimensionner l'image et de l'insérer telle quelle.

+ +

Enfin, nous avons mis un peu de {{cssxref("padding-right")}} sur les liens pour faire de la place afin que l'image d'arrière-plan se place à l'intérieur, de sorte que nous ne la faisions chevaucher le texte.

+ +

Un dernier mot : comment avons-nous sélectionné uniquement les liens externes ? Eh bien, si vous écrivez vos liens HTML correctement, vous ne devriez utiliser des URL absolues que pour les liens externes : il est plus efficace d'utiliser des liens relatifs pour la redirection vers d'autres parties de votre propre site. Le texte "http" ne devrait donc apparaître que dans les liens externes, et nous pouvons le sélectionner avec un sélecteur d'attribut : a[href*="http] sélectionne les éléments {{htmlelement("a")}}, mais seulement s'ils ont un attribut {{htmlattrxref ("href","a")}} ayant une valeur contenant "http" quelque part à l'intérieur.

+ +

Alors voilà, essayez de revoir la section d'apprentissage actif ci-dessus et d'explorer cette nouvelle technique !

+ +
+

Note : ne vous inquiétez pas si vous n'êtes pas encore familier avec les arrières-plans et le responsive web design ; ceux-ci sont expliqués par ailleurs.

+
+ +

Mise en forme de liens comme des boutons

+ +

Les outils que vous avez explorés jusqu'à présent dans cet article peuvent également être utilisés d'autres façons. Par exemple, des états tels que hover peuvent être utilisés pour mettre en forme de nombreux éléments différents, pas seulement des liens : vous pouvez définir l'état de survol des paragraphes, des éléments de liste ou d'autres choses.

+ +

En outre, les liens sont très couramment mis en forme de façon à ressembler et à se comporter comme des boutons dans certaines circonstances : un menu de navigation de site Web est généralement balisé comme une liste contenant des liens, et cela peut facilement être mis en forme pour ressembler à un ensemble de boutons de contrôle ou d'onglets qui fournissent à l'utilisateur un accès à d'autres parties du site. Voyons comment.

+ +

D'abord, un peu d'HTML :

+ +
<ul>
+  <li><a href="#">Accueil</a></li><li><a href="#">Pizza</a></li><li><a href="#">Musique</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland<e/a></li>
+</ul>
+ +

Et maintenant, notre CSS :

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Cela nous donne le résultat suivant :

+ +

{{ EmbedLiveSample('Mise_en_forme_de_liens_comme_des_boutons', '100%', 100) }}

+ +

Expliquons ce qui se passe ici, en nous concentrant sur les parties les plus intéressantes :

+ + + +
+

Note : vous avez peut-être remarqué que les éléments de la liste dans le HTML sont tous placés sur la même ligne ; cela est dû au fait que les espaces/sauts de ligne entre les éléments inline block créent des espaces sur la page, tout comme des espaces entre les mots, et que de tels espaces casseraient la disposition de notre menu de navigation horizontale ; nous avons donc supprimé les espaces ; vous pouvez trouver plus d'informations (et de solutions) à propos de ce problème sur Fighting the space between inline block elements.

+
+ +

Résumé

+ +

Nous espérons que cet article vous a fourni tout ce que vous aviez besoin de savoir sur les liens - pour l'instant ! L'article final de notre module de Mise en forme de texte détaille comment utiliser des polices personnalisées (ou polices web, comme elles sont mieux connues) sur vos sites web.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

Dans ce module

+ + + + -- cgit v1.2.3-54-g00ecf