Comment définir la couleur de la police en HTML (trois façons)

PHPz
Libérer: 2023-04-13 14:31:39
original
65550 Les gens l'ont consulté

HTML est un langage de balisage de pages Web courant. Ses éléments de base incluent du texte, des images, de l'audio et d'autres formes. Parmi eux, le texte est l’un des éléments de base pour transmettre des informations sur la page. Différentes polices et couleurs peuvent offrir aux visiteurs des expériences visuelles différentes et améliorer l’esthétique et la lisibilité de la page.

Le réglage de la couleur de la police HTML peut être réalisé via des feuilles de style CSS. Les feuilles de style CSS peuvent être placées séparément du code HTML, améliorant ainsi la flexibilité et la maintenabilité de la mise en page. Voici comment définir la couleur de la police :

1. Définissez la couleur de la police dans le style en ligne

Ajoutez l'attribut style directement à la balise HTML, puis ajoutez l'attribut color à l'attribut style. Par exemple :

<p style="color:red;">这是一段红色的文字</p>
Copier après la connexion

Parmi eux, la valeur de l'attribut de couleur peut être le nom de la couleur, la valeur de couleur hexadécimale, la valeur de couleur RVB, la valeur de couleur HSL. Les noms de couleurs couramment utilisés incluent le rouge, le vert, le bleu, le noir, le blanc, etc. Jetons un coup d'œil à la table des couleurs couramment utilisée :

Nom de la couleur Valeur de la couleur
noir #000000
blanc #FFFFFF
argent # C0C0C0
gris #808080
rouge #FF0000
vert #008000
bleu #0000 FF

2. Définissez la couleur de la police en interne. feuille de style

Ajoutez une balise de style à la section d'en-tête du document HTML, puis définissez les éléments et les valeurs d'attribut de couleur qui doivent être colorés dans la balise de style. Par exemple :

<head>
  <style>
    p{
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色的文字</p>
</body>
Copier après la connexion

De cette façon, tous les éléments p définis dans le corps appliqueront automatiquement l'attribut color dans la feuille de style p{} et le définiront sur bleu. De cette façon, vous pouvez définir la couleur de plusieurs éléments par lots.

3. Définir la couleur de la police avec une feuille de style externe

Créez un fichier de feuille de style indépendant, définissez les éléments qui doivent être colorés en tant que noms de classe, puis liez le fichier de feuille de style dans le document HTML. Par exemple :

Définissez le nom de la classe dans le fichier de feuille de style style.css :

.title{
  color: red;
}
Copier après la connexion

Introduisez cette feuille de style dans le document HTML :

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1 class="title">这是一段红色的标题</h1>
</body>
Copier après la connexion

De cette façon, après avoir ajouté class="title" à l'élément title h1 de le document HTML, il appliquera automatiquement l'attribut de couleur dans la feuille de style et le définira sur rouge.

Pour résumer, il existe de nombreuses façons de définir la couleur des polices HTML. La méthode à utiliser dépend des besoins de la page et des préférences personnelles. Mais quelle que soit la méthode utilisée, l’esthétique globale et la lisibilité de la page doivent être prises en compte, afin d’obtenir une correspondance raisonnable et une division claire du travail. J'espère que cet article sera utile aux lecteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!