Css majuscules. Comment faire toutes les majuscules en css. Mettre toutes les lettres en majuscule en css
Une lettre majuscule, selon la définition, est un élément de texte dont la taille est relativement augmentée.Dans presque toutes les langues, une phrase commence par une lettre majuscule. Et le design du début du paragraphe avec une majuscule bien visible permet de structurer le texte et le rend plus facile à lire. Lors de la rédaction d'une page Web, le texte peut être rédigé conformément aux préférences de l'auteur et aux règles de la langue russe. Aussi, sa conception peut être "automatisée" en ajoutant certaines "commandes" au fichier avec l'extension css - feuille de style - ou compléter votre fichier html style de section. CSS est généralement étudié en plus avec html afin de modifier rapidement certains éléments de conception dans l'ensemble du texte à la fois.
Cela est particulièrement vrai si le site contient des centaines de pages et que les modifications apportées à chacune d'entre elles prennent beaucoup de temps.
Si vous appliquez CSS, lettres majuscules au début de chaque paragraphe peut sembler différent. Par exemple, le code ci-dessous, saisi en html sans parenthèses, permet au texte formaté avec la balise "p" d'agrandir la majuscule - première lettre - - 220 % de la taille standard, jaune - la valeur de la couleur est jaune, et écrivez-le dans une police différente du reste du texte - Georgia versus batangche.
(<) style(>)
p : première lettre (famille de police : Georgia ; taille de la police : 220 % ; couleur : jaune ;)
(<)/style(>)
Vous pouvez obtenir de belles lettres majuscules si vous créez votre propre police sous forme d'images - pour chaque lettre, une image distincte, par exemple dans le style russe ou gothique. Ils peuvent être dessinés en Puis, aux endroits requis à la place de la majuscule, vous pouvez insérer le code sans parenthèses (<) img src=”ссылка на место, где лежит картинка”(>). Les attributs supplémentaires seront la hauteur et la largeur - la largeur et la hauteur de l'image, qui peuvent être définies en pixels pour se fondre harmonieusement avec le reste du texte. Exemple: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Parenthèses autour< и >nous enlevons.
Si vous n'avez pas la possibilité de dessiner vous-même l'alphabet, alors la lettre majuscule peut être formatée à l'aide de polices disponibles gratuitement sur Google (section Polices) ou d'autres moteurs de recherche et ressources. Pour ce faire, le code ci-dessus doit être formaté comme suit :
(<) style(>)
p (famille de polices : batangche ; taille de police : 93 % ;)
p : première lettre (famille de polices : Kelly + Slab ; taille de police : 220 % ; couleur : bleu ;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
Le service Google vous permet de choisir l'un ou l'autre et fournit des liens prêts à l'emploi à insérer en html ou en css. Nous attirons votre attention sur le fait qu'il est nécessaire de sélectionner un groupe de polices - latine ou cyrillique, car presque toutes les polices latines ne fonctionnent pas pour le texte en russe. Au ce moment le moteur de recherche fournit environ 40 types gratuitement.
Une majuscule ou son antipode majuscule peut être formaté avec Propriétés CSS transformation de texte. Si vous définissez la valeur text transform: none dans la feuille de style, le texte ressemblera à ce que vous écrivez. Pour convertir toutes les lettres en minuscules, définissez la transformation du texte : valeur minuscule séparée par deux points et majuscule pour les majuscules. Définir la propriété sur text transform: capitalize fera en sorte qu'il y ait une majuscule au début de chaque mot.
Une lettrine est la première lettre d'un paragraphe qui est plus grande que le reste et placée de sorte que son haut soit au niveau de la première ligne du paragraphe. Dans l'image, vous pouvez voir un exemple de lettrine intégrée dans le texte.
Soit dit en passant, WordPress a un plugin spécial (wordpress.org/extend/plugins/drop-caps) qui vous permet de créer automatiquement des incrustations dans le texte (et un décalage vers le bas) lettres majuscules... Merveilleux! Cependant, que se passe-t-il si vous ne souhaitez pas utiliser de plugin (je suis sûr que vous ne le faites pas) et que vous avez juste besoin de créer une lettrine pour plusieurs publications, et peut-être à un endroit spécifique ?
La bonne nouvelle : vous n'avez pas besoin d'utiliser un plugin pour créer des lettres majuscules, vous n'avez besoin que d'un petit css et d'une balise span. Ouvrez votre fichier css et ajoutez le code suivant :
Span.dropcaps (font-family : Georgia, serif ; couleur : #ccc ; font-size : 46px ; float : left ; font-weight : 400 ; line-height : 1em ; margin-bottom : -0,4em ; margin-right : 0.09em ; position : relative ;)
Quelque chose comme ça. Bien sûr, vous aurez besoin d'un style qui correspond à votre conception et à votre texte. Par exemple, les valeurs des propriétés : taille de police, marges et hauteur de ligne devront être sélectionnées en fonction de votre conception et de votre texte.
Balise de portée
Pour que le style soit appliqué à la lettre majuscule du texte, vous devez "envelopper" la lettre majuscule dans la balise span et écrire la classe appropriée.
UNE
Pseudo-élément : première lettre
Vous pouvez également styliser le premier caractère du texte à l'aide du pseudo-élément : première lettre. Cependant, un nombre limité de propriétés peut être appliqué au : pseudo-élément de première lettre : ce sont des propriétés liées à la police, la couleur, l'arrière-plan, les bordures, les marges et le remplissage. Il convient également de noter que le pseudo-élément : première lettre ne fonctionnera pas dans les navigateurs plus anciens.
P : première lettre (famille de police : Georgia, serif ; couleur : #ccc ; taille de la police : 46 px ; float : gauche ; poids de la police : 400 ; hauteur de ligne : 1 em ; marge inférieure : -0,4 em ; marge -droite : 0,09 em ; position : relative ;)
Voici quelques méthodes d'édition. lettres majuscules en utilisant CSS.
Souvent pressé lors de l'ajout de matériel sur le site ou, par exemple, de la création nouveau sujet sur le forum, un utilisateur peut commencer à écrire une phrase (titre) avec une petite lettre (minuscule). C'est en quelque sorte une erreur.
Je vais vous montrer plusieurs options pour résoudre ce problème : PHP et CSS sont plus adaptés aux documents déjà publiés, alors que jQuery peut résoudre la situation avant même la publication.
La première lettre d'une chaîne est en majuscule en PHP
En PHP, il existe une fonction appelée " ucfirst", qui convertit simplement le premier caractère de la chaîne en majuscule, mais son inconvénient est qu'il ne fonctionne pas tout à fait correctement avec l'alphabet cyrillique.
Pour ce faire, nous allons écrire notre propre petite fonction. L'implémentation ressemblera à ceci :
Dans ce cas, nous recevrons une offre qui commence par lettre capitale, ce qui, en fait, est ce dont nous avons besoin.
Première lettre majuscule de la chaîne en CSS
Cette méthode visuellement (c'est-à-dire que dans le code source du site, les offres se présenteront telles qu'elles sont) convertit également le premier caractère en majuscule.
L'utilisation est la suivante :
première phrase
deuxième phrase
troisième phrase
quatrième phrase
Utilisation du pseudo-élément " première lettre"Et propriétés" transformation de texte»Nous avons défini l'apparence de chaque première lettre du paragraphe.
JQuery première lettre majuscule de la chaîne
Comme je l'ai dit plus tôt, cette méthode de conversion est la mieux adaptée aux documents qui n'ont pas encore été publiés.
Par exemple, nous allons prendre un champ de texte (il nous servira de champ pour saisir un titre) et lui écrire un petit script qui, lors de la saisie d'une phrase avec une lettre minuscule, le fait avec une majuscule :
Le script est déclenché à la fois lors de l'écriture du texte et lors de son simple collage. N'oubliez pas que pour que les scripts fonctionnent sur votre site, vous devez avoir la bibliothèque jQuery connectée.
Contrôle la conversion du texte de l'élément en caractères majuscules ou minuscules. Lorsque la valeur est différente de none, la casse du texte source sera modifiée.
brève information
Désignations
| La description | Exemple | |
|---|---|---|
| <тип> | Indique le type de la valeur. | <размер> |
| UN B | Les valeurs doivent être affichées dans l'ordre indiqué. | <размер> && <цвет> |
| A | B | Indique qu'une seule des valeurs suggérées doit être sélectionnée (A ou B). | normale | lettres minuscules |
| Un || B | Chaque valeur peut être utilisée seule ou conjointement avec d'autres dans n'importe quel ordre. | largeur || compter |
| Valeurs des groupes. | [culture || traverser] | |
| * | Répétez zéro ou plusieurs fois. | [,<время>]* |
| + | Répétez une ou plusieurs fois. | <число>+ |
| ? | Le type, le mot ou le groupe spécifié est facultatif. | encart? |
| (UN B) | Répétez au moins A, mais pas plus de B fois. | <радиус>{1,4} |
| # | Répétez une ou plusieurs fois, séparés par des virgules. | <время># |
Les valeurs
majuscule Le premier caractère de chaque mot de la phrase sera en majuscule. Les autres symboles ne changent pas d'apparence. minuscules Tous les caractères du texte deviennent minuscules (minuscules). majuscule Tous les caractères du texte sont en majuscule (majuscule). aucun Ne change pas la casse.
bac à sable
Winnie l'ourson n'était toujours pas contre un petit rafraîchissement, surtout à onze heures du matin, car à cette heure le petit déjeuner était déjà terminé depuis longtemps, et le dîner n'avait même pas pensé à commencer. Et, bien sûr, il était terriblement heureux de voir Rabbit sortir des tasses et des assiettes.
div (texte-transformer : capitaliser ;)
Exemple
Monument culturel du Moyen Âge
Les basses terres amazoniennes accueillent un petit transport de chats et de chiens, et Hayosh Bay est célèbre pour ses vins rouges.
Résultat cet exemple montré dans la fig. 1.
Riz. 1. Application de la propriété text-transform
Modèle d'objet
Un objet.style.textTransform
spécification
Chaque spécification passe par plusieurs étapes d'approbation.
- Recommandation - Cette spécification a été approuvée par le W3C et est recommandée comme norme.
- Recommandation du candidat ( Recommandation possible) - le groupe responsable de la norme est convaincu qu'elle est conforme à ses objectifs, mais l'aide de la communauté des développeurs est requise pour la mise en œuvre de la norme.
- Recommandation proposée ( Recommandation suggérée) - À ce stade, le document est soumis au Conseil consultatif du W3C pour approbation finale.
- Brouillon de travail - Une version plus mature du brouillon après discussion et révision pour examen par la communauté.
- Brouillon de l'éditeur ( Ébauche éditoriale) - une version brouillon de la norme après édition par les éditeurs du projet.
- Brouillon ( Projet de spécification) est la première ébauche de la norme.
Permet de changer la casse des lettres du texte.
Par défaut, la valeur est définie sur aucun, ce qui n'a aucun effet sur le texte. La casse du texte reste la même. Les valeurs majuscules et minuscules convertissent les caractères en majuscules et minuscules, respectivement. Si vous spécifiez une valeur de majuscule, seuls les premiers caractères de chaque mot seront mis en majuscule. Hériter hérite de la valeur du parent.
Exemple
h3 (text-transform : majuscule ;) .lowercase (text-transform : minuscule ;) .capitalize (text-transform : majuscule ;)C'est le titre. Il a une propriété text-transform définie sur majuscule. Tous les caractères seront en majuscules.
La propriété Text-transform a été appliquée à ce paragraphe avec une valeur en minuscule, ce qui signifie que toutes les lettres seront en minuscule.
Et ce dernier paragraphe a une propriété text-transform avec une propriété CAPITALIZE appliquée. Les premières lettres de chaque mot seront en majuscules, et seulement cela.