Espacement entre les lettres. Espacement des lettres CSS. Intercaractère, interligne CSS. Espacement des mots
Lorsque vous travaillez avec un style de texte, vous pouvez définir l'espacement nécessaire entre les caractères, les mots et les lignes. Ces distances sont définies dans n'importe quelle unité CSS, que ce soit px, pt, em ou autres. Une exception concerne les pourcentages - ils peuvent être utilisés pour définir la distance entre les lignes (interligne), mais ils ne fonctionnent pas lors de la définition de l'espacement entre les caractères ou les mots.
Espacement des caractères CSS : espacement des lettres
Vous pouvez définir l'espacement des caractères à l'aide de la propriété CSS letter-spacing. En plus des valeurs habituelles (positives et négatives), vous pouvez également utiliser les valeurs Inherit (pour hériter de la valeur du parent) et Normal (si vous souhaitez renvoyer un espacement normal entre les caractères).
Un exemple d'écriture d'un intervalle intercaractère :
P (espacement des lettres : 2em ; )
Espacement entre les mots : espacement des mots
La propriété CSS word-spacing diffère de la précédente en ce sens qu'elle définit la distance entre les mots et non entre les caractères. Cette propriété a également des valeurs normales et héritées. Vous pouvez spécifier des valeurs négatives. Vous trouverez ci-dessous un exemple d'entrée de style :
P (espacement des mots : 6 px ; )
Espacement des lignes : hauteur de ligne
À l'aide de la propriété CSS line-height, vous pouvez définir la distance entre les lignes de texte. Comme cela a été dit au début du sujet, pour définir l'interligne, en plus d'autres unités de mesure, vous pouvez utiliser des pourcentages. Il est également possible d'écrire la valeur sous forme de multiplicateur (chiffres supérieurs à 0) : pour calculer la distance, le navigateur multipliera la taille de la police par le nombre donné. Les valeurs négatives ne fonctionnent pas. Les valeurs disponibles sont normales et héritent de .
Vous trouverez ci-dessous un exemple de la manière d'effectuer l'espacement des lignes CSS :
P (hauteur de ligne : 180 % ; )
Dans la capture d'écran, vous pouvez voir à quoi ressemble le texte avec les trois propriétés :
Capture d'écran : Espacement en CSS
Résultats
Lorsque vous définissez l'espacement entre les mots, les caractères ou les lignes, assurez-vous tout d'abord que le texte obtenu est facile à lire. De telles propriétés doivent être manipulées avec soin et toujours utilisées avec modération, sans fanatisme, sinon tout le contenu du texte menace de se transformer en un ensemble de lettres illisibles.
Finalement, je m’y suis mis et il est temps de comprendre la palette « Symbole » dans Photoshop.
Jusqu’à aujourd’hui, je n’en savais rien. Bien sûr, je connaissais des champs tels que « Police », « Taille de la police », « Couleur de la police », « Espacement des lignes ». Mais ensuite j'ai rencontré un champ inconnu pour moi dans l'une des mises en page PSD.
Vraisemblablement, cela était censé signifier la distance entre les lettres de la ligne. La même chose dont la règle est responsable en CSS
. On aurait pu deviner que le signe moins signifie « compresser » les mots dans la ligne. Mais quel type d’unités de mesure Photoshop utilise-t-il dans ce cas ? Comment traduire cette valeur en CSS ? Dans quelles unités - pixels ou em ?Je n'ai pas trouvé de réponses à ces questions sur la partie Internet en langue russe. Je ne discute pas, peut-être que je n’avais pas l’air bien. Mais je les ai trouvés dans la partie anglophone. Je présente un récit gratuit d’un article remarquable consacré à cette question dans cette courte revue.
Voici donc une maquette psd avec une valeur mystère appliquée aux polices
et et - taille de police, , pour le second - . Cela ne doit pas être confondu avec une règle très similaire : la distance entre les lettres.Revenons à nos moutons. On voit que le champ contient la valeur
| 1 | -25 |
Dans la quatrième ligne, il y a deux champs dont le but dans l'original est écrit comme suit : « Outil scalaire vertical » et « Outil scalaire horizontal ». Vous pouvez deviner qu'en utilisant ces paramètres, vous pouvez redimensionner (étirer ou réduire) les lettres verticalement et horizontalement.
Dans la dernière (cinquième) ligne se trouve un champ pour modifier la distance des index et un champ pour la couleur de la police (lettres).
C'est essentiellement toute la description. Bref, mais pourquoi traîner ? J'ai trouvé une description complète avec des images, utiles pour moi, dans cet article.
Permettez-moi de passer à la question qui reste ouverte : comment convertir la valeur
ou Photoshop dans Photoshop en pixels| 1 | px |
| 1 | X |
| 1 | espacement des lettres |
| 1 | Oui |
Dans ce cas particulier, la formule et le résultat seront les suivants :
25 * 22 / 1000 = -0,55px
Là-dessus, je pense que tout est dit.
Utilisation des propriétés CSS couleur Vous pouvez modifier la couleur du texte des éléments HTML.
La couleur peut être définie des manières suivantes :
- En utilisant le nom de la couleur (par exemple, « rouge » définira la couleur rouge) ;
- Utiliser des valeurs RVB (par exemple, "rgb(255,255,255)" définira la couleur sur blanc) ;
- Utiliser une valeur hexadécimale (par exemple "#00ff00" définira la couleur sur vert).
Explications :
La première méthode est principalement utilisée pour spécifier des couleurs primaires dont les noms sont bien connus. Par exemple, le rouge déterminera le rouge, le bleu - le bleu, le blanc - le blanc.
La deuxième méthode peut être utilisée pour définir n'importe quelle couleur et nuance.
Syntaxe:
RVB ( rouge,vert,bleu)
rouge un nombre de 0 à 255 indiquant la quantité de rouge qu'il y aura dans la teinte finale.
vert un nombre de 0 à 255 indiquant la quantité de vert dans la teinte finale.
bleu un nombre de 0 à 255 indiquant la quantité de bleu qu'il y aura dans la teinte finale.
Par exemple RVB (255,0,0) définira la couleur rouge, et RVB (0,255,0) RVB (255 255,0) nous obtenons du jaune.
La troisième méthode est fonctionnellement équivalente à la seconde, mais plus compacte. En pratique, cette méthode est principalement utilisée.
Syntaxe:
#rougevertbleu
rouge un nombre hexadécimal de 0 à ff indiquant la quantité de rouge qu'il y aura dans la teinte finale.
vert un nombre hexadécimal de 0 à ff indiquant la quantité de vert dans la teinte finale.
bleu un nombre hexadécimal de 0 à ff indiquant la quantité de bleu qu'il y aura dans la teinte finale.
Par exemple #ff0000 définira la couleur rouge, et #00ff00 vert. Mélanger le rouge avec le vert #ffff00 nous obtenons du jaune.
Essayons maintenant de recolorer les paragraphes en vert en utilisant toutes les méthodes listées ci-dessus :
P (couleur : vert ;) p (couleur : rgb (0,255,0) ;) p (couleur : #00ff00 ;)
Veuillez noter: Vous pouvez facilement sélectionner les nuances de couleur requises à l’aide de .
Alignement du texte
Utilisation des propriétés CSS aligner le texte Vous pouvez aligner le texte d'un élément horizontalement.
Le texte peut être aligné :
- Centré (valeur centrale) ;
- Bord gauche (gauche);
- Le long du bord droit (à droite) ;
- En largeur (justifier).
Veuillez noter: Justifiez que le texte est aligné en étirant toutes les lignes à la même longueur. Cette méthode d'alignement est souvent utilisée dans les journaux et les magazines.
P.ta1 (texte-aligner:centre;) p.ta2 (texte-aligner:gauche;) p.ta3 (texte-aligner:droite;) p.ta4 (texte-aligner:justifier;)
Aperçu rapide
propriété de décoration de texte
Utilisation des propriétés CSS décoration de texte Vous pouvez créer du texte pour l'élément HTML :
- Souligné (valeur soulignée)
- Passage en ligne
- Afficher une ligne au-dessus du texte de l'élément (surligne)
P.td1 (décoration de texte :souligné ;) p.td2 (décoration de texte :traversé ;) p.td3 (décoration de texte :surligné ;)
Aperçu rapide
La propriété text-decoration avec une valeur de none « efface » le texte de tous les effets ci-dessus. Cela peut être utilisé pour créer des liens non soulignés.
A:lien (texte-décoration:aucun;) a:visité (texte-décoration:aucun;)
Aperçu rapide
Veuillez noter: Il n'est pas recommandé de souligner le texte brut, car les utilisateurs pourraient le confondre avec un lien.
Espace entre les mots et les lettres dans le texte
Utilisation des propriétés CSS espacement des lettres Vous pouvez augmenter ou diminuer l'espace entre les lettres dans le texte des éléments HTML.
P.ls1 (espacement des lettres : 10 px ;)
Aperçu rapide
Utiliser la propriété espacement des mots Vous pouvez augmenter ou diminuer l'espace entre les mots dans le texte des éléments HTML.
P.ws1 (espacement des mots : 15 px ;)
Aperçu rapide
Autres propriétés de style de texte CSS
Pour afficher des informations détaillées sur la propriété CSS souhaitée, cliquez sur son nom.
Faites-le vous-même
Veuillez noter: pour accomplir cette tâche, vous devrez visiter car toutes les propriétés de conception de texte n'ont pas été abordées dans ce chapitre.
Tâche 1 disposer les éléments selon leur description :
1. Dans ce paragraphe, l'indentation entre les lettres est de 17 px et l'indentation entre les mots est de 5 px. Ce paragraphe est orange. 2. Le texte de cet élément est souligné, l'espace entre les lettres est de 15 pixels. Ce paragraphe est gris. 3. Le texte de cet élément est centré, l'espace entre les mots est de 10 pixels. Cet élément est de couleur #ff3366. 4. Le texte de cet élément est aligné à droite, l'indentation entre les lettres est de 6 pixels. Le texte est écrit en petites lettres rouges. 5. Le texte de cet élément est centré, souligné et l'indentation entre les lettres est de 7 pixels. Le texte est écrit en grosses lettres vertes.
Veuillez activer JavaScript pour utiliser le système de commentaires Disqus.
Gestion des espaces entre les lettres et les mots
1. Distance entre les mots espacement des mots
Définit l'espacement entre les mots. Des valeurs positives et négatives peuvent être utilisées. Avec un sens négatif, les mots peuvent se chevaucher.
La valeur de l'espacement des mots est affectée par la valeur de la propriété text-align dans le cas d'un texte justifié. Hérité.
Syntaxe
P (espacement des mots : normal ;) p (espacement des mots : 2 px ;) 
Riz. 1. Espacement entre les mots
2. Espacement des lettres
La propriété définit la distance entre les lettres (montant de suivi) et les symboles. Peut prendre des valeurs positives et négatives. Il est conseillé de l'utiliser pour augmenter l'expressivité et la lisibilité des titres, définitions, etc. Hérité.
Syntaxe
P (espacement des lettres : normal ;) p (espacement des lettres : 2 px ;) 
Riz. 2. Modification de la distance entre les lettres à l'aide de la propriété d'espacement des lettres
3. Gestion des espaces blancs
La propriété gère les espaces entre les mots et les sauts de ligne au sein d'un élément. Pas hérité.
| espace blanc | |
|---|---|
| Valeurs: | |
| normale | Valeur par défaut. Un seul espace est inséré entre les mots ; les espaces supplémentaires sont supprimés. Le texte n'est renvoyé à la ligne que lorsque cela est nécessaire. |
| maintenant | Interdit les sauts de ligne, sauf lorsqu'ils sont utilisés . |
| pré | Les espaces dans le texte ne sont pas ignorés ; le navigateur affiche des espaces et des sauts de ligne supplémentaires. |
| pré-emballage | Préserve les espaces dans le texte en ajoutant des sauts de ligne si nécessaire. |
| pré-ligne | Supprime les espaces supplémentaires, sauf si . |
| initial | Définit la valeur de la propriété sur la valeur par défaut. |
| hériter | Hérite de la valeur de propriété de l'élément parent. |
Syntaxe
P (espace blanc : normal ;) p (espace blanc : nowrap ;) p (espace blanc : pré;) p (espace blanc : pré-enveloppement ;) p (espace blanc : pré-ligne ;)
4. Définition de la taille de l'onglet
Pour modifier la quantité d'indentation obtenue à l'aide de la touche TAB, utilisez la propriété tab-size. Les valeurs de propriété sont ignorées lorsque la propriété white-space est définie sur l'une des trois valeurs pre-line , normal ou nowrap .
Fonctionne uniquement pour les éléments