Dans ce tutoriel, nous examinerons le dernier attribut de balise , qui définit la couleur du texte. Par défaut, le texte est noir et s'affiche sur fond blanc. Pour changer la couleur du texte en HTML, vous devez appliquer l'attribut couleur de l'étiquette :
Pour définir une couleur, précisez simplement son nom, par exemple : rouge, vert, bleu. Regardons un petit exemple :
Texte vert
Texte rouge
Texte violet
Voyons le résultat dans le navigateur :
Le texte du premier paragraphe est devenu vert, le deuxième paragraphe est devenu rouge et le troisième paragraphe est devenu violet. Au total, il existe 16 noms de couleurs primaires et 130 supplémentaires. Liste complète couleurs que vous pouvez voir dans la table des couleurs HTML.
Cette manière d’indiquer la couleur est très simple, mais très limitée. Par conséquent, afin de changer la couleur du code HTML, ils utilisent souvent nombre hexadécimal précédé d'un signe dièse (#), par exemple :
En utilisant cette désignation, vous pouvez obtenir plus de 16 millions de couleurs et leurs nuances ! Vous pouvez obtenir le code couleur en utilisant le convertisseur de couleurs HEX, disponible sur le site, ou en utilisant la palette de couleurs de Photoshop. Regardons un exemple et écrivons le code suivant :
Texte vert
Texte rouge
Texte violet
Sauvons le fichier et regardons le résultat :
Comme vous pouvez le voir, nous avons donné au texte les mêmes couleurs que dans le premier exemple, seulement ici nous avons utilisé système hexadécimal calcul ou en d’autres termes, nous avons spécifié la couleur au format HEX.
Vous avez maintenant appris à changer la couleur du texte en HTML et à la fin de la leçon, je suggère de répéter tous les attributs des balises. , et définissez plusieurs paramètres sur le texte à la fois, à savoir : la police, la taille et la couleur. Écrivez un exemple :
Définir la police, la taille et la couleur du texte
Définir la police, la taille et la couleur du texte
27/11/14 88,7K
En HTML, la taille de la police joue un rôle important. Il permet d'attirer l'attention de l'utilisateur sur une information important, publié sur la page du site. Bien que non seulement la taille des lettres soit importante, mais aussi leur couleur, leur épaisseur et même leur famille.
Balises et attributs lorsque vous travaillez avec des polices HTML
Le langage hypertexte dispose d'une large gamme d'outils pour travailler avec les polices. Après tout, le formatage du texte est la tâche principale du HTML.
Raison de la création Langage HTML Un problème est survenu avec les navigateurs affichant les règles de formatage du texte.
Examinons les balises utilisées pour travailler avec les polices HTML et leurs attributs. Le principal est le tag . A l'aide des valeurs de ses attributs, vous pouvez définir plusieurs caractéristiques de la police :
- color – définit la couleur du texte ;
- size – taille de la police en unités conventionnelles.
Les valeurs d'attribut positives de 1 à 7 sont prises en charge.
- face – utilisé pour définir la famille de polices de texte qui sera utilisée à l'intérieur de la balise . Plusieurs valeurs sont supportées, séparées par des virgules.
Seul le texte situé entre les parties de la balise de police appariée est formaté. Le reste du texte s'affiche police standard, installé par défaut.
En HTML également, il existe un certain nombre de balises appariées qui spécifient une seule règle de formatage. Ceux-ci inclus:
- - définit en HTML caractère gras. Étiqueter similaire en action au précédent;
- — la taille est plus grande que la taille par défaut ;
- — taille plus petite Police de caractère;
- — texte en italique (italique). Étiquette similaire ;
- — texte souligné;
- barrée;- — afficher le texte uniquement en minuscules ;
- - en majuscule.
Texte brut
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 définie sur système opérateur 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 – traduit tout lettres majuscules en 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
En outre, la valeur peut être définie sur les polices utilisées par le système dans les inscriptions sur divers éléments 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
Nous avons tous utilisé le célèbre éditeur Texte de mot. Et nous savons qu’il est très simple de modifier la police, la taille et la couleur du texte. Ainsi, en HTML, vous pouvez également définir ces paramètres sans trop de difficultés. Il y a une balise pour ça . Il est apparié et possède donc une balise de fermeture, car le navigateur doit comprendre où se trouvent le début et la fin du texte dont nous modifions les paramètres. Étiqueter a trois attributs : visage, taille et couleur, qui spécifient respectivement la police, la taille et la couleur du texte. Dans ce didacticiel, nous examinerons de plus près les polices.
À changer la police du texte en html– fichier, il faut enfermer le texte dans des balises Et et assurez-vous de postuler attribut de visage. Cela ressemble à ceci :
notre texte
Les noms de polices peuvent être trouvés dans Éditeur de mots. La liste est assez longue. Prenons un exemple de la façon de changer la police du texte en HTML et écrivons le code suivant :
Ce texte sera écrit dans la police par défaut
Ce texte sera écrit en police Batang
Ce texte sera écrit en police Comics Sans MS
Enregistrons le fichier sous n'importe quel nom et voyons ce qui se passe :
Comme nous pouvons le voir, tout a fonctionné : le premier paragraphe a la police par défaut, dans le deuxième paragraphe nous définissons la police Batang et dans le troisième le texte est affiché dans la police Comic Sans MS. En principe, tout est simple et compréhensible, mais il y a une remarque. Étant donné que la police spécifiée n'est pas enregistrée dans le fichier HTML, rien ne garantit qu'elle s'affichera comme prévu dans le navigateur. Nous ne pouvons pas être sûrs à 100 % que l’ordinateur du visiteur dispose de la police que nous avons spécifiée, surtout si cette police n’est pas standard. Donc dans attribut de visage Il est préférable d'indiquer environ trois noms de polices, qui sont répertoriés séparés par des virgules, afin qu'au moins l'un d'entre eux soit affiché avec certitude. Regardons un exemple :
Ce texte doit apparaître en Batang ou Comic Sans MS, ou certainement en Arial.
Regardons le résultat :
Le texte était affiché dans la police Batang, que nous avons spécifiée dans l'attribut visage en premier. Si cette police ne fonctionne pas dans le navigateur du visiteur, alors la deuxième police fonctionnera - Comic Sans MS, et si cette police ne fonctionne pas, alors le texte sera certainement affiché en police Arial.
Autres options de police
Et pour commencer, examinons d’autres options de police. Dans la première leçon, nous avons déjà examiné les balises qui mettent en gras et en italique, ce sont des balises Et respectivement. Examinons quelques balises supplémentaires qui définissent le style de la police :
Soulignons le texteRayons cette partie
et mettez l'exposant au mot haut
Voyons le résultat :
Nous avons défini l'intégralité du texte sur la police Comic Sans MS, la première ligne a été soulignée à l'aide de la balise , rappelez-vous dès la première leçon que la balise
transferts vers nouvelle ligne, la deuxième ligne est barrée grâce à la balise et dans la dernière ligne, nous mettons le mot "top" en exposant. Rien de compliqué ! Vous pouvez expérimenter vous-même le reste des balises. Si tout est clair pour vous, vous pouvez passer à la leçon suivante, dans laquelle nous verrons comment définir la taille du texte, mais si vous avez encore des questions, jetez un œil vidéo détaillée Cette leçon.