Vignette

Vignette

Plus que d'habitude

Moins que d'habitude

Italique

Italique

Avec trait de soulignement

Barrée

Capacités des attributs de style

En plus des balises décrites, il existe plusieurs autres façons de modifier la police en HTML. L’une d’elles consiste à utiliser l’attribut style générique. A l'aide des valeurs de ses propriétés, vous pouvez définir le style d'affichage des polices :

1) font-family – la propriété définit la famille de polices. Il est possible de lister plusieurs valeurs.
Le changement de la police en HTML vers la valeur suivante se produira si la famille précédente n'est pas installée sur le système d'exploitation de l'utilisateur.

Syntaxe d'écriture :

famille de polices : nom de police [, nom de police [, ...]]

2) taille de la police – la taille est définie entre 1 et 7. C'est l'un des principaux moyens d'augmenter la police en HTML.
Syntaxe d'écriture :

taille de police : taille absolue | taille relative | sens | intérêt | hériter

Vous pouvez également définir la taille de la police :

• En pixels ;
• En termes absolus ( xx-petit, x-petit, petit, moyen, grand);
• En pourcentages ;
• En points (pt).

Taille de police : 7

Taille de la police : 24 px

Taille de la police : x-large

Taille de la police : 200 %

Taille de la police : 24 pts

3) font-style – définit le style d’écriture de la police. Syntaxe:

style de police : normal | italique | oblique | hériter

Valeurs:

• normal – orthographe normale ;
• italique – italique ;
• oblique – police inclinée vers la droite ;
• hériter – hérite de l’orthographe de l’élément parent.

Un exemple de comment changer la police en HTML en utilisant cette propriété :

style de police: hériter

style de police : italique

style de police : normal

style de police : oblique

4) font-variant – convertit toutes les lettres majuscules en lettres majuscules. Syntaxe:

variante de police : normal | petites capitalisations | hériter

Un exemple de comment changer la police en html avec cette propriété :

variante de police : hériter

variante de police : normale

variante de police : petites majuscules

5) font-weight – vous permet de définir l’épaisseur du texte (saturation). Syntaxe:

poids de la police : gras|plus gras|plus clair|normal|100|200|300|400|500|600|700|800|900

Valeurs:

• gras – définit la police HTML en gras ;
• plus audacieux – plus audacieux par rapport à la normale ;
• plus léger – moins saturé par rapport à la normale ;
• normal – orthographe normale ;
• 100-900 – définit l'épaisseur de la police en équivalent numérique.

poids de la police : gras

poids de la police : plus gras

poids de la police : plus léger

poids de la police : normal

poids de la police : 900

poids de la police : 100

Propriété de police HTML et couleur de police

La police est une autre propriété du conteneur. En lui-même, il combinait les valeurs de plusieurs propriétés destinées au changement de polices. syntaxe de police :

police : taille de police famille de polices | hériter

La valeur peut également être définie sur les polices utilisées par le système dans les étiquettes des différents contrôles :

• légende – pour les boutons ;
• icône – pour les icônes ;
• menu - menu ;
• message-box – pour les boîtes de dialogue ;
• small-caption – pour les petits contrôles ;
• barre d'état – police de la barre d'état.

police:icône

police: légende

police:menu

police: boîte de message

petite légende

police: barre d'état

police:italique 50px gras "Times New Roman", Times, serif

Pour définir la couleur de la police en HTML, vous pouvez utiliser la propriété color. Il permet de définir la couleur, soit à l'aide d'un mot-clé, soit au format RVB. Et aussi en code hexadécimal.

Contrôle si le texte de l'élément est converti en majuscules ou en caractères majuscules. Lorsque la valeur est différente de none , la casse du texte source sera modifiée.

information brève

Désignations

Valeurs

capitaliser Le premier caractère de chaque mot d'une phrase sera en majuscule. Les symboles restants ne changent pas d’apparence. minuscules Tous les caractères du texte deviennent minuscules (minuscules). majuscule Tous les caractères du texte deviennent en majuscules (majuscules). none Ne modifie pas la casse des caractères.

bac à sable

Winnie l'ourson n'était toujours pas opposée à un petit rafraîchissement, surtout à onze heures du matin, car à cette heure-là, le petit-déjeuner était terminé depuis longtemps et le déjeuner n'avait pas encore commencé. Et bien sûr, il était terriblement heureux de voir que le Lapin sortait des tasses et des assiettes.

div (transformation de texte : majuscule ; )

Exemple

Monument culturel du Moyen Âge

La plaine amazonienne est immodérée dans le petit transport de chats et de chiens, et Hajos Bahia est célèbre pour ses vins rouges.

Le résultat de cet exemple est présenté sur la Fig. 1.

Riz. 1. Application de la propriété text-transform

Modèle objet

Un objet.style.textTransform

spécification

Chaque spécification passe par plusieurs étapes d'approbation.

• Recommandation - La 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 atteint ses objectifs, mais a besoin de l'aide de la communauté de développement pour mettre en œuvre 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 aboutie d'un brouillon qui a été discuté et modifié pour examen par la communauté.
• Brouillon de l'éditeur ( Projet éditorial) - une version préliminaire de la norme après modifications apportées par les éditeurs du projet.
• Brouillon ( Projet de spécification) - la première version préliminaire de la norme.

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 concevoir le début d’un paragraphe avec une majuscule bien visible permet de structurer le texte et de le rendre plus facile à percevoir. Lors de la conception d'une page Internet, le texte peut être rédigé conformément aux préférences de l'auteur et aux règles de la langue russe. Vous pouvez également « automatiser » sa conception en entrant certaines « commandes » dans un fichier avec une extension css – une feuille de style – ou en ajoutant une section de style à votre fichier html. CSS est généralement étudié en plus du HTML afin de modifier rapidement certains éléments de conception dans le texte en même temps.

Cela est particulièrement vrai si le site comporte des centaines de pages et que la modification de chacune d'elles est un processus très laborieux.

Si vous appliquez du CSS, les lettres majuscules au début de chaque paragraphe peuvent paraître spéciales. Par exemple, le code ci-dessous, saisi en HTML sans parenthèses, permet au texte formaté avec la balise « p » d'agrandir la lettre majuscule - première lettre - - 220 % de la taille standard, jaune - la valeur de couleur est jaune, et écrivez-le dans une police différente du reste du texte – Géorgie contre batangche.

(<) style(>)

p : première lettre (famille de police : Géorgie ; taille de police : 220 % ; couleur : jaune ;)

(<)/style(>)

Vous pouvez obtenir de belles lettres majuscules en créant votre propre police sous forme d'images - pour chaque lettre, il y a une image distincte, par exemple dans le style russe ancien ou gothique. Ils peuvent être dessinés. Ensuite, aux endroits souhaités, à la place de la lettre 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 une combinaison harmonieuse avec le reste du texte. Exemple: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Parenthèses autour< и >nous supprimons.

Si vous n'avez pas la possibilité de dessiner l'alphabet vous-même, la lettre majuscule peut être conçue à l'aide de polices disponibles gratuitement sur Google (section Polices) ou d'autres moteurs et ressources de recherche. 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 police : 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 propose des liens prêts à l'emploi à insérer en HTML ou 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 lors du formatage de texte en russe. À l'heure actuelle, le moteur de recherche propose gratuitement une quarantaine de types.

Une lettre majuscule ou son antipode majuscule peut être stylisée à l'aide de la propriété CSS text transform. Si vous définissez la valeur text transform: none dans la feuille de style, le texte ressemblera à la façon dont vous l'écrivez. Pour convertir toutes les lettres en minuscules, vous devez définir la valeur transformation du texte : minuscule, séparé par deux points, et pour les majuscules - majuscule. Définir la propriété sur text transform: capitalize fera en sorte que chaque mot ait une lettre majuscule au début.

Bonjour les lecteurs de ce blog. Aujourd'hui, je vais parler de la façon dont vous pouvez créer toutes les lettres majuscules en utilisant CSS. Bien sûr, pour ce faire, vous pouvez activer le verrouillage des majuscules et écrire le texte souhaité, mais il s'agit d'une méthode plutôt primitive. Mais que se passe-t-il si vous devez mettre en évidence un paragraphe distinct dans un article terminé ?

Rendre toutes les lettres majuscules en CSS

Il existe une propriété text-transform pour cela, qui, comme vous l'avez peut-être 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 majuscules (ce dont nous avons besoin)
• capitaliser – la première lettre de chaque mot est en majuscule

C'est essentiellement tout ce que vous devez savoir. Il ne reste plus qu'à comprendre comment accéder à l'élément souhaité. Imaginons cet exemple : vous devez mettre le cinquième paragraphe d'un article en majuscules. Et comment cela peut-il être mis en œuvre ?

Comment atteindre l'élément souhaité ?

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 avons désormais la possibilité d'accéder à ce paragraphe spécifique via le langage CSS sans affecter le reste. Vous pouvez procéder ainsi :

Lettre majuscule(
Transformation de texte : majuscule ;
}

Cette méthode convient lorsque vous devez mettre en évidence un fragment dans un article particulier. Et si toutes les pages devaient contenir un certain texte en majuscules. Dans ce cas, il est préférable de placer le bloc dans un fichier modèle pour ne pas l'écrire à chaque fois.

Ou peut-être avez-vous besoin de surligner le deuxième paragraphe de chaque article en utilisant CSS en majuscules. Alors une autre option vous conviendra. Recherchez le bloc où apparaît l'article et accédez au deuxième paragraphe en utilisant la pseudo-classe nième enfant. Dans cet exemple, notre bloc avec un article a la classe article.

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

Comme vous pouvez le constater, il existe une solution différente pour chaque cas spécifique. La chose la plus importante est de se rappeler de la propriété text-transform, qui modifie la casse des lettres.

En général, il n'est pas recommandé d'afficher le texte de cette manière, 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 de nouveaux articles.