Nous avons tous utilisé le célèbre éditeur de texte Word. 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 consultés dans l'éditeur Word. 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. Par conséquent, dans l'attribut face, 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 en premier dans l'attribut face. 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
fait une 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 des questions, regardez la vidéo détaillée de cette leçon.
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 color de la balise :
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. Vous pouvez voir la liste complète des couleurs 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 dans le code HTML, ils utilisent souvent un 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 code couleur 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 définissons le texte avec les mêmes couleurs que dans le premier exemple, mais ici nous avons utilisé le système de nombres hexadécimaux, ou en d'autres termes, nous définissons 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
Comment changer la couleur de la police en HTML
Si vous avez des connaissances en technologies Web, sachez que tout le balisage et le contenu d'un document sont contenus dans un fichier HTML et que le fichier de style CSS stocke les styles qui déterminent l'apparence des divers éléments. C'est donc du CSS que nous devons utiliser pour changer la couleur de la police et tout le reste.
Il existe des balises en HTML qui permettent d'appliquer certains effets au texte, mais il faut admettre que proposer des centaines de balises pour chaque nuance ne serait pas tout à fait raisonnable. En CSS, vous pouvez contrôler cela beaucoup plus facilement. Par exemple, voici comment définir la couleur de la police de l'élément de corps HTML, c'est-à-dire une balise qui inclut tout le contenu de la page affichée à l'écran.
corps (couleur : rouge ; )
corps ( La couleur rouge; |
Nous avons attribué la couleur rouge au corps de la page. Les paragraphes, listes, titres et tous les autres éléments le recevront. Cela se produira jusqu'à ce que les styles de ces éléments soient redéfinis par rapport aux autres.
Formats d'enregistrement couleur
Peut-être avez-vous des connaissances en conception de sites Web ? Dans ce cas, sachez qu’il existe différents modes de couleurs. Par exemple, RVB, RVBA, HSL, Hex, etc. Bien entendu, le moyen le plus simple de donner le ton est simplement d’écrire un mot-clé. Nous avons fait cela dans l'exemple ci-dessus, la valeur red rend les lettres rouge, bleu – bleu, marron – marron. Ce ne sont que des noms de fleurs en anglais.
La seule chose que vous devez savoir dans ce cas est le nom de la couleur souhaitée. Vous pouvez les visualiser sur Internet dans n'importe quel tableau. La prochaine façon courante de spécifier une couleur consiste à écrire son code hexadécimal. C'est ce qu'on appelle le format hexadécimal. Exemples:
p( color: #000; ) /* Le texte des paragraphes sera noir. */ table( color: #fff; ) /* Le contenu des tableaux sera blanc. */
Comme vous pouvez le constater, vous devez noter la grille, suivie du code couleur. Comment le reconnaître ? Par exemple, vous pouvez ouvrir Photoshop ou tout autre éditeur graphique dans lequel, lors de la sélection d'une couleur, son code hexadécimal est affiché. Vous pouvez également utiliser le service en ligne.
RVB est un autre format d'enregistrement populaire. Cela signifie simplement rouge, vert, bleu. La couleur dans ce format est définie comme ceci :
#footer( couleur : rgb(234, 22, 56); )
#bas de page( couleur : RVB (234, 22, 56) ; |
L'élément avec le pied de page id recevra la couleur spécifiée. La part du rouge sera de 234, du vert – 22, du bleu – 56. Ces valeurs peuvent s'écrire de 0 à 255. En conséquence, notre teinte sera plus proche du rouge. Dans Paint, vous pouvez ajouter des couleurs à votre palette en modifiant la saturation des trois couleurs primaires.
L’avantage de cette méthode est que vous pouvez choisir parmi des millions de couleurs en modifiant simplement trois chiffres. Lorsque vous écrivez à l’aide de mots-clés, vous n’aurez que quelques centaines de couleurs dans votre arsenal.
Rgba - texte translucide !
Oui, il s'agit d'un nouveau mode d'enregistrement disponible depuis longtemps dans les éditeurs graphiques, mais il est apparu relativement récemment dans le web design. C'est écrit ainsi :
une( rgba(255, 12, 22, 0.5); )
rgba(255, 12, 22, 0,5); |
Le dernier numéro de l'entrée définit la transparence. Il peut être écrit de 0 à 1, où 1 est un texte complètement opaque, c'est-à-dire le comportement par défaut. Dans ce cas, tous les liens deviendront rouges, mais en raison de la transparence, la luminosité de la couleur sera bien moindre, et s'il y a un autre arrière-plan ou élément sous le lien, il sera visible.
Mauvaise façon de définir la couleur
HTML a un attribut de couleur obsolète et il pourrait être utilisé pour enregistrer la couleur du texte à l'aide d'un mot-clé. Maintenant, cela peut même ne pas fonctionner dans les navigateurs modernes et, en général, cette méthode viole les normes Web généralement acceptées. Et c'est aussi gênant.
Comment déterminer la couleur d'un fragment arbitraire
D'accord, nous parlons de la couleur de la police des paragraphes, des liens et des tableaux, mais ce sont des éléments solides, mais que se passe-t-il si vous devez définir une couleur pour une phrase, un mot, une lettre, après tout ?
Nous enfermons simplement le fragment souhaité dans des balises span. Nous écrivons un attribut de classe à l'intérieur de la balise, auquel nous définissons une valeur arbitraire mais compréhensible. Par exemple, comme ceci :
Ça y est, il ne reste plus qu'à accéder au sélecteur dans le css.
De l'auteur : Bienvenue sur les pages du blog Webformyself. Dans cet article, je voudrais répondre à la question de savoir comment définir une police en HTML. Certaines personnes s’y prennent encore mal, il est donc important d’examiner la question de manière plus approfondie.
Comment la police était définie auparavant
Auparavant, HTML utilisait une balise de police appariée spéciale, qui servait de conteneur pour modifier les paramètres de police, tels que la police de caractères, la couleur et la taille. Aujourd’hui, cette approche est fondamentalement fausse. Pourquoi? Les standards du Web précisent que l'apparence d'une page ne doit pas être spécifiée dans le balisage HTML. De plus, la balise n'est entièrement prise en charge que dans une très ancienne version de HTML - HTML 3.
Définir correctement la police en HTML
Aujourd'hui, il vaut la peine d'utiliser exclusivement les capacités CSS. Ce langage a été créé précisément pour déterminer l'apparence à travers lui. De plus, CSS possède de nombreuses autres propriétés qui affectent l’apparence du texte. Examinons un peu chacun d'eux :
Le style de police. Définit le style du texte. Prend les valeurs suivantes :
Variante de police. La propriété spécifie comment l'orthographe des lettres minuscules doit être interprétée. N'a que deux significations :
Normal – comportement normal.
Petites majuscules : toutes les lettres minuscules sont converties en lettres majuscules et leur taille est légèrement réduite par rapport à la police normale.
Poids de la police. Détermine la gras du texte. La valeur peut être spécifiée par des mots-clés ou une valeur numérique. Examinons toutes les options :
Normal – texte normal
Gras – texte en gras
Plus gras – apparaîtra plus gras que l’élément parent.
Plus légères – les lettres auront moins d’audace que leur parent.
C'est si simple. De plus, il est possible de définir la valeur sous forme de nombres de 100 à 900, 900 étant le plus gras. Par exemple, la valeur normale correspond à 400 et la valeur en gras correspond à 700.
Malheureusement, la plupart des navigateurs ne reconnaissent pas ces valeurs numériques et ne peuvent utiliser que deux valeurs : normale et grasse. Pour l'expérience, j'ai créé 9 paragraphes et donné à chacun un poids de texte différent - de 100 à 900. Ensuite, j'ai ouvert cette page Web dans différents navigateurs et aucun d'entre eux n'affichait des styles différents. Conclusion : il vaut mieux ne pas utiliser de valeurs numériques.
Taille de police. Cette propriété spécifie la taille des lettres. La taille peut être spécifiée en diverses valeurs relatives et absolues. Le plus souvent, la taille est spécifiée en pixels, en unités em relatives et en pourcentages. Si vous souhaitez en savoir plus sur la définition de la taille en CSS, lisez celui-ci, où tout est décrit plus en détail.
Famille de polices. Peut-être la propriété la plus fondamentale qui détermine la famille ou le nom spécifique de la police utilisée. Si vous utilisez un nom spécifique, vous devez vous assurer que la police spécifiée peut être trouvée sur les ordinateurs de tous les utilisateurs. Pour plus de fiabilité, vous devez spécifier une option alternative ou une famille entière séparée par des virgules. Les polices sont réparties dans les familles suivantes :
Chaque famille répond à des besoins différents. Par exemple, la fantaisie est souvent utilisée pour concevoir divers en-têtes, et le monospace est utilisé pour générer du code machine, etc. Vous pouvez connaître plus précisément les noms des polices, par exemple dans un éditeur de texte ou dans Photoshop.
Notation abrégée
Tout ce dont nous avons discuté ci-dessus peut être très facilement écrit sur une seule ligne en utilisant la merveilleuse propriété font, qui rassemble tous les paramètres. Vous devez l'écrire dans l'ordre suivant :
Police : style de police | variante de police | poids de la police | taille de police | famille de polices;
Police : style de police | police - variante | police - poids | taille de police | famille de polices ; |
Si vous n'avez pas besoin de spécifier un paramètre, celui-ci est simplement omis. Seules la taille et la famille de police sont requises ici ; tout le reste est facultatif s’il n’est pas nécessaire. L'utilisation de la notation abrégée vous permet de réduire considérablement le code en CSS. Utilisez-le car c'est une bonne optimisation pour le site.
Comment définir la police en HTML sur différents éléments
Donc, pour une raison quelconque, nous nous sommes laissés emporter par la description de toutes les propriétés de la police. Il s’agit d’une information très importante, mais comment la poser correctement ? Utilisez les bons sélecteurs pour atteindre les bons éléments. Ci-dessous, je propose quelques exemples :
p a( famille de polices : Verdana, sans-serif; )
Pour les données tabulaires, de nombreux paramètres de police sont définis : lettres majuscules réduites, style gras, taille de police et nom.
Leçon 7. Couleurs du texte et de l'arrière-plan en HTML.
Dates : 2008-12-05
Comment définir la couleur de l’arrière-plan et du texte d’une page Web ?
Par défaut, la couleur du texte et, en général, de toute police sur les pages Web est toujours noir (#000000 ). Mais nous pouvons toujours définir absolument n'importe quelle couleur que nous aimons et qui semble décente ou qui convient mieux à la conception d'un site particulier.
Définir la couleur du texte
En HTML, la couleur du texte, de la police, de l'arrière-plan et d'autres éléments peut être définie de deux manières :
1. Méthode 1. Dans les balises appariées
l'attribut est écrit
Commentaires sur cet article (leçon) :
Andreï ! Quel merveilleux site vous avez ! Je l'utilise régulièrement depuis la deuxième semaine maintenant : j'étudie vos cours et tutoriels vidéo ; Je lis votre littérature et télécharge des programmes ; Je fais mes premiers pas en programmation web ! Et surtout, je peux le faire !!! Mais je ne suis pas du tout physicien, mais parolier ! Et quiconque visite mon site littéraire peut en être convaincu : « POÈMES D'OLEG GUZ » Mes coordonnées : email : [email protégé] site Web : http://sites.google.com/site/stihiolegguz/
vérifie attentivement le code
J'ai essayé de changer la couleur de fond et ça ne marche pas ! Comment changer la couleur du fond ?