7. Formatage du texte

Formatage du texte - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application

Prêt à commencer à concevoir votre site Web comme un véritable développeur Web ? Ne cherchez plus, ce chapitre est fait pour vous.

Dans le dernier chapitre, nous avons appris les bases du langage CSS : qu'est-ce que c'est, pourquoi est-il utilisé, où écrire du code CSS et comment appliquer un style CSS à un élément HTML spécifique.

La mise en forme du texte signifie simplement que nous allons modifier l'apparence du contenu du texte.

À ce sujet... Je ne veux pas me plaindre, mais nous avons seulement appris à changer la couleur de notre texte. C'est tout ce qu'il y a à CSS ?

Il est vrai que nous n'avons vu qu'une seule propriété CSS jusqu'à présent.

Mais ce n'était qu'à des fins de démonstration afin que vous puissiez voir les changements en temps réel sur votre page Web.

À partir de maintenant, nous utiliserons beaucoup plus de propriétés CSS pour formater notre texte.

Dans ce chapitre, nous allons apprendre à ajuster la taille du texte, modifier la police, appliquer un effet de texte tel que l'italique, aligner les paragraphes.

À la fin de ce chapitre, votre site Web commencera (enfin) à ressembler à quelque chose.

Taille du texte

Pour changer la taille de votre texte, vous n'avez besoin que d'une seule propriété CSS : font-size.

Mais que saisissons-nous pour sa valeur ?

Il existe deux méthodes pour spécifier la taille du texte en CSS :

une valeur absolue spécifie une taille de police en pixels, pouces, points, millimètres, etc.
une valeur relative spécifie une taille de police sous forme de pourcentage de la taille de texte par défaut de la page.

Les deux méthodes sont utilisées de manière significative pour la conception Web.

Une taille absolue

Pour définir une taille absolue en CSS, nous utilisons ce qu'on appelle des valeurs de longueur.

Ceux-ci peuvent être des points, des pixels, des pouces, des centimètres, des millimètres ou même des pica.

Pour le développement web, le format préféré est presque toujours le pixel.

D'autres valeurs de longueur telles que les pouces sont moins adaptées à l'affichage à l'écran.

Voici comment utiliser les pixels avec la propriété font-size.

p { font-size : 16 px ; }

L'unité de longueur ici est le pixel donc nous ajoutons son symbole px à la valeur que nous voulons.

Le texte de vos paragraphes devrait maintenant faire 16 pixels de haut... ce qui ne devrait rien changer puisque 16 pixels est la taille de police par défaut sur la plupart des navigateurs.

Essayez d'utiliser une taille plus grande ou plus petite pour voir le texte changer sur votre page Web.

Comme je l'ai mentionné, px est le symbole de l'unité de pixel. Il existe d'autres unités absolues telles que le pouce in, le centimètre cm ou le point pt. Les longueurs de pixel sont généralement préférées pour une utilisation sur le Web.

Une taille relative

Les tailles de police relatives sont, comme leur nom l'indique, relatives.

D'accord. C'est génial. Mais qu'est-ce que cela signifie? Je pensais que nous avions déjà des pixels, des pouces et tout le reste ?

Les pixels et autres unités sont des valeurs absolues.

Cela signifie que 1 pixel mesurera toujours 1 pixel.

Les valeurs relatives, d'autre part, utilisent un ensemble différent d'unités qui sont flexibles, adaptables et surtout dépendantes du contexte. Le contexte étant généralement les paramètres par défaut du navigateur, ou ceux de votre page Web si vous avez décidé de les écraser.

Une façon de spécifier une valeur relative consiste à entrer carrément leurs tailles.

Voici une liste des différentes valeurs que vous pouvez définir et leur signification.

xx-small : extrêmement petit
x-small: très petit
small: petit
medium: moyen
large: grand
x-large : très grand
xx-large : comédie sur la filiation maternelle

Vous pouvez utiliser ces valeurs dans votre code CSS comme suit.

h1 { font-size: large; }

p { font-size: small; }

Bien que cette méthode fonctionne, il y a un inconvénient évident : il n'y a que sept tailles disponibles.

Heureusement, vous pouvez également utiliser d'autres unités pour définir une taille de police relative.

L'un d'entre eux est l'unité em.

En CSS, un em est égal à la taille de la police de l'élément parent.

Si vous voulez une taille de texte normale, restez avec 1.

Si vous souhaitez une taille de texte plus grande, entrez une valeur supérieure à 1, telle que 1,5 em.

Si vous voulez une taille de texte plus petite, entrez une valeur inférieure à 1 telle que 0.8em.

Les décimales sont bien sûr préférées car 2em doublerait la taille du texte.

Voici comment utiliser cette unité en CSS.

h1 { font-size: 1,5 em ; }

p { font-size : 0,8 em ; }

Il existe d'autres unités disponibles.

Vous pouvez utiliser em, rem, ex ou pourcentages %.

Outre rem qui est une variante de em, ils ont tous des bases différentes.

Mais combien vaut 1em en pixels ? Comment convertir des valeurs relatives en valeurs absolues et vice versa ?

Vous ne le faites pas.

C'est le but des valeurs relatives : leurs valeurs absolues sont conditionnées soit par le format d'un élément parent, soit par les paramètres du navigateur.

Par défaut, 1em vaut 16 pixels pour la plupart des navigateurs de bureau.

Mais cette valeur peut être inférieure sur certains smartphones et tablettes.

De plus, l'unité em dépend de la taille des éléments parents ou ancêtres.

Prenons par exemple ce code HTML.

<div>

<p>Bienvenue sur <span>SAGProfProg</span></p>

</div>

Comme nous l'avons dit, la valeur par défaut de 1em sur la plupart des navigateurs est de 16px.

Mais si l'élément parent a une taille de police plus grande, cela affectera la valeur de base de l'unité em.

div { font-size: 20px; }
p { font-size: 1em; }
span { font-size: 1.5em; }

Dans l'élément <div> la valeur de 1em n'est plus 16px mais 20px.

Et tout texte dans une balise <span> aura une taille de police de 30 pixels.

Si vous voulez les valeurs relatives de em sans qu'elles soient affectées par les éléments parents ou ancêtres, vous pouvez utiliser l'unité rem. Il est identique à em mais il ignore les balises parentes et ne dépend que de la taille de la police de l'élément racine, la balise <html>.

Famille de polices

En CSS, la famille de polices est la police qui sera appliquée à votre texte.

Habituellement, elles sont simplement appelées "polices", mais les noms ne sont pas nécessairement interchangeables.

Indépendamment de la sémantique et de la terminologie, appliquer une police (ou une police de caractères) à une partie du texte de votre page Web est très simple.

Le seul problème qui se pose est la disponibilité de la police.

Pour qu'une police s'affiche correctement, nous avons besoin que l'utilisateur ait installé cette police.

Sinon, si un utilisateur n'a pas la police que vous souhaitez afficher sur votre page, le navigateur appliquera une police de caractères par défaut qui peut avoir peu de similitudes visuelles avec ce que vous attendiez.

Certes, tout le monde a installé "Arial"...

Mais qu'en est-il de la nouvelle police "SEWER2154.otf" que vous aviez l'intention d'utiliser sur votre site Web edgy extreme metal ?

La bonne nouvelle est que depuis CSS3, vous pouvez intégrer une police directement à partir de votre feuille de style. Je vais vous expliquer comment procéder dans un instant.

Modification de la police

Comme je l'ai dit, changer la police est facile.

La propriété CSS qui vous permet de spécifier une police de caractères est font-family.

Voici comment il est utilisé.

font-family : police ;

Remplacez simplement la valeur font par l'identificateur de police ou les noms de famille de polices que vous souhaitez utiliser.

Nous verrons quelles polices sont les plus appropriées pour une utilisation Web en une seconde.

La propriété font-family permet également d'indiquer plusieurs noms de polices, séparés par des virgules.

font-family : police1, police2, police3, police4 ;

Chaque nom de police après le premier est une police alternative.

La raison de fournir une liste prioritaire plutôt qu'une seule police est que les autres polices agiront comme une sauvegarde au cas où l'utilisateur n'aurait pas installé la première police.

Dans notre exemple, le navigateur vérifiera d'abord si l'utilisateur a installé font1.

S'il en a, tout se passe bien et il s'affiche.

S'il ne le fait pas, le navigateur vérifie avec font2 et ainsi de suite jusqu'à font4.

La dernière police est une police de secours ou une police de dernier recours que tout le monde est sûr d'avoir. C'est généralement avec empattement ou sans empattement.

D'accord, mais quelles polices puis-je utiliser sur le Web ? Vous ne nous avez toujours pas donné de liste de noms de polices !

Techniquement, vous pouvez utiliser la police de votre choix.

Si une police existe, elle peut être affichée sur le Web.

Le problème vient de la compatibilité du système d'exploitation et du navigateur.

Heureusement, il existe quelques polices génériques également appelées polices sécurisées pour le Web qui sont considérées comme raisonnablement susceptibles d'être présentes sur la plupart des ordinateurs, sinon tous.

Polices sécurisées pour le Web

Les polices sécurisées pour le Web sont les polices qui garantissent une compatibilité maximale avec la plupart des navigateurs et des systèmes d'exploitation.

Voici une liste des polices sécurisées Web les plus courantes :

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Helvetica
Impact
Palatino
Times New Roman
Trebuchet MS
Verdana

De nombreux développeurs Web recommandent de spécifier au moins trois ou quatre polices, en commençant par la police souhaitée et en terminant par serif ou sans-serif.

Je trouve cela un peu excessif mais cela dépend vraiment de vous et du nombre d'alternatives que vous souhaitez proposer.

Vous n'arrêtez pas de parler d'empattement et de sans empattement, qu'est-ce que c'est ?

Dans ce contexte, ce sont des polices.

Ce sont les plus basiques que vous pouvez trouver et elles seront toujours rendues même si pour une raison quelconque l'utilisateur n'a pas de polices installées sur son ordinateur.

Mais serif et sans serif ont une signification plus large qui est antérieure au développement Web.

En typographie, les empattements sont des éléments semi-structurels ajoutés pour embellir les caractères d'une police de caractères.

Ainsi, toutes les polices peuvent être divisées selon que leurs lettres possèdent ou non des empattements. Dans ce dernier cas, elles sont appelées polices sans empattement.

Les polices Serif sont considérées comme plus faciles à lire en version imprimée car les lettres sont plus distinctives.

La plupart des livres sont généralement publiés avec une police serif.

Times New Roman et Georgia sont des polices avec empattement tandis qu'Arial et Verdana sont sans empattement.

Cette distinction est quelque peu importante lorsqu'il s'agit d'indiquer des polices alternatives.

Vos polices de secours doivent si possible être du même type que la police préférée.

Par exemple, si je vise une police sans empattement, mon code CSS serait le suivant.

p { font-family : Impact, "Arial Black", Arial, Verdana, sans-serif ; }

Toutes les polices possibles sont sans empattement.

Si le nom de la police comprend des espaces, je vous suggère de l'entourer de guillemets comme je l'ai fait avec "Arial Black". Cela devient nécessaire lorsque le nom de la police contient des chiffres ou des caractères spéciaux.

En plus de serif et sans serif, il existe d'autres types de polices telles que monospace, cursive et fantasy. Ils ne sont pas beaucoup utilisés et la différence de style est minime par rapport à serif/sans serif.

Utilisation d'une police personnalisée

Vous savez maintenant comment changer la police de caractères de votre texte et proposer des polices alternatives à l'utilisateur.

Ces polices sont nulles. Je souhaite utiliser mes propres polices au lieu d'Arial et de Verdana.

Pendant longtemps, cela n'a pas été possible.

Vous deviez soit utiliser une police sécurisée pour le Web, soit essayer de deviner quelles polices étaient installées sur l'ordinateur de l'utilisateur et espérer que vous aviez raison.

Puis CSS 3 est arrivé et il est désormais possible d'intégrer n'importe quelle police directement dans votre feuille de style CSS.

Je serai le premier à admettre que c'est une fonctionnalité plutôt cool, mais il y a encore pas mal d'inconvénients à cette pratique.

Ce sont quelques-uns des rares inconvénients de cette méthode.

L'intégration d'une police signifie que l'utilisateur devra la charger via son navigateur. Certaines polices peuvent peser jusqu'à 1 Mo ou plus, ce qui signifie qu'il atteindra la puberté avant d'avoir fini de charger votre site Web.
De nombreuses polices sont soumises au droit d'auteur, ce qui rend leur utilisation illégale sur votre site Web. Il existe encore de nombreuses alternatives gratuites, ce n'est donc pas vraiment un problème si vous connaissez la licence de votre police.
Il existe plusieurs formats de polices et tous les formats ne sont pas compatibles avec tous les navigateurs. C'est moins un problème aujourd'hui comme nous le verrons plus loin, mais cela peut compliquer les choses pour ceux qui utilisent des navigateurs obsolètes.

Les deux derniers points ne sont plus aussi importants qu'avant.

Le plus grand obstacle à l'utilisation de polices personnalisées est la taille de chaque fichier, donc si vous les utilisez, assurez-vous que c'est avec parcimonie.

Mais puisque nous avons commencé à parler des formats de police, faisons un petit détour et présentons-les correctement.

Les différents formats de police

Tout comme les fichiers image ont des formats différents en fonction, entre autres facteurs, de leur méthode de compression, les fichiers de polices ont également des formats distincts qui affectent la manière dont leurs données sont stockées.

Voici une liste des principaux formats de police utilisés sur le Web.

.ttf : Police TrueType. Fonctionne avec Internet Explorer 9 et versions ultérieures et tous les autres navigateurs.
.eot : OpenType intégré. Fonctionne uniquement avec Internet Explorer, sur toutes les versions. Il s'agit d'un format propriétaire produit par Microsoft.
.otf : Police OpenType. Semblable à .ttf, fonctionne sur tous les navigateurs sauf les anciennes versions d'Internet Explorer (avant IE 9).
.svg : graphiques vectoriels évolutifs. Pendant longtemps, ce format a été le seul supporté par les navigateurs iPhone et iPad. Fonctionne sur la plupart des versions de Safari.
.woff : format de police Web ouvert. Un format plus récent conçu spécifiquement pour le Web. Fonctionne sur tous les navigateurs récents.

Généralement, vous voulez vous en tenir aux .ttf, .otf et .woff.

Certains développeurs Web préfèrent fournir une version de police dans chaque format pour assurer une compatibilité maximale.

Déclarer une nouvelle police

Pour définir une police personnalisée, vous avez d'abord besoin d'un fichier de police dans l'un des formats susmentionnés.

Il existe de nombreux sites sur Internet qui proposent des polices gratuites à télécharger. Un répertoire de polices que je peux recommander est Font Squirrel, mais il y en a beaucoup d'autres que vous pouvez essayer.

Une fois que vous avez téléchargé vos fichiers de polices, extrayez-les dans le même répertoire que votre feuille de style CSS.

C'est ce que vous devriez avoir dans votre explorateur de fichiers.

Dans cette démonstration, les deux fichiers de polices sont Learning.otf et Rust.otf.

L'utilisation d'une police personnalisée dans CSS est un processus en deux volets.

Vous devez d'abord déclarer une nouvelle police puis l'appliquer sur le sélecteur de votre choix.

Nous savons déjà comment effectuer la deuxième action, alors concentrons-nous d'abord sur la déclaration.

C'est ainsi que vous déclarez une nouvelle police en CSS.

@font-face {

font-family: 'SAGProfProg';

src: url('SAGProfProg.otf');

}

La syntaxe ressemble à celle d'un sélecteur mais c'est en fait quelque chose de complètement différent.

Tout ce qui commence par une publicité à @ en CSS s'appelle une "règle" ou "à-règle".

Par convention, ceux-ci se placent en haut de votre document CSS avant tout formatage de style.

Cette règle est nommée @font-face et contient deux "propriétés".

J'utilise des guillemets car bien qu'ils ressemblent à des propriétés CSS, ils sont en fait appelés des descripteurs et fonctionnent d'une manière légèrement différente.

Voici des deux descripteurs que nous avons utilisés.

font-family déclare le nom de la police. Dans notre exemple, c'est SAGProfProg mais cela peut être tout ce que vous voulez. C'est simplement l'identifiant que nous écrirons lorsque nous voudrons appliquer la police.
src déclare la source (emplacement) du fichier de police. Dans notre exemple, il s'agit de SAGProfProg.otf. Mais si je voulais utiliser l'un des deux fichiers de polices de l'image ci-dessus, j'écrirais Rust.otf ou Learning.otf.

Ce short code vient de "créer" une nouvelle police avec le nom SAGProfProg et dont le fichier était situé à SAGProfProg.otf dans le même répertoire que notre feuille de style CSS.

Mais que se passe-t-il si j'ai plusieurs formats de police pour la même police ?

Facile.

Entrez simplement autant de formats que vous le souhaitez.

Le navigateur téléchargera automatiquement celui qu'il peut lire et ignorera le reste.

@font-face {

font-family: 'SAGProfProg';

src: url('SAGProfProg.eot') format('eot'),

url('SAGProfProg.woff') format('woff'),

url('SAGProfProg.ttf') format('truetype'),

url('SAGProfProg.svg') format('svg');

}

Maintenant que nous savons comment déclarer une nouvelle police, il ne reste plus qu'à apprendre comment l'appliquer à un élément HTML spécifique.

C'est peut-être la partie la plus simple... tout ce que vous avez à faire est d'utiliser la propriété font-family .

Mais au lieu d'utiliser un nom de police générique, vous entrez simplement le nom de la police que vous avez précédemment déclarée.

Assurez-vous simplement que le nom de police personnalisé que vous avez utilisé dans @font-face correspond à celui que vous utilisez dans les propriétés de votre sélecteur.

L'exemple suivant vous montrera comment définir et appliquer deux polices personnalisées en CSS.

D'abord le code HTML.

<h1>Bienvenue sur SAGProfProg</h1>

<p>SAGProfProg est le meilleur site sur le Web.</p>

Rien de spécial ici.

Passons maintenant au code CSS.

@ font-face {

famille de polices : 'Rust' ;

src : url('Rust.otf');

}

@ font-face {

font-family : 'Learning' ;

src : url('Learning.otf');

}

h1 { font-family: 'Rust'; }

p { font-family: 'Learning'; }

Nous avons défini deux polices personnalisées et les avons appliquées respectivement aux éléments <h1> et <p>.

Voici ce que vous devriez voir dans votre navigateur.

Les résultats dépendent évidemment des polices que vous avez choisies.

Décorations typographiques

CSS possède de nombreuses propriétés qui vous permettent de styliser votre texte.

Vous pouvez appliquer l'italique, le gras, le souligner, le surligner et même faire clignoter votre texte. N'utilisez simplement pas le dernier, le texte clignotant est un sérieux déclencheur de SSPT pour les développeurs Web chevronnés.

Pourquoi ai-je besoin de CSS pour cela ? Je pensais que nous avions déjà la balise <em> pour le texte en italique !

Où as-tu appris ça ?

Certainement pas de moi.

En fait, au cours du chapitre Organiser votre texte, j'ai spécifiquement indiqué que les balises de surbrillance HTML telles que <strong>, <em> et <mark> ne devaient pas être utilisées pour la mise en forme du texte.

HTML pour le contenu, CSS pour le style. Répétez cela tous les jours si vous le devez.

Les balises HTML telles que <em> et <strong> sont utilisées pour souligner les mots. Ils communiquent à l'agent de navigation que leur contenu doit être traité comme un texte important.

Par défaut, la plupart des navigateurs appliqueront un certain style de texte en fonction de la balise (gras pour <strong>, italique pour <em>, etc.).

Mais ce n'est pas le but de ces éléments.

L'application de caractères gras, italiques, soulignés et autres décorations de texte appartient au domaine du CSS.

Apprenons à le faire.

Italique en CSS

Avec CSS, vous pouvez appliquer des italiques à n'importe quel élément HTML de votre choix, qu'il s'agisse de paragraphes, de titres ou de toute autre chose.

Pour appliquer l'italique en CSS, vous utilisez le style de police.

Cette propriété peut prendre trois valeurs :

italic : le texte sera écrit en italique.
oblique : le texte sera affiché obliquement.
normal : le texte sera remis à la normale (par défaut).

Voici une démonstration.

p { style de police : italique ; }

Ce code rendra vos paragraphes en italique.

Mais disons que vous voulez supprimer l'italique de la balise <em>.

em { style de police : normal ; }

Avec cela, l'élément <em> ne sera plus en italique.

Quelle est la différence entre un texte en italique et un texte oblique ? Ils me ressemblent tous les deux.

Une oblique est une police romaine qui a été inclinée d'un certain nombre de degrés, généralement entre huit et douze.

Un italique, d'autre part, est une variation du jeu de caractères qui comprend la police, souvent avec une calligraphie supplémentaire utilisée pour accentuer l'inclinaison.

L'italique est une police de caractères inclinée avec un jeu de caractères distinct de son équivalent romain.

Les obliques ne sont qu'une transformation géométrique de la police d'origine.

Pour que l'italique s'affiche correctement, l'utilisateur doit avoir installé la version italique de la police.

S'il ne le fait pas, le texte est simplement embroché et un effet oblique est créé à la volée.

Quant à savoir quel effet est le meilleur, la version en italique est généralement préférée par les développeurs Web, mais ce n'est qu'une convention.

Gras en CSS

Passons à l'effet de texte en gras.

Encore une fois, la bonne raison d'appliquer une mise en forme en gras n'est pas via l'élément HTML <strong>.

La propriété CSS pour le texte en gras est font-weight.

Il y a pas mal de valeurs que cette propriété peut prendre alors commençons par les deux principales.

bold : le texte sera affiché en gras.
normal : le texte sera affiché normalement (par défaut).

Voici un exemple sur la façon de mettre vos paragraphes en gras.

p { font-weight: bold; }

Rien de bien compliqué ici.

Et les autres valeurs ? Vous avez dit que ces deux-là n'étaient que les principaux.

En plus de gras et normal, vous pouvez également utiliser plus gras et plus clair qui sont respectivement plus gras et plus clair que le poids de police hérité.

Il existe également une troisième manière d'indiquer un poids de police, par des valeurs numériques.

100 : Le plus léger.
200 : plus audacieux que 100, plus léger que 300.
300 : Plus gras que 200, plus léger que 400.
400 : Plus gras que 300, plus léger que 500. Équivalent de la normale.
500 : Plus audacieux que 400, plus léger que 600.
600 : plus audacieux que 500, plus léger que 700.
700 : Plus gras que 600, plus léger que 800. Équivalent de gras.
800 : plus audacieux que 700, plus léger que 900.
900 : Le plus audacieux.

Bien que cette méthode offre plus d'options que la première, il ne faut pas se fier à ces neuf valeurs numériques pour appliquer une épaisseur de police de manière cohérente.

De nombreuses polices contiennent moins de neuf variantes en gras, donc à moins que vous n'ayez d'abord testé la police, je vous recommande de vous en tenir au gras et à la normale.

Souligné en CSS

Qu'en est-il de l'application du soulignement et d'autres styles de texte ?

La propriété CSS pour cela porte bien son nom : text-decoration.

Il peut prendre les valeurs suivantes.

underline : souligné.
line-through: barré.
overline : une ligne au-dessus.
blink : texte clignotant. Sérieusement, ne l'utilisez pas. Il ne fonctionne même plus sur la plupart des navigateurs.
none : normal (par défaut).

Le code CSS suivant ajoutera un effet de soulignement à l'élément <h1> et supprimera le soulignement par défaut de tous les liens de votre page Web.

h1 { texte-decoration : underline; }

a { text-decoration: none; }

Vous pouvez appliquer plusieurs valeurs en les séparant par des espaces.

p { text-decoration: overline underline; }

p { text-decoration: overline underline line-through ; }

Essayez-le et voyez le résultat par vous-même.

Je veux changer la couleur du soulignement. Comment puis je faire ça?

Plutôt facilement.

Vous pouvez utiliser la propriété text-decoration-color.

Pour sa valeur, spécifiez simplement la couleur de votre choix. Par défaut, il sera de la même couleur que votre texte.

p {

text-decoration: underline;

text-decoration-color: red;

}

Le code ci-dessus soulignera chaque paragraphe en rouge sans changer la couleur du texte.

Alignement et flotteurs

Il existe deux façons de gérer l'alignement dans CSS.

Vous pouvez soit ajuster la façon dont le texte est aligné dans un élément de bloc, soit modifier la façon dont l'élément de bloc lui-même est aligné en le faisant flotter vers la gauche ou vers la droite.

Alignement en CSS

CSS vous permet de spécifier la manière dont le texte en ligne est aligné dans un élément de bloc.

Votre texte peut être aligné à gauche, à droite, au centre ou même configuré pour occuper tout l'espace horizontal disponible.

La propriété CSS utilisée pour définir les alignements typographiques est sans surprise appelée text-align.

Voici les valeurs qu'il peut prendre.

left : le texte sera aligné à gauche (par défaut).
center : le texte sera centré.
right : le texte sera aligné à droite.
justify : le texte sera justifié.

Le contenu justifié signifie simplement que le texte n'importe quel espace blanc à la fin des lignes.

La plupart des livres et autres supports imprimés ont un texte justifié.

Voyons les différents alignements en action.

h1 { text-align: center; }

p { text-align : justifier ; }

.footer { text-align: right; }

Le résultat est illustré ci-dessous.

Vous ne pouvez pas modifier l'alignement d'un élément en ligne tel que <span>, <em> ou <a>. Il doit être utilisé sur un paragraphe <p>, un titre <h1> ou tout autre élément de bloc.

Éléments flottants en CSS

Il existe une autre méthode d'alignement en CSS appelée le flotteur, communément et de manière plus appropriée appelée habillage de texte.

Les flottants fonctionnent différemment de l'alignement typographique.

Alors que les alignements de texte ne formatent que le contenu à l'intérieur d'un élément de bloc, les flottants affectent l'ensemble de l'élément.

L'image suivante devrait vous donner une idée de la façon dont ils sont utilisés sur une page Web.

Comme vous pouvez le voir, l'image flotte vers la droite.

La propriété CSS dont vous avez besoin pour modifier le flotteur d'un élément s'appelle... float. Qui aurait pensé?

Voici les valeurs qu'il peut prendre :

none : il n'y a pas de flottant (par défaut).
left : l'élément flottera à gauche.
right: l'élément flottera à droite.

En théorie, la propriété float ne peut être appliquée qu'à un élément de niveau bloc.

Mais ce n'est pas un problème car les éléments en ligne avec un flotteur seront automatiquement convertis en une disposition de bloc.

Vous pouvez donc utiliser float sur n'importe quelle balise HTML de votre choix : une image, un titre, un paragraphe, etc.

Cela dit, les flottants fonctionnent mieux lorsque l'élément affecté a une largeur définie.

Pour notre exemple, nous utiliserons une image.

Une image flottante

Pour appliquer un flottant à une image ou à tout élément HTML, vous avez d'abord besoin du code HTML approprié.

Voici ce que nous allons utiliser dans notre exemple.

<p><img src="sagprofprog.png" alt="Bienvenue sur SAGProfProg" /></p>

<p>Bienvenue sur SAGProfProg. SAGProfProg est le meilleur site sur le Web. Pourquoi SAGProfProg est-il si génial ? Et pourquoi toutes vos démos contiennent-elles le même texte ?</p>

<p>Qui sait...</p>

Une erreur courante consiste à placer l'élément flottant après le texte. Que vous souhaitiez qu'il flotte vers la droite ou vers la gauche, il doit être au-dessus du texte qui l'entoure.

Pour l'instant, il n'y a pas de code CSS, vous ne remarquerez donc rien de différent.

Tapons ce qui suit dans notre fichier CSS.

img

{

float: left;

}

Et c'est tout.

Une seule propriété.

Ce code fera flotter chaque balise <img /> vers la gauche.

Si vous voulez qu'il flotte vers la droite à la place, remplacez simplement la valeur de la propriété float en conséquence.

Vider un flotteur

Lorsque vous insérez un élément flottant, le texte l'entoure naturellement d'un côté ou de l'autre.

Mais que se passe-t-il si vous voulez qu'une partie de votre texte soit sous l'élément flottant ?

Comme vous pouvez le voir, dans notre exemple, nous avons deux paragraphes.

Comment pouvons-nous faire en sorte que le second ne soit pas affecté par le flottement de l'image ?

CSS a une propriété qui vous permet de faire exactement cela.

Les éléments affectés par la propriété clear ignoreront automatiquement tout élément flottant et seront déplacés vers le bas (effacés) en dessous.

Voici les valeurs qu'il peut prendre.

left : l'élément est déplacé vers le bas après un float gauche
right : l'élément est déplacé vers le bas après un float à droite
both : l'élément est déplacé vers le bas après tout type de flotteur

En pratique, nous utiliserons principalement la troisième option.

Appliquons-le à notre démonstration.

Tout d'abord, le code HTML.

<p><img src="sagprofprog.png" alt="Bienvenue sur SAGProfProg" /></p>

<p class="sagprofprog">Qui sait...</p>

Rien de très différent de ce que nous avons vu précédemment, le seul ajout étant l'identifiant de classe appliqué au deuxième paragraphe.

Maintenant pour le code CSS.

img { float: left; }

.sagprofprog { clear: both; }

C'est ça.

Le deuxième paragraphe doit maintenant commencer sous l'image flottante, comme illustré dans la figure suivante.

Vous connaissez maintenant les deux méthodes pour aligner des éléments en CSS.