Bonjour lecteurs de ce blog. Aujourd'hui, je vais parler de la façon dont vous pouvez créer toutes les lettres majuscules via CSS. Bien sûr, pour cela, vous pouvez inclure Verrouillage des majuscules et écrivez le texte souhaité, mais c'est une méthode assez primitive. Mais que se passe-t-il si vous avez besoin de mettre en évidence un paragraphe séparé dans un article déjà terminé ?

Mettre toutes les lettres en majuscule en css

Il existe une propriété text-transform pour cela, qui, vous l'avez deviné, transforme le texte. Il a les valeurs suivantes :

• minuscule - tout le texte est affiché en lettres minuscules
• majuscule - tous les mots sont affichés en majuscule (c'est ce dont nous avons besoin)
• majuscule - la première lettre de chaque mot est en majuscule

C'est en fait tout ce que vous devez savoir. Il ne reste plus qu'à trouver comment se référer à l'élément souhaité. Imaginons cet exemple : vous devez capitaliser le cinquième paragraphe de l'article. Et comment cela peut-il être fait ?

Comment atteindre l'élément désiré ?

Comme vous le savez, un paragraphe est créé à l'aide d'une balise html appariée, dont tout le contenu devient un paragraphe. Il ne reste plus qu'à lui définir une nouvelle classe de style :

Nous pouvons maintenant nous référer à ce paragraphe particulier via CSS sans affecter le reste. Vous pouvez le faire comme ceci :

Lettre majuscule (
Transformation de texte : majuscule ;
}

Cette méthode convient lorsque vous devez sélectionner un fragment dans un article séparé. Mais que se passe-t-il si toutes les pages doivent avoir un certain texte en majuscules. Dans ce cas, il est préférable de placer le bloc dans le fichier modèle afin de ne pas avoir à l'écrire à chaque fois.

Ou peut-être avez-vous besoin de capitaliser le deuxième paragraphe de chaque article en utilisant css. Alors une autre option vous conviendra. Recherchez le bloc dans lequel l'article est affiché et reportez-vous au deuxième paragraphe en utilisant la pseudo-classe nième enfant. V cet exemple notre bloc article a la classe article.

Article p : énième enfant (2) (
Transformation de texte : majuscule
}

Comme vous pouvez le voir, pour chaque cas spécifique, sa propre solution est adaptée. La chose la plus importante est de se souvenir de la propriété text-transform, qui modifie la casse des lettres.

En général, il n'est pas recommandé d'utiliser l'affichage de texte comme celui-ci, car cela altère grandement sa perception, mais certains fragments particulièrement importants peuvent être mis en évidence.

Aujourd'hui, nous avons examiné la propriété text-transform. Abonnez-vous au blog pour recevoir les nouveaux articles.

majuscules CSS aider à briser la monotonie d'un dessin uniforme, dont les textes se ressemblent du début à la fin.

Auparavant et maintenant lettrines

Les chroniqueurs ont utilisé des lettres majuscules dans des manuscrits manuscrits, dont certains remontent au Ve siècle. Les majuscules ont continué à être utilisées du VIIIe au XVe siècle, lorsque l'imprimerie a permis l'industrialisation de l'imprimerie. Des lettrines manuscrites et imprimées ont été placées au début du texte. Ils étaient souvent décorés d'un motif décoratif placé autour de la lettre.

Les lettres élevées et abaissées sont encore utilisées aujourd'hui. On les retrouve dans les journaux, les magazines et les livres, ainsi que dans la typographie numérique. Les lettres en relief sont parfois appelées étendues. Ils sont placés au ras du bas du texte qui les suit. Les lettres omises affleurent le haut du texte, parfois dans une couche derrière le corps principal du texte, ou le reste du texte les entoure.

Les lettres en relief sont beaucoup plus faciles à définir, car elles affleurent le reste du texte et vous n'avez généralement pas besoin de modifier le flux autour des marges extérieures pour ce faire. Les lettres omises nécessitent un réglage plus fin. Il vous sera plus facile de régler ce problème si vous comprenez d'abord comment les caractères en relief sont gérés.

Utilisation des classes

Les concepteurs qui connaissent déjà CSS savent créer une classe CSS distincte pour la première lettre majuscule.

Le CSS pour l'élément de paragraphe et la classe qui crée la lettre ressemblerait à ceci :

p (font-size : 20px ; font-family : Georgia, "Times New Roman", Times, serif ;) .myinitialcaps (font-size : 48px ; font-family : Didot ;)

Et le code HTML ressemblera à ceci :

Ce qui nous donne :

Cela vous semble trop facile ? En fait, vous devrez effectuer des ajustements en fonction des lettres en relief spécifiques, car chaque lettre majuscule nécessite un crénage spécial. Après avoir choisi une police pour les lettres en relief et pour le corps du texte, vous devez créer des classes distinctes pour chaque lettre en relief. Dans le ci-dessous CSS class.myinitialcapsi la case de droite est négative pour diminuer la distance entre I et n.

Myinitialcapsi (taille de police : 48px ; famille de polices : Didot ; marge à droite : -1px ;)

je Dans ce cas, il y a un espace supplémentaire entre le « I » et le « n ».

je L'inclusion d'une nouvelle classe avec une marge négative la rapproche.

Selon la résolution de l'écran, dans l'exemple ci-dessus, I et n peuvent sembler avoir fusionné. Cela est dû aux empattements aux extrémités des lettres. Par conséquent, avant de choisir la version finale Styles CSS, testez le site sur différents appareils pour voir à quoi ressemble le texte sur eux en majuscules CSS.

Devis et autres cas particuliers

Vous pouvez agrandir non seulement les lettres au début du texte. Vous pouvez implémenter une autre classe pour créer une version surdimensionnée des guillemets qui apparaissent à côté de la lettre. Dans notre cas, ni la classe 48 pixels ni la classe texte 20 pixels ne conviennent aux guillemets. Au contraire, ce sera quelque chose entre - 30 pixels. Nous allons déplacer les guillemets vers le bas de 4 pixels pour les aligner optiquement avec I :

Myinitialcapsq (font-size : 30px ; font-family : Didot ; float : left ; margin-top : 4px ;)

“je n inclure « une nouvelle classe avec une marge négative la rapproche.

Vous devez être très prudent lorsque vous spécifiez chacune des majuscules CSS, ainsi que les guillemets, afin que leur crénage et leur alignement correspondent au balisage environnant. Par exemple, la lettre T devra être décalée vers la gauche, légèrement au-delà du bord du paragraphe, afin que sa ligne transversale s'intègre visuellement dans la mise en page. Vous devrez faire de même avec des lettres rondes telles que C, G, O et Q. Dans cet exemple, les tailles de police utilisées sont 20, 30 et 48. Mais vous devrez choisir les tailles en fonction des spécificités des polices que vous avez choisies. Ainsi que les tailles et résolutions des écrans sur lesquels le site sera visualisé.

Pseudo-éléments et pseudo-classes

Avec un pseudo-élément CSS, vous pouvez facilement créer une lettre en relief en ajoutant :: first-letter à l'élément de paragraphe. Utilisation : première lettre ( avec un côlon) pour les navigateurs obsolètes :

p (taille de police : 1.2em ; famille de polices : Géorgie, "Times New Roman", Times, serif ; hauteur de ligne : 2em ; padding-bottom : 1.2em ;) p :: première lettre (taille de police : 3.6em; text-transform: majuscule; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0.15 em ;)

Le code HTML qui contient les classes CSS qui prennent en compte le crénage des lettres N et B ressemblera à ceci...

Une lettre initiale, la première lettre étant une majuscule.
Avec un saut de ligne, la ligne suivante n'a pas de plafond initial.

m Remarquez dans la source HTML comment la première lettre, et non une majuscule dans le code HTML, est dimensionnée à la taille de majuscule initiale de 3,6 em. Bien, hein ?

B ut avec un retour dur et un nouveau paragraphe commencé, un autre plafond initial est toujours créé. Vous vous demandez peut-être, Comment vais-je rendre compte de cela ? Suis-je censé avoir un plafond initial au début du tout nouveau paragraphe ? Eh bien, vous pourriez. Mais, voulez-vous que ça ressemble à ça, et est-ce que ça doit absolument ressembler à ça ?

La première lettre majuscule du paragraphe est convertie en lettre.
La première lettre après un saut de ligne ne sera pas en majuscule.

O Veuillez noter qu'en code source HTML la première lettre n'est pas en majuscule, mais elle est convertie en un caractère de 3,6 em.

O Cependant, même après un saut de ligne forcé, et au début de chaque nouveau paragraphe, une lettre est toujours créée. Vous vous demandez peut-être : Comment puis-je prendre cela en compte ? Dois-je ajouter des lettres pour tous ces cas ? Bien, vous pouvez. Mais est-ce nécessaire ?

Même avec les avantages offerts par les pseudo-éléments, nous avons dû ajouter beaucoup de code pour définir des classes distinctes afin de gérer les problèmes de crénage et d'indentation. Mais cette méthode convertit la première lettre de chaque nouveau paragraphe en CSS une majuscule. Pour certains, cela peut ne pas fonctionner, car vous n'avez pas besoin de transformer la première lettre de chaque paragraphe.

Combiner des pseudo-classes et des pseudo-éléments pour créer une mise en page intelligente

L'ajout de la pseudo-classe : first-child permet de résoudre le problème de la conversion inutile des premières lettres :

p (taille de police : 1,2 em ; famille de polices : Georgia, "Times New Roman", Times, serif ; hauteur de ligne : 2 em ; bas de remplissage : 0,5 em ;) p : premier enfant :: première lettre ( taille de police : 3,6 em ; transformation de texte : majuscule ; famille de polices : "Monotype Bernard Condensed", serif ; marge à droite : 0,03 em ;)

En combinant ce code avec HTML :

La première lettre, qui est définie comme premier enfant, est la seule lettre qui est convertie en lettrine surélevée dans cette méthode.

Étant donné que seule la lettre définie comme first-child est convertie, notez que cet exemple diffère du précédent, sans first-child. De plus, nous ne convertissons pas les premières lettres après le début d'un paragraphe et après un saut de ligne forcé. Cela semble plus élégant par rapport à l'apparence de la mise en page lorsque nous avons converti toutes les premières lettres des paragraphes.

L'avantage d'utiliser des pseudo-classes est la possibilité de gérer divers cas particuliers. Qu'en est-il des inconvénients? Il existe de nombreuses pseudo-classes différentes, et elles peuvent être combinées de tellement de manières que cela peut vous faire tourner la tête. Par exemple, les pseudo-classes : first-child et : first-of-type peuvent donner les mêmes résultats. Vous pouvez également appliquer la pseudo-classe non seulement au paragraphe, mais aussi aux éléments