L'index relatif au texte est le déplacement des caractères par rapport à la ligne de base vers le haut ou vers le bas. En fonction de la valeur positive ou négative du décalage, l'indice est appelé respectivement supérieur ou inférieur. Ils sont activement utilisés en mathématiques, en physique, en chimie et pour désigner des unités de mesure. HTML propose deux éléments pour créer un index : ^{(de l'exposant anglais) - exposant et _{(de l'indice anglais) - indice inférieur. Le texte placé dans l'un de ces conteneurs est désigné plus petit que le texte de base et est décalé vers le haut ou vers le bas par rapport à celui-ci. L'exemple 1 montre partageéléments et styles spécifiés pour modifier l’apparence du texte.}}

Exemple 1 : Création d'un exposant et d'un indice

Équation caractéristique d'une surface du deuxième degré

λ ³-JE ₁λ ²+Je ₂λ - Je ₃ = 0

Dans l'exemple, l'indice et l'exposant apparaissent simultanément. Pour modifier le style de police d'index, des styles sont utilisés qui définissent une conception uniforme (Fig. 1).

Riz. 1. Vue des index après application des styles

Vous pouvez arrêter complètement de l'utiliser ^{Et _{en faveur des styles. Un analogue de ces éléments est la propriété vertical-align, qui provoque le déplacement vertical du texte d'une distance spécifiée. Plus précisément, dans l'exemple 2, la valeur est de 0,8em pour l'exposant et de -0,5em pour l'indice. Em est une unité relative égale à la taille de la police actuelle. Par exemple, 0,5em indique que le texte doit être décalé de moitié par rapport à la taille de la police.}}

Exemple 2 : Utilisation de styles pour gérer les index

Polynôme de degré n

f(x) = une 0+ un 1 x + ... + une n-1 x n-1+un n x n

Dans l'exemple, la formule elle-même est affichée en taille agrandie, les symboles en exposant sont définis en rouge et ceux du bas en bleu (Fig. 2).

Bonjour. Parfois, lors de la création de pages Web, il est nécessaire de spécifier certains mots avec en utilisant CSS majuscule ou exposant. Voyons comment cela se fait.

Majuscules et minuscules en utilisant CSS

En général, même aujourd'hui, vous pouvez entourer le texte souhaité dans des balises _{^{et obtenez l'affichage que vous souhaitez, mais voyons également comment cela peut être fait en utilisant CSS car la technique est un peu différente.}}

Par exemple, vous devez écrire la formule H 2 O dans un document HTML. Cela se fait comme ceci :

• La formule elle-même s'écrit
• Les mots et les nombres qui doivent être affichés dans l'index supérieur ou inférieur sont enfermés dans une balise span, à laquelle une classe doit être attribuée. Par exemple: caractères à afficher
• En CSS, vous devez définir cet élément :

  Index supérieur (
  Alignement vertical : super ;
  }

Cette propriété est responsable de l’alignement vertical du texte. Sa valeur super précise que le texte sera affiché en exposant. Mais la taille de la police est restée la même que celle du texte normal. Pour que tout soit plus joli, vous devez également définir la taille de la police un peu plus petite à l'aide de la propriété font-size.

C’est ainsi que fonctionne simplement la propriété. En conséquence, pour afficher en indice, vous devez écrire comme ceci :

Index supérieur (
Alignement vertical : sous ;
}

La différence avec les balises HTML similaires est que ces règles ne modifient pas la taille de la police, donc si vous devez le faire, vous devrez écrire une nouvelle taille dans la feuille de style.

C'est tout ce que vous devez savoir sur l'exposant et l'indice en CSS. Aucun fonctionnalités supplémentaires la propriété ne fournit pas et ils ne sont pas nécessaires. Si vous le souhaitez, vous pouvez disposer ce texte d'une manière particulière, mais cela est rarement nécessaire.

Où cela pourrait être utile

Le texte en exposant et en indice peut être utilisé lors de la rédaction de formules, de l'ajout de notes et de notes aux articles. Par exemple, Wikipédia fournit des sources et des notes pour chaque article. Au fur et à mesure de l'avancement de l'article, ils sont placés sous forme de petits exposants. Cela n'irrite pas les lecteurs et permet en même temps de donner aux articles l'aspect souhaité.

La propriété est entièrement multi-navigateur et prise en charge dans toutes les versions CSS.

Balises HTML _{Et ^{- Texte en indice et en exposant}}

Définition et utilisation

Étiqueter _{définit le texte interlinéaire. Le texte sous-linéaire fait la moitié de la hauteur et apparaît en dessous de la ligne de base. Le texte interlinéaire peut être utilisé lors de l'écriture de formules chimiques, telles que H 2 O.}

Étiqueter ^{définit le texte en exposant. Le texte en exposant fait la moitié de la hauteur et apparaît au-dessus de la ligne de base. Le texte en exposant peut être utilisé lors de la rédaction de notes de bas de page, telles que WWW.}

Prise en charge du navigateur

Balises _{Et ^{pris en charge par tous les principaux navigateurs.}}

Différences entre HTML et XHTML

Attributs standards

Colonne DTD spécifie dans quel type de document l'attribut DTD HTML 4.01/XHTML 1.0 est autorisé. S=Strict, T=Transitional et F=Frameset.

Balises _{Et ^{prend en charge les attributs standard suivants :}}

Plus d'informations sur les attributs standard.

Attributs d'événement

Balises _{Et ^{prend en charge les attributs d'événement suivants :}}

Plus d'informations sur

Depuis plusieurs leçons, nous sommes devenus plus sophistiqués dans le formatage du texte à l'aide de CSS, et cette fois nous apprenons à modifier la casse du texte. À cet égard, les feuilles de style en cascade nous ouvrent de très larges possibilités, et pour être plus précis, nous pouvons :

• Afficher tout le texte en majuscules ;
• Sélectionnez tout le texte en lettres minuscules ;
• Assurez-vous que la première lettre de chaque mot commence par une majuscule.

« Tout cela est bien sûr, mais quand cela sera-t-il nécessaire ? - demandez-vous. Imaginons une situation dans laquelle vous devez afficher tous les éléments de menu en majuscules. Pour ce faire, il n'est pas nécessaire de les saisir, notamment avec la touche CapsLock, ou en maintenant enfoncé le bouton Shift. Il suffira de définir tous les éléments de la liste à afficher en majuscules en créant une règle correspondante dans le fichier CSS. Et ce n’est là qu’une des nombreuses situations possibles.

propriété de transformation de texte

Nous contrôlerons la casse du texte en utilisant la propriété text-transform. Il a 4 valeurs principales - majuscules (lettres majuscules), minuscules (lettres minuscules), majuscules (majuscules pour chaque première lettre du mot, les autres valeurs ne changent pas), aucune (le formatage n'est pas appliqué) . À première vue, tout cela peut vous paraître très compliqué.

Mais en pratique, tout est assez simple, comme vous allez le voir maintenant. L'essentiel est de choisir le bon sélecteur, car les valeurs de la propriété text-transform sont héritées.

Capitaliser

Tout d'abord, je suggère de mettre tout le texte en majuscules, pour lequel nous créons la règle CSS suivante :

Corps ( transformation de texte : majuscule ; )

En principe, rien de compliqué, nous avons juste utilisé la valeur majuscule. Comme on dit, tout est intuitif. Voilà à quoi cela ressemble dans la vraie vie :

Minuscules - s'appliquent à tous

L'étape suivante consiste à appliquer des lettres minuscules partout en écrivant ce qui suit :

Corps ( transformation de texte : minuscule ; )

Comme vous l’avez probablement déjà deviné, les deux significations que nous venons de rencontrer sont en quelque sorte des antonymes. Et dans l'illustration ci-dessous, vous pouvez voir le résultat de la propriété nouvellement créée.

Mettez en majuscule la première lettre de chaque mot

Pour cela, il suffit d'utiliser la valeur correspondante :

Corps ( transformation de texte : majuscule ; )

Je ne sais pas à quelle fréquence vous utiliserez une telle règle CSS, mais cela ne vous fera pas de mal de connaître une telle possibilité, surtout lors de la résolution de problèmes non triviaux. Le résultat est visible dans l'image ci-dessous.

Enfin, jetons un coup d'œil rapide à la dernière valeur : aucune. Comme je l'ai déjà dit, il peut être utilisé pour annuler l'héritage d'un parent. Par exemple, imaginons que nous ayons toutes les règles précédentes en vigueur, et que pour les paragraphes nous devions les annuler, pour cela nous écrivons ce qui suit :

P (transformation de texte : aucune ; )

J'ose supposer que tout est clair pour vous, sinon posez vos questions dans les commentaires. Et c'est tout pour moi. J'espère que ce tutoriel CSS vous a été utile. Le cas échéant:

• Republiez cet article sur réseaux sociaux pour que davantage de personnes en profitent ;
• Abonnez-vous à ma newsletter pour ne pas manquer les articles de blog utiles et intéressants.

C’est là que je ne te dis pas au revoir. Merci de votre attention et à bientôt dans les prochaines publications !