Comment changer la couleur du texte en HTML ?
Dans cet article, nous utiliserons des exemples C# pour montrer différentes façons de changer la couleur du texte en HTML en utilisant Aspose.HTML for .NET.
Il est facile de modifier la couleur du texte d’une page web à l’aide de la propriété CSS color. Il existe plusieurs façons de définir la valeur de cette propriété. Vous pouvez utiliser des CSS en ligne, internes ou externes, et les valeurs de couleur HTML peuvent être spécifiées sous la forme de noms de couleur anglais standard ou de valeurs HEX, RGB, RGBA, HSL et HSLA. Dans les exemples ci-dessous, nous utiliserons les codes de couleur HEX et RGB car ce sont les plus utilisés.
Si vous souhaitez en savoir plus sur les codes de couleur RVB, RGBA, HSL, HSLA et HEX, veuillez consulter l’article Codes de couleur HTML. Des exemples de code HTML sur la façon de changer la couleur du texte sont présentés dans l’article Travail avec les couleurs HTML.
Modifier la couleur du texte à l’aide de CSS en ligne
Vous pouvez modifier la couleur du texte à l’intérieur d’une balise HTML en utilisant la propriété color de l’attribut style. C’est ce qu’on appelle le CSS en ligne. Le CSS en ligne vous permet d’appliquer un style personnalisé à un élément HTML à la fois. Vous définissez le CSS d’un élément HTML à l’aide de l’attribut style et de toutes les propriétés CSS définies à l’intérieur de celui-ci.
Par exemple, dans l’extrait de code suivant, vous pouvez voir comment spécifier la propriété CSS color pour l’élément HTML <p> dans le fichier file.html existant. Procédez en quelques étapes :
- Charger un fichier HTML existant.
- Trouver, par exemple, le premier élément d’un paragraphe pour définir un attribut de style. Utilisez la méthode
GetElementsByTagName(
name) de la classe Element qui renvoie le premier élément avec un nom de balise donné dans l’ordre du document. - Utilisez la propriété
Style de la classe
HTMLElement pour définir l’attribut
styleavec la propriétécolor. - Enregistrer le document HTML modifié.
Code C#
1// Change HTML paragraph color using C#
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "change-paragraph-color-inline-css.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "file.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Find the first paragraph element to set a style attribute
13HTMLElement paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
14
15// Set the style attribute with color property
16paragraph.Style.Color = "#8B0000";
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));Code JavaScript
1<script>
2 // Find the first paragraph element to set a style attribute
3 var paragraph = document.getElementsByTagName("p")[0];
4
5 // Set the style attribute with color property
6 paragraph.style.color = "#8B0000";
7</script>En conséquence, le texte du premier paragraphe du fichier HTML sera recoloré en rouge foncé #8B0000 (pour voir la figure a, veuillez faire défiler la page vers le bas).
Vous pouvez télécharger les exemples complets et les fichiers de données sur GitHub.
Modifier la couleur du texte à l’aide d’une feuille de style CSS interne
Le CSS interne est utilisé pour appliquer des propriétés de style à des pages individuelles. Vous pouvez appliquer des feuilles de style CSS internes en plaçant l’élément <style> dans la section <head> d’une page. Par exemple, vous souhaitez modifier la couleur de tous les paragraphes d’une page web. Pour ce faire, vous devez ajouter p {color : #8B0000 ; } à la section head d’un fichier HTML. Procédez en quelques étapes :
- Charger un fichier HTML existant.
- Créez un élément
<style>et attribuez la valeur de la couleur du texte à tous les éléments du paragraphe. Utilisez la méthode CreateElement(localName) de la classe Element qui crée un élément du type spécifié. - Trouvez l’élément
<head>du document et ajoutez-y l’élément<style>. - Enregistrer le document HTML modifié.
Code C#
1// Change HTML text color using C#
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "change-paragraph-color-internal-css.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "file.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a style element and assign the text color value for all paragraph elements
13Element style = document.CreateElement("style");
14style.TextContent = "p { color:#8B0000 }";
15
16// Find the document head element and append style element to the head
17Element head = document.GetElementsByTagName("head").First();
18head.AppendChild(style);
19
20// Save the HTML document to a file
21document.Save(Path.Combine(savePath));Code JavaScript
1<script>
2 // Create a style element and assign the text color value for all paragraph elements
3 var style = document.createElement("style");
4 style.textContent = "p { color:#8B0000 }";
5
6 // Find the document's <head> element and add a <style> element to it
7 var head = document.getElementsByTagName("head")[0];
8 head.appendChild(style);
9</script>Pour modifier la couleur du texte, vous pouvez utiliser les exemples C# présentés dans cet article avec les éléments HTML <p>, <h1>, ou <h2>, etc. N’oubliez pas que l’utilisation de l’attribut style (CSS en ligne) remplace tout style spécifié dans la balise HTML <style> ou dans une feuille de style externe.
La figure illustre les résultats de la modification de la couleur du texte en fonction de l’utilisation de l’exemple CSS en ligne (a) et de l’exemple CSS interne (b) :
Aspose.HTML propose des applications Web HTML gratuites qui constituent une collection en ligne de convertisseurs, de fusions, d’outils SEO, de générateurs de code HTML, d’outils URL, et bien plus encore. Les applications fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur web et ne nécessitent aucune installation de logiciel supplémentaire. C’est un moyen rapide et facile de résoudre efficacement vos tâches liées au HTML.
