Caractère html en exposant. Html est la façon de mettre du texte en majuscule CSS. Balises HTML et - Texte en indice et en exposant

Dans le dernier didacticiel vidéo, nous avons appris à supprimer et à ajouter de nouvelles informations à nouvelle version Document HTML, tout en signalant ceci moteurs de recherche et mettre en évidence visuellement afin que les visiteurs puissent également voir les changements. Pour cela, nous avons utilisé les balises del et ins.

Dans ce didacticiel vidéo, nous poursuivons le sujet de la mise en forme du texte dans un document HTML. Nous allons nous familiariser avec deux balises HTML qui indiquent l'exposant et l'indice du texte.

La balise HTML sup est l'exposant du texte en HTML.

Balise HTML ^{sert à spécifier l'exposant du texte en HTML. Dans certaines rubriques de sites, cette balise sera tout simplement indispensable. Par exemple, si vous avez, ou prévoyez, un site lié à des formules, mathématiques ou chimiques. Ou, s'il y a un chantier de construction, alors la balise sera très utile et aidera à la conception d'articles, lors de la rédaction de formules ou de quantités, par exemple des mètres carrés dans des sujets de construction.}

Mais si votre site n'appartient pas aux rubriques répertoriées, cela ne signifie pas que la balise ^{ne sera pas utile. Il suffit de faire preuve d'imagination et d'ingéniosité et de trouver une utilité à cet élément.}

La balise HTML sub est l'indice du texte en HTML.

Concernant la balise HTML _{, alors c'est l'opposé de la balise ^{, et est chargé de spécifier l'indice du texte. Le texte en indice peut être utilisé lors de l'écriture de formules ou d'équations mathématiques. Mais en plus de cela, vous pouvez peut-être trouver une autre utilisation pour la balise. .}}

La prochaine leçon vidéo est consacrée à deux autres balises, qui dans certaines situations peuvent être tout simplement irremplaçables. De plus, ils sont capables non seulement de mettre en forme le texte, par exemple dans un article, mais aussi de préciser diverses informations sur le site lors de la mise en page. L'une des balises est enveloppée de HTML et la seconde dessine une ligne horizontale.

L'index par rapport au texte est le décalage des caractères par rapport à la ligne de base vers le haut ou vers le bas. Selon la valeur positive ou négative du décalage, l'indice est appelé respectivement indice 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'anglais en exposant) - exposant et _{(de l'indice anglais) - indice. Le texte placé dans l'un de ces conteneurs est indiqué par une taille plus petite que le texte de base et est déplacé vers le haut ou vers le bas par rapport à celui-ci. L'exemple 1 montre comment ces éléments et styles sont combinés pour modifier l'apparence du texte.}}

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

Équation caractéristique de la surface du second degré

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

Dans l'exemple, l'indice et l'exposant apparaissent en même temps. Pour changer le style de police de l'index, des styles sont appliqués qui définissent un seul dessin (Fig. 1).

Riz. 1. L'apparence des index après l'application des styles

Vous pouvez refuser d'utiliser ^{et _{au profit des styles. Un analogue de ces éléments est la propriété vertical-align , qui fait déplacer le texte verticalement d'une distance donnée. En particulier, l'exemple 2 utilise 0,8 em pour l'index supérieur et -0,5 em pour l'index inférieur comme valeur. Em est une unité relative égale à la taille de la police courante. Par exemple, 0.5em signifie que le texte doit être décalé de la moitié de 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 + ... + un n-1 X n-1+ un n X n

Dans l'exemple, la formule elle-même est affichée dans une taille agrandie, les caractères en exposant sont définis en rouge et les caractères inférieurs sont en bleu (Fig. 2).

Depuis plusieurs leçons, nous sommes devenus vraiment créatifs avec le formatage du texte avec CSS, et cette fois, nous apprenons à changer la casse du texte. A 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 majuscules;
• Sélectionnez tout le texte en minuscules ;
• Faites en sorte que la première lettre de chaque mot commence par une majuscule.

"C'est bien beau, mais quand cela pourrait-il être nécessaire?" - tu demandes. Imaginez une situation où vous souhaitez afficher tous les éléments de menu en majuscules. Pour ce faire, il n'est pas nécessaire de les taper, y compris la touche CapsLock, ou en maintenant la touche Maj enfoncée. Il suffira de paramétrer tous les éléments de la liste pour qu'ils s'affichent en majuscules en créant la règle appropriée dans le fichier CSS. Et ce n'est 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 - majuscule (lettres majuscules), minuscule (lettres minuscules), majuscule (majuscule pour chaque première lettre du mot, le reste des valeurs ne change pas), aucune (aucune mise en forme n'est appliquée ). A première vue, tout cela peut vous sembler 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.

Surligner en majuscules

La première chose que je suggère est 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. Voici à quoi ça ressemble dans la vraie vie :

Minuscule - s'applique à tous

À l'étape suivante, appliquons des lettres minuscules partout, pour lesquelles nous écrivons ce qui suit :

Corps ( transformation de texte : minuscule ; )

Comme vous l'avez peut-être deviné, les deux sens que nous venons de rencontrer sont, dans une certaine mesure, des antonymes. Et dans l'illustration ci-dessous, vous pouvez voir le résultat de la propriété nouvellement créée.

Mettez en surbrillance la première lettre de chaque mot en majuscule

Pour ce faire, il nous suffit d'utiliser la valeur appropriée :

Corps ( text-transform: 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é, en particulier lors de la résolution de tâches non triviales. Le résultat est visible sur l'image ci-dessous.

Et enfin, attardons-nous brièvement sur la dernière valeur - aucune. Comme je l'ai déjà dit, il peut être utilisé pour supprimer l'héritage du parent. Par exemple, imaginons que nous ayons toutes les règles précédentes, et pour les paragraphes nous devrions 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 ce que j'ai. J'espère que ce tutoriel CSS vous a été utile. Si c'est vrai:

• Republier cet article sur réseaux sociaux afin que davantage de personnes puissent en bénéficier ;
• Abonnez-vous à ma newsletter pour ne pas manquer des articles de blog utiles et intéressants.

Sur ce je ne vous dis pas au revoir. Merci de votre attention et à bientôt dans les prochains articles !

Conversion d'une lettre minuscule en minuscule et première majuscule à l'aide de CSS (8)

Il n'y a pas d'option de clause cap dans CSS. D'autres réponses suggérant text-transform: capitalize sont fausses car ce paramètre utilise chaque mot pour chaque mot .

Ici Impoli façon de le faire si vous voulez la première lettre de chaque élément était en majuscule, mais c'est certainement loin des limites réelles :

P ( text-transform : minuscule ; ) p:first-letter ( text-transform : majuscule ; )

C'EST UN EXEMPLE DE PHRASE.

C'EST UN AUTRE EXEMPLE DE PHRASE. ET CECI EN EST UN AUTRE, MAIS IL SERA ENTIEREMENT EN MINUSCULES.

Comment convertir la lettre MAJUSCULE en minuscule et la première lettre majuscule pour chaque phrase comme ci-dessous uniquement avec en utilisant CSS?

À partir de: CECI EST UN EXEMPLE D'APPLICATION.

Pour: Ceci est une suggestion d'exemple.

Mettre à jour: quand j'utilise text-transform: capize; Le résultat est toujours le même.

Vous ne pouvez pas le faire uniquement avec CSS. Il existe un attribut text-transform , mais il n'accepte que none , capitalize uppercase , uppercase , lowercase et inherit .

Vous voudrez peut-être vous pencher sur une solution JS ou une solution côté serveur.

Si vous pouvez mettre tous les caractères en minuscules sur le serveur, vous pouvez appliquer :

Transformation de texte : capitaliser

Je ne pense pas que la conversion de texte fonctionnera avec des lettres majuscules en entrée.

Si vous souhaitez utiliser pour ça ne marchera pas pour ou zone de texte, vous devez utiliser Javascript

qui devrait bien fonctionner pour ou alors </p> <td colspan="2" width="567" height="368" bgcolor="#FFFFFF"> <h1>Balises HTML <sub>et <sup>- Texte en indice et en exposant</h1> <h2>Définition et utilisation</h2><p>Étiqueter <sub>définit le texte en indice. Le texte en indice fait la moitié de la hauteur et apparaît sous la ligne de base. Le texte en indice peut être utilisé lors de l'écriture de formules chimiques, telles que H 2 O.</p> <p>Étiqueter <sup>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 .</p> <h2>Prise en charge du navigateur</h2> <p>Mots clés <sub>et <sup>pris en charge par tous les principaux navigateurs.</p> <h2>Différences entre HTML et XHTML</h2> <h2>Attributs standards</h2> <p>Colonne <b>DTD</b> 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.</p> <p>Mots clés <sub>et <sup>prennent en charge les attributs standard suivants :</p> <table class="reference" cellspacing="0" cellpadding="0" border="1" width="100%" id="table3"><tr><th align="left" width="19%">Attribut</th> <th align="left" width="19%">Sens</th> <th align="left" width="57%">La description</th> <th align="left" width="5%">DTD</th> </tr><tr><td>classer</td> <td><i>nom du cours</i> </td> <td>Spécifie le nom de classe d'un élément</td> <td>STF</td> </tr><tr><td>directeur</td> <td>RTL <br>litre</td> <td>Spécifie la direction du texte pour le contenu d'un élément</td> <td>STF</td> </tr><tr><td>identifiant</td> <td><i>identifiant</i> </td> <td>Spécifie un identifiant unique pour un élément</td> <td>STF</td> </tr><tr><td>Langue</td> <td><i>code_langue</i> </td> <td>Spécifie le code de langue pour le contenu de l'élément</td> <td>STF</td> </tr><tr><td>style</td> <td><i>style_definition</i> </td> <td>Spécifie un style en ligne pour un élément</td> <td>STF</td> </tr><tr><td>Titre</td> <td><i>texte</i> </td> <td>Spécifie des informations supplémentaires sur un élément</td> <td>STF</td> </tr><tr><td>xml:lang</td> <td><i>code_langue</i> </td> <td>Spécifie le code de langue pour le contenu d'un élément dans les documents XHTML</td> <td>STF</td> </tr></table><p>Plus d'informations sur les attributs standard.</p> <h2>Attributs d'événement</h2> <p>Mots clés <sub>et <sup>prennent en charge les attributs d'événement suivants :</p> <table class="reference" cellspacing="0" cellpadding="0" border="1" width="100%" id="table4"><tr><th align="left" width="19%">Attribut</th> <th align="left" width="19%">Sens</th> <th align="left" width="57%">La description</th> <th align="left" width="5%">DTD</th> </tr><tr><td>sur clic</td> <td><i>scénario</i> </td> <td>Script à exécuter au clic de la souris</td> <td>STF</td> </tr><tr><td>ondblclick</td> <td><i>scénario</i> </td> <td>Script à exécuter en double-clic</td> <td>STF</td> </tr><tr><td>onmousedown</td> <td><i>scénario</i> </td> <td>Script à exécuter au clic de la souris</td> <td>STF</td> </tr><tr><td>onmousemove</td> <td><i>scénario</i> </td> <td>Script à exécuter lorsque la souris bouge</td> <td>STF</td> </tr><tr><td>onmouseout</td> <td><i>scénario</i> </td> <td>Script à exécuter lorsque le pointeur de la souris quitte l'élément</td> <td>STF</td> </tr><tr><td>surmouseover</td> <td><i>scénario</i> </td> <td>Script à exécuter lorsque la souris passe sur un élément</td> <td>STF</td> </tr><tr><td>onmouseup</td> <td><i>scénario</i> </td> <td>Script à exécuter lorsque le bouton de la souris est relâché</td> <td>STF</td> </tr><tr><td>onkeydown</td> <td><i>scénario</i> </td> <td>Script à exécuter sur pression de touche</td> <td>STF</td> </tr><tr><td>onkeypress</td> <td><i>scénario</i> </td> <td>Script à exécuter lorsqu'une touche est enfoncée puis relâchée</td> <td>STF</td> </tr><tr><td>à la clé</td> <td><i>scénario</i> </td> <td>Script à exécuter lorsque la clé est relâchée</td> <td>STF</td> </tr></table><p>Informations supplémentaires sur</p></td> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> <div class="socialShare"> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,gplus" data-yashareTheme="counter"></div> </div> <div class="ads336"> </div> <div class="clear"></div> </section> <aside> <div class="rside newRelated"> <div class="related node mt25"> <div class="related"><a href='https://wisemotors.ru/fr/facts--how-is-android/samodelnyi-power-bank-iz-akkumulyatora-noutbuka-poverbank-iz-staryh/'><img alt='Banque d'alimentation à partir de vieilles batteries d'ordinateurs portables' src='/uploads/567b2f2068221b8c0d5f19645c9b3b1b.jpg' loading=lazy loading=lazy><span>Banque d'alimentation à partir de vieilles batteries d'ordinateurs portables</span></a></div> <div class="related"><a href='https://wisemotors.ru/fr/how-does-it-work--nfc-chip/master-klass-chehol-knizhka-na-planshet-master-klass-chehol-knizhka-na/'><img alt='Cours de maître"чехол-книжка на планшет" Как пошить чехол для планшета из джинсов' src='/uploads/0a4bff3754782b6973ae6bf44a8e97ca.jpg' loading=lazy loading=lazy><span>Master class "case-book on a tablet" Comment coudre un étui pour une tablette en jeans</span></a></div> <div class="related"><a href='https://wisemotors.ru/fr/tv/metodiki-vosstanovleniya-kineskopov-tipovye-neispravnosti-kineskopov/'><img alt='Dysfonctionnements typiques des kinéscopes de téléviseurs et la procédure pour leur élimination Fiche technique du kinéscope' src='/uploads/af498f47aed8aceab5b1836b2b06c269.jpg' loading=lazy loading=lazy><span>Dysfonctionnements typiques des kinéscopes de téléviseurs et la procédure pour leur élimination Fiche technique du kinéscope</span></a></div> <div class="related"><a href='https://wisemotors.ru/fr/entertainment/kak-ustroen-prikurivatel-v-avtomobile-razbiraemsya-s/'><img alt='Faire face à l'allume-cigare' src='/uploads/fa83aeba586f24115130d48002900131.jpg' loading=lazy loading=lazy><span>Faire face à l'allume-cigare</span></a></div> <div class="related"><a href='https://wisemotors.ru/fr/science/kogda-ispolzuetsya-cikly-s-predusloviem-i-postusloviem-cikl-s-predusloviem/'><img alt='Quand utiliser les boucles de précondition et de postcondition' src='/uploads/db86a95d1ece12a7b91dcf9e7dd1bb26.jpg' loading=lazy loading=lazy><span>Quand utiliser les boucles de précondition et de postcondition</span></a></div> <div class="related"><a href='https://wisemotors.ru/fr/tv/aktivnaya-fazirovannaya-antennaya-resh-tka-fazirovannaya-antennaya/'><img alt='Antenne réseau de phase Principe de l'antenne réseau de phase' src='/uploads/88b79db7f4fc20b3cd94fbfc41aa8656.jpg' loading=lazy loading=lazy><span>Antenne réseau de phase Principe de l'antenne réseau de phase</span></a></div> </div> <div class="clear"></div> <div class="adsense_right"> </div> <div class="adsense_right mt25"> <noindex> <div id="smartrotator_ad_1220"></div> </noindex> </div> <div class="adsense_right mt20"> </div> </div> </aside> </div> <div class="clear"></div> </div> <div class="prefooter"> <span style="font-size:0.7em;">2023 wisemotors.ru. Comment ça fonctionne. Fer. Exploitation minière. Crypto-monnaie.</span> </div> <footer> <div class="fitnes-social"> <div style="display:none;"></div> </div> <div id="vkcom"></div> </footer> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>