. Et cette balise a déjà l'attribut " aligner", dont la valeur détermine la position de ce conteneur. Il existe trois valeurs : " gauche", "centre", "droite". Par défaut, c'est " gauche« Cependant, je pense que cela ne vous surprend pas.

Écrivons le même maintenant Code HTML, mais en utilisant des conteneurs, en plus, alignons-nous non pas au centre, mais à droite.

Comme vous pouvez le constater, tout fonctionne. Je vous conseille de modifier également les valeurs de l'attribut " aligner" pour examiner d'autres types d'alignement du contenu des conteneurs.

Une autre façon d'aligner les éléments HTML- ce sont des tableaux, mais ce sujet mérite une discussion séparée, nous en parlerons donc dans l'un des articles suivants.

Pour l'instant, votre page devrait ressembler à ceci :

Titre de 1er niveau, aligné au centre

Cordialement, Mikhaïl Rusakov.

P.S. Si vous voulez en savoir plus sur HTML, alors jetez un œil à mon cours gratuit avec un exemple de création de site Web sur HTML:

Pour les images, vous pouvez spécifier leur position par rapport au texte ou à d'autres images sur la page Web. La façon dont les images sont alignées est spécifiée par l'attribut align.

Cet attribut est obsolète, utilisez plutôt des styles.

Syntaxe

Valeurs

Dans le tableau 1 répertorie les valeurs possibles de l'attribut align et le résultat de son utilisation.

Tableau 1. Utilisation des valeurs d'attribut d'alignement

Signification	Description	Exemple
bas	Aligne la bordure inférieure de l'image avec le texte environnant.
gauche	Aligne l'image sur le bord gauche de la fenêtre.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
milieu	Aligne le milieu de l'image sur la ligne de base de la ligne actuelle.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
droite	Aligne l'image sur le bord droit de la fenêtre.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
haut	La bordure supérieure de l'image est alignée sur l'élément le plus haut de la ligne actuelle.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Valeur par défaut

Exemple

Ce texte s'enroule autour du bord gauche de l'image.

Navigateurs

Les notations suivantes sont utilisées dans la table du navigateur.

• - l'élément est entièrement pris en charge par le navigateur ;
• - l'élément n'est pas perçu par le navigateur et est ignoré ;
• - pendant le fonctionnement, diverses erreurs peuvent apparaître, ou l'élément est pris en charge avec des réserves.

Le numéro indique la version du navigateur à partir de laquelle l'élément est pris en charge.

Description

Aligne un bloc de texte sur le bord.

Les styles doivent être utilisés à la place de cet attribut

Syntaxe

Valeurs

left Aligne le texte à gauche. Dans ce cas, les lignes de texte sont alignées vers la gauche et le bord droit est disposé en échelle. Cette méthode d'alignement est la plus populaire sur les sites Web, car elle permet à l'utilisateur de trouver facilement le nouvelle ligne et lisez confortablement des textes volumineux. center Aligne le texte au centre. Le texte est placé horizontalement dans la fenêtre du navigateur ou dans le conteneur où se trouve le bloc de texte. Les lignes de texte semblent être enfilées sur un axe invisible qui descend au centre de la page Web. Cette méthode d'alignement est activement utilisée dans les titres et diverses signatures, telles que les légendes, elle donne un aspect officiel et solide à la conception du texte. Dans tous les autres cas, l'alignement central est rarement utilisé car il n'est pas pratique de lire une grande quantité de ce texte. right Aligne le texte à droite. Cette méthode d’alignement agit comme un antagoniste du type précédent. À savoir, les lignes de texte sont alignées sur le bord droit, tandis que le gauche reste « déchiré ». Étant donné que le bord gauche n’est pas aligné, là où les nouvelles lignes sont lues, ce texte est plus difficile à lire que s’il était aligné à gauche. Par conséquent, l’alignement à droite est généralement utilisé pour les titres courts ne dépassant pas trois lignes. Nous ne considérons pas les sites spécifiques où le texte doit être lu de droite à gauche, où une méthode d'alignement similaire serait peut-être utile. Mais où dans notre pays avez-vous vu de tels sites ? justifier Justifié, ce qui signifie aligné à gauche et à droite en même temps. Pour effectuer cette action, le navigateur ajoute dans ce cas des espaces entre les mots.

Valeur par défaut

Exemple. Alignement du texte

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et justo odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Navigateurs : ordinateur de bureau mobile ?

Internet Explorer	Chrome	Opéra	Safari	Firefox
1	1	1	1	1

Android	Firefox Mobile	Opéra Mobile	Safari Mobile
1	1	6	1

✖

Navigateurs

Les notations suivantes sont utilisées dans la table du navigateur.

• - l'élément est entièrement pris en charge par le navigateur ;
• - l'élément n'est pas perçu par le navigateur et est ignoré ;
• - pendant le fonctionnement, diverses erreurs peuvent apparaître, ou l'élément est pris en charge avec des réserves.

Le numéro indique la version du navigateur à partir de laquelle l'élément est pris en charge.

Bonjour, chers lecteurs du site blog. Aujourd'hui, nous continuons à étudier et nous avons ensuite les propriétés text-decoration, vertical-align, text-align, text-indent et un certain nombre d'autres, qui aident à concevoir l'apparence des textes dans le code HTML.

Dans le dernier article, nous avons examiné les propriétés destinées à être configurées apparence polices à .

Eh bien, même plus tôt, nous avons examiné tous les types en détail, appris comment ils peuvent être regroupés et quelles priorités le navigateur définit lors de leur interprétation. Certes, tout cela a été divisé en plusieurs articles, donc pour ne pas vous tromper, je vous conseille d'étudier les matériaux dans l'ordre indiqué.

Décoration de texte, alignement de texte, retrait de texte en CSS

Comment travailler avec du texte en CSS ? Il serait logique de supposer qu’il existe des règles spécialement conçues à cet effet. Commençons par text-align, qui remplace en fait l'attribut align (il était utilisé pour aligner du contenu comme des paragraphes ou des titres P).

Il n’a que quatre significations possibles :

Le sens reste le même qu’avant. Aligner le texte- c'est l'alignement horizontal des lignes. Cette règle s'applique exclusivement aux éléments de bloc (paragraphes, titres, etc.), c'est-à-dire les balises dans lesquelles plusieurs lignes peuvent apparaître. Parce que Étant donné que les éléments en ligne ne peuvent avoir qu'une seule ligne, il n'y a aucun intérêt particulier à y utiliser text-align.

Il est clair que les valeurs de cette règle signifient respectivement l'alignement : gauche, droite, centre et largeur de page (Justifier - simultanément gauche et droite en augmentant la distance entre les mots) . Il va sans dire que la valeur Justify doit être utilisée pour les éléments comportant au moins plusieurs lignes de texte, sinon il n'y aura aucun effet visible.

Par exemple, j'ai justifié le paragraphe précédent (vous pouvez voir qu'il a des bordures lisses à gauche et à droite) en utilisant :

Alignement du texte : justifier ;

Par défaut, l'alignement horizontal du texte est à gauche, c'est-à-dire Il n'est pas nécessaire d'écrire spécifiquement text-align:left, à moins, bien sûr, que vous ayez préalablement spécifié un alignement différent. D'ailleurs, j'ai aligné ce paragraphe au centre (centre), encore une fois pour un exemple visuel, mais ici, je pense, tout est clair.

Règle CSS suivante retrait du texte permet de spécifier une ligne rouge, par exemple, pour le texte d'une balise de paragraphe P. L'indentation de la ligne rouge peut être spécifiée en spécifiant une valeur (soit avec un signe plus, soit avec un signe moins, en utilisant ) ou en utilisant des pourcentages :

À partir de quels pourcentages sont calculés les retraits de texte ? De la largeur de la zone allouée au texte. Ceux. La règle CSS text-indent:50% définira une ligne rouge égale à la moitié de la longueur de cette même ligne. Eh bien, ce paragraphe sert d’exemple d’une telle règle.

Ou vous pouvez, par exemple, définir une valeur négative pour la ligne rouge dans l'indentation du texte et nous obtiendrons alors approximativement ce que vous voyez dans ce paragraphe. Pour arriver à ce résultat, j'ai écrit la règle CSS suivante pour la balise de paragraphe P :

Retrait du texte : -1em ;

Eh bien, une utilisation typique de text-indent (pour définir la ligne rouge standard) pourrait ressembler à ceci : text-indent:40px; (appliqué à ce paragraphe, d'ailleurs). Cette règle, tout comme l'alignement du texte évoqué plus tôt, s'applique uniquement aux éléments de bloc, c'est à dire. où plusieurs lignes peuvent apparaître (paragraphes, titres, etc.).

Bon, passons maintenant à décoration de texte(conception utilisant une ligne horizontale), qui est déjà appliquée à tous les éléments HTML (à la fois en ligne et en bloc).

Il ne peut avoir que quatre significations :

Ceux. peut être utilisé en utilisant la décoration de texte : surligner, passer au trait ou souligner, ou ne rien utiliser du tout (aucun). Certains éléments HTML ont déjà par défaut un design en lignes horizontales (ils sont soulignés par défaut).

Par conséquent, mettre en évidence quelque chose d'autre en soulignant (sauf pour les hyperliens) n'est pas une bonne chose, car les utilisateurs ont écrit dans leur subconscient qu'une fois souligné (et également surligné en couleur), cela signifie qu'ils peuvent cliquer dessus pour y aller. Mais en mettant en évidence du texte ordinaire en soulignant, vous induisez l'utilisateur en erreur et devenez par la suite déçu de votre ressource (il pensait que c'était le cas, mais il s'est avéré que...).

La nuance dans l'utilisation de la règle de décoration de texte CSS est que vous pouvez saisir trois (ou deux) valeurs à la fois pour n'importe quel élément HTML (en n'en omettant aucun) et vous obtiendrez ainsi fragment de texte souligné-souligné-barré(ça a l'air cool, n'est-ce pas ?) :

Décoration de texte :souligné surligner en ligne ;

Les valeurs pour la décoration du texte (si vous souhaitez en utiliser plusieurs à la fois) doivent être écrites à travers un caractère spatial.

Alignement vertical - alignement vertical

Ensuite, nous avons l'alignement vertical - alignement vertical. Pour presque tous les éléments du code HTML, cela signifie aligner les éléments en ligne avec le texte par rapport à leur ligne de base. Certes, cela signifie un peu différent - tout le contenu de ces cellules sera aligné verticalement.

Pour la règle d'alignement vertical CSS, vous pouvez utiliser les valeurs suivantes :

Les lignes sont alignées sur la ligne de base par défaut. Écoute, j'ai postulé augmenter la taille de la police de ce morceau de texte et ces deux fragments sont alignés sur la ligne de base (inférieure). Et l'alignement vertical à l'aide de vertical-align vise précisément à modifier la façon dont les lignes sont alignées.

Par exemple, si j'écris vertical-align:baseline pour le même morceau de texte agrandi, aucun changement ne se produira, car la valeur de base est utilisée par défaut pour cette règle CSS.

À propos, vous pouvez également utiliser des nombres comme valeurs, et l'inscription vertical-align:0 signifiera la même chose que vertical-align:baseline, c'est-à-dire la ligne de base est équivalente à zéro. Par conséquent, si nous voulons indiquer un décalage dans l’alignement vertical, alors ce décalage sera spécifié par rapport à la ligne de base (ou zéro).

Vous pouvez l'écrire comme ceci :

alignement vertical : 10 px ;

Et nous recevrons déplacer le fragment avec une police plus grande vers le haut 10 pixels par rapport à la ligne de base. Si on écrit une valeur négative :

alignement vertical : -10 px ;

Ensuite, nous obtenons déplacer le fragment vers le bas par rapport à la ligne de base. D'après les exemples, il est clair qu'en raison du décalage, la hauteur de la ligne a augmenté de sorte que le texte s'y adapte sans entrer en collision avec la ligne adjacente. Le décalage peut également être spécifié en Em et Ex, et en pourcentage, qui sera calculé à partir de la hauteur de ligne de cet élément (rappelez-vous dans le dernier article nous avons appris comment le définir en utilisant ).

Pour aligner verticalement le contenu des cellules du tableau, l'alignement vertical doit utiliser les valeurs Haut et Bas pour aligner respectivement le contenu en haut et en bas de la cellule (enfin, le milieu dans une cellule du tableau est utilisé comme valeur d'alignement vertical par défaut ).

Et pour les éléments de police, vous pouvez utiliser text-top, text-bottom, middle. Utilisons-le comme exemple ce morceau de texte signification:

alignement vertical : milieu ;

Quel a été le résultat ? La ligne médiane du fragment agrandi est alignée avec la ligne de base du texte normal, c'est-à-dire nous avons obtenu un alignement vertical par rapport à la ligne médiane. Pour le texte en haut et en bas, tout sera pareil. Ceci est text-top , et ceci est text-bottom .

Les valeurs de la propriété Css vertical-align sub et super correspondent aux sous- et super-index qui avaient lieu en HTML pur (avant d'utiliser les propriétés CSS pour la conception visuelle).

Transformation de texte, espacement des lettres, espacement des mots et espaces blancs

Aucun n'est utilisé par défaut et signifie que les caractères du texte ne changeront en aucune façon - comme écrit en HTML, c'est ainsi qu'ils seront affichés. La valeur Uppercase pour text-transform transformera toutes les lettres du fragment en majuscules ( un exemple est montré dans cette phrase, où la règle text-transform:uppercase a été utilisée et les lettres ont été écrites à l'origine en minuscules).

La valeur minuscule de la règle de transformation de texte CSS vous permettra de transformer tous les caractères du fragment en minuscules, et la valeur majuscule mettra toutes les premières lettres du mot en majuscule ( exemple dans cette phrase- transformation de texte : majuscule). Ceux. en utilisant text-transform, vous pouvez faire tout ce que vous voulez avec du texte brut, puis tout renvoyer facilement.

Par conséquent, si, par exemple, vous avez pour tâche d'écrire tous les titres uniquement en majuscules, écrivez-les en HTML comme d'habitude et mettez-les en majuscules en CSS via text-transform:uppercase. Ensuite, si vous décidez de modifier quelque chose, il vous suffit d'apporter une petite modification aux styles, et non au contenu des 100 500 en-têtes de votre site.

Par défaut, l'espacement des lettres et l'espacement des mots sont définis sur Normal, ou cela équivaut à zéro (c'est-à-dire que la distance entre les caractères et les mots ne change en aucune façon). L'ampleur du changement de distance dans ces règles ne peut être spécifiée qu'en pixels, Em ou Ex, mais pas en pourcentage.

Cependant, vous pouvez utiliser à la fois des valeurs positives (rarement de caractères ou de mots) et des valeurs négatives (rapprocher des caractères ou des mots). Par exemple, vous pouvez "Voici comment éclaircir les caractères de cette phrase" en utilisant la règle CSS suivante :

Espacement des lettres : 0,4 em ;

Ou tu peux "Voici comment rapprocher les symboles de cette phrase" en utilisant:

Espacement des lettres : -1 px ;

La même chose peut être dite à propos de l'espacement des mots, à la seule différence que la distance change entre les mots, comme, par exemple, dans cette phrase, en utilisant cette construction CSS:

Espacement des mots : 4 em ;

De même, vous pouvez utiliser des valeurs négatives dans l'espacement des mots pour réduire la distance entre les mots.

Eh bien, la dernière règle CSS d'aujourd'hui, qui vous permet de formater le texte dans le code HTML d'une certaine manière, est-ce espace blanc. Il est responsable de l'affichage des caractères d'espacement sur une page Web qui se sont produits lors de l'écriture du code HTML.

Comme vous vous en souvenez dans l'article sur le sujet, le navigateur, lors de l'analyse du code, combine tous les espaces, sauts de ligne et tabulations en un seul espace, et coupe les lignes de la page Web précisément en fonction des caractères d'espace apparus dans le code.

Ainsi, l’espace blanc peut prendre l’une des trois valeurs suivantes :

Il est clair que la valeur par défaut est Normal et dans ce cas tout s'affiche comme je l'ai décrit juste au dessus. Mais en utilisant la valeur Pre, nous obtenons une analogie complète avec l'utilisation, c'est-à-dire Sur la page Web, le texte sera affiché avec tous ces caractères d'espacement supplémentaires qui étaient présents lors de l'écriture du code, et le navigateur ne pourra plus effectuer de transferts en les utilisant.

Eh bien, quelle est la signification ? maintenant Cela empêchera simplement le navigateur d'envelopper les caractères d'espacement qu'il trouve dans un fragment avec la règle CSS white-space:nowrap. Vous pouvez essayer comment tout cela fonctionne vous-même en créant un simple fichier HTML et en plaçant n'importe quel morceau de texte dans des balises comme celle-ci :

Bonne chance à toi! A bientôt sur les pages du site blog

Vous pourriez être intéressé

Style de liste (type, image, position) - Règles CSS pour personnaliser l'apparence des listes en code Html
Positionnement à l'aide de la règle Z-index et CSS Cursor pour changer le curseur de la souris
Padding, Margin and Border - définissez le remplissage interne et externe en CSS, ainsi que les bordures pour tous les côtés (haut, bas, gauche, droite)
A quoi sert CSS, comment connecter des feuilles de style en cascade à un document HTML et la syntaxe de base de ce langage
Flotter et effacer en CSS - outils de mise en page de blocs
CSS - qu'est-ce que c'est, comment les feuilles de style en cascade se connectent-elles Code HTML en utilisant le style et le lien
Unités de dimension (pixels, Em et Ex) et règles d'héritage en CSS
Sélecteurs de balises, de classes, d'identifiants et universels, ainsi que des sélecteurs d'attributs en CSS moderne
Position (absolue, relative et fixe) - méthodes de positionnement Éléments HTML en CSS (règles gauche, droite, haut et bas)
Arrière-plan en CSS (couleur, position, image, répétition, pièce jointe) - tout pour définir la couleur d'arrière-plan ou l'image d'arrière-plan des éléments HTML