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 en 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é.
L'essentiel est de ne pas paniquer... 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 :
Tout est en majuscule... 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.
Page Web avec minuscules activées 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.
Texte après application des majuscules 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:
- Partagez cet article sur les réseaux sociaux pour que plus de personnes en profitent ;
- 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 !
CSS permet une personnalisation flexible du texte, qui est représenté à l'aide du langage HTML. Aujourd'hui nous allons nous intéresser à l'effet de la propriété "text-transform" qui permet de changer la casse de la police. Cette option est prise en charge par tous les navigateurs modernes et est incluse dans les spécifications de toutes les versions de CSS.
Objectif
La propriété "text-transform" peut prendre trois valeurs principales et deux supplémentaires. Par exemple, vous pouvez attribuer des majuscules à tout le texte sélectionné. Ou vous pouvez donner une commande opposée à la propriété précédente, où tous les caractères deviennent en minuscules. Vous pouvez prendre rendez-vous en utilisant n'importe quelle méthode qui vous convient. Par exemple, en utilisant des styles en ligne. Ou vous pouvez créer
Un fichier séparé avec une description de toutes les propriétés. La méthode d'affectation à utiliser dépend de vous. "Text-transform" peut prendre les valeurs suivantes :
- majuscule. Met tous les caractères sélectionnés en majuscules. En CSS, les majuscules sont courantes, car cette valeur permet de résoudre de nombreuses tâches complexes liées au texte.
- minuscule. Cette propriété est complètement opposée à la commande majuscule.
- capitaliser. Change la casse de la première lettre en majuscule. Le reste des personnages ne changera pas.
- Aucun. Permet d'annuler toutes les valeurs attribuées (nécessaires pour prédéfinir une propriété). Généralement, cette valeur est définie par défaut.
- Hériter. Hérite de toutes les propriétés de l'élément parent. Notez qu'IE ne prend pas en charge cette propriété.
Application
Avec CSS, les majuscules (ou des effets similaires) sont définis avec une simple commande. Par conséquent, il n'est pas nécessaire de modifier ou de réécrire l'intégralité du texte. Si nous parlons d'un site d'une page, cette propriété peut ne pas être utile. Mais lorsque vous avez un immense portail sous votre contrôle, où vous devez corriger la casse des lettres dans certains fragments, alors la "transformation de texte" devient le seul moyen efficace. Par exemple, vous devez corriger la police dans les balises d'en-tête "h2". Pour ce faire, ajoutez l'entrée : "h2 ( text-transform: uppercase; )", puis tous les en-têtes de second niveau seront en majuscules.
Particularités
Certains peuvent penser que le traitement manuel du texte et la modification de la police à l'aide de la propriété "text-transform" ne font aucune différence. Mais ce n'est pas. Si vous le modifiez manuellement en majuscules (majuscules), lors de la copie de ces informations depuis votre site, les caractères resteront inchangés. Si vous utilisez le langage CSS, tout se passe différemment. La propriété "text-transform" ne modifie que visuellement la police pour les utilisateurs. Mais en réalité, les symboles restent inchangés. Cela arrive à toutes les valeurs de cette propriété. Les informations copiées (texte) auront la casse d'origine, qui est utilisée dans le code source de la page. C'est la seule différence entre le traitement manuel et l'utilisation des commandes CSS.
Peu importe celui que vous voulez utiliser - minuscule ou majuscule, l'essentiel est de ne pas oublier le but. Par exemple, si vous n'avez besoin de modifications qu'à des fins décoratives, vous pouvez utiliser en toute sécurité la propriété "text-transform". Eh bien, si vous savez que vos utilisateurs copieront probablement les informations que vous avez publiées, il est préférable de modifier manuellement la casse de tout le texte. En effet, parfois les lecteurs ne remarquent pas une telle substitution de police. Ceci est particulièrement critique lorsqu'il s'agit de documents importants et d'informations similaires.
Dans le dernier tutoriel vidéo, nous avons appris comment supprimer et ajouter de nouvelles informations à la nouvelle version du document HTML, tout en informant les moteurs de recherche à ce sujet et en le mettant 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.
Bonjour. Parfois, lors de la création de pages Web, vous devez définir certains mots à l'aide de CSS en majuscules ou en exposant. Voyons comment c'est fait.
Majuscules et minuscules avec css
En général, même aujourd'hui, vous pouvez inclure le texte souhaité dans des balises et obtenir l'affichage souhaité, mais voyons aussi comment cela peut se faire avec 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 à imprimer
- En css, vous devez définir cet élément :
Index supérieur(
alignement vertical : super ;
}
Cette propriété contrôle l'alignement vertical du texte. Sa valeur super spécifie que le texte est affiché en exposant. Mais la taille de la police est restée la même que celle du texte normal. Pour rendre les choses plus jolies, vous devez également définir la taille de la police un peu plus petite avec la propriété font-size.
C'est ainsi que fonctionne la propriété. En conséquence, pour sortir dans l'index inférieur, 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 avez besoin de 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. La propriété ne fournit aucune fonctionnalité supplémentaire, et elles ne sont pas nécessaires. Si vous le souhaitez, vous pouvez organiser ce texte d'une manière spéciale, mais cela est rarement nécessaire.
Où peut être utile
Le texte en exposant et en indice peut être utilisé lors de l'écriture de formules, de l'ajout de notes et de notes aux articles. Par exemple, sur Wikipédia, les sources et les notes sont données pour chaque article. Au cours de l'article, ils sont disposés sous forme de petits exposants. Cela n'irrite pas les lecteurs et vous permet en même temps de donner aux articles l'aspect souhaité.
La propriété est entièrement multi-navigateur et est prise en charge dans toutes les versions de CSS.
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é
λ 3-JE 1λ 2+ je 2λ - je 3 = 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 symboles en exposant sont définis en rouge et les symboles inférieurs sont en bleu (Fig. 2).
