Comment définir l'espacement des caractères en HTML ? Résumé de l'alignement du texte sur les paramètres de style CSS-tutoriel CSS-php.cn

Comment définir l'espacement des caractères en HTML ? Résumé de l'alignement du texte sur les paramètres de style CSS

寻∝梦

Libérer： 2018-09-05 13:55:39

original

16766 Les gens l'ont consulté

L'espacement des caractères HTML que nous utilisons souvent est toujours difficile à définir, et l'alignement du texte HTML ne peut pas être défini. Cet article est maintenant là pour vous aider. Voici l'ajustement de l'espacement des caractères HTML. , et les paramètres d'alignement du texte. Jetons maintenant un coup d'œil à cet article

Tout d'abord, voyons comment définir l'espacement des caractères en HTML :

Comprenons d'abord à quoi ressemble normalement le texte que nous affichons :

Comment définir lespacement des caractères en HTML ? Résumé de lalignement du texte sur les paramètres de style CSS

Il s'agit d'un texte normal. La première chose que nous devons comprendre dans cet article est le HTML Le paramétrage des caractères. espacement, nous ne pouvons donc certainement pas concevoir en fonction d'un tel texte. Modifions l'espacement des caractères dans l'image ci-dessus : (Il s'agit d'un code complet, y compris le style CSS)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.you_1{letter-spacing:10px}
</style>
</head>
<body>
<p class="you_1">这是一个PHP中文网，这是一个用文本段落标签标记的一个段落，这里是PHP中文网；这是一个PHP中文网，这是一个用文本段落标签标记的一个段落，这里是PHP中文网；</p>
</body>
</html>

Copier après la connexion

L'effet de ceci est évident. Nous définissons l'application de la classe de style CSS dans l'en-tête : letter-spacing:10px : Cela signifie définir l'espacement des caractères à dix pixels. Jetons un coup d'œil à l'effet affiché dans le navigateur

<🎜. > Comment définir lespacement des caractères en HTML ? Résumé de lalignement du texte sur les paramètres de style CSS

Vous pouvez clairement voir que l'espacement des caractères est devenu beaucoup plus grand. Bien sûr, c'est l'effet de la suppression d'un grand nombre de caractères dans l'image ci-dessus. C'est pour que ce soit plus clair. voyez ce contenu très clairement ici Lorsque vous sentez que l'espace est trop grand, vous pouvez également modifier la valeur du pixel dans le style CSS pour qu'elle atteigne le point de pixel souhaité. (Pour en savoir plus, veuillez consulter la colonne

Tutoriel vidéo CSS du site PHP chinois)

Après avoir défini l'espacement des caractères, parlons de l'alignement du texte du HTML :

text-align : aligner le texte dans l'élément (centre ; gauche : gauche : droite : droite)
direction : définir la direction du texte (La valeur par défaut est ltr, de gauche à droite, rtl est de droite à gauche.)
text-transform : contrôle les lettres dans l'élément majuscule, supercase : tout en majuscules en anglais ; en minuscules : tout en minuscules en anglais

Les trois attributs ci-dessus sont les trois attributs de style CSS de base que nous devons maîtriser. Jetons d'abord un coup d'œil aux paramètres de direction du texte :

Voici un exemple de direction du texte :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.you_1{direction:rtl}
</style>
</head>
<body>
<p>这是一个PHP中文网，这是一个用文本段落标签标记的一个段落，我们这是左对齐</p>
<p class="you_1">这是一个PHP中文网，这是一个用文本段落标签标记的一个段落，我们这是右对齐</p>
</body>
</html>

Copier après la connexion

ajouté à l'intérieur de A petite catégorie, afin que les étiquettes portant le nom de cette catégorie soient toutes alignées à droite. Jetons un coup d'œil à l'effet dans le navigateur :

Comment définir lespacement des caractères en HTML ? Résumé de lalignement du texte sur les paramètres de style CSS

Dans des circonstances normales, le texte est aligné à gauche. De cette façon, nous pouvons définir le bon alignement du texte. .

Que devons-nous faire lorsque nous voulons centrer le texte ? C'est vrai, c'est le premier attribut des trois attributs ci-dessus, un style CSS ou un texte comme celui-ci. Configurons le code, copions le code ci-dessus et examinons le code :

<title>PHP中文网</title>
<style>
.you_1{text-align:center}
.you_2{text-align:right}
</style>
</head>
<body>
<p class="you_1">这是一个PHP中文网，这是一个用文本段落标签标记的一个段落，这里是PHP中文网；</p>
<p class="you_2">这是一个PHP中文网，这是一个用文本段落标签标记的一个段落，这里是PHP中文网；</p>
</body>

Copier après la connexion

Dans le style CSS, j'ai défini deux valeurs de style Pour votre commodité, jetons un coup d'œil à l'effet :

Comment définir lespacement des caractères en HTML ? Résumé de lalignement du texte sur les paramètres de style CSS

L'effet devrait être évident, n'est-ce pas ? Personne ne peut voir clairement l'effet. Le texte supérieur est centré au milieu et le texte inférieur est à gauche. Cela dit, tout le monde devrait comprendre l'application de ces attributs. N'oubliez pas de pratiquer plusieurs fois. Il existe un autre attribut qui a le même usage que ci-dessus. Je n'entrerai pas dans les détails. L'introduction est également très détaillée et toutes les valeurs d'attribut sont répertoriées.

Cet article sur la définition de l'espacement des caractères et de l'alignement du texte HTML en HTML est presque terminé. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

[Recommandation de l'éditeur]

Quels sont les attributs de la balise d'entrée html ? Récapitulatif de l'utilisation de la balise input (avec exemples)

Comment paramétrer le champ de recherche html ? Exemples d'utilisation de la balise de saisie du champ de recherche HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!