Comment changer la couleur d'arrière-plan en HTML ?
Dans cet article, nous utiliserons des exemples C# pour montrer différentes façons de changer la couleur d’arrière-plan dans les fichiers HTML à l’aide de la bibliothèque Aspose.HTML for .NET.
Il est facile de modifier la couleur d’arrière-plan d’une page web grâce à la propriété CSS background-color (couleur d’arrière-plan). 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 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.
Pour plus d’informations sur l’utilisation des codes de couleur HTML, veuillez consulter l’article Codes de couleur HTML. Dans la section Couleur d’arrière-plan, vous trouverez des exemples de code HTML permettant de modifier la couleur d’arrière-plan.
Modifier la couleur d’arrière-plan d’un élément spécifique
Pour modifier la couleur d’arrière-plan d’un élément HTML à l’aide de l’API Aspose.HTML, vous devez suivre quelques étapes :
- Charger un fichier HTML existant.
- Déterminez l’élément dont vous souhaitez modifier la couleur d’arrière-plan et recherchez cet élément pour lui attribuer un attribut de style. Utilisez la méthode
GetElementsByTagName(
name) de la classe Element qui renvoie les éléments HTML avec un nom de balise donné. - Définir l’attribut
styleavec la propriétébackground-color: utiliser la propriété Style de la classe HTMLElement. - Enregistrer le document HTML modifié.
Vous pouvez définir ou modifier la couleur d’arrière-plan de divers éléments HTML tels que <p>, <h1>…<h6>, <div> ou <table>. L’exemple C# suivant montre la modification de la couleur d’arrière-plan pour le premier élément <p> :
Exemple en C#
1// Change background color for HTML paragraph using C#
2
3// Prepare output path for document saving
4string savePath = Path.Combine(OutputDir, "change-background-color-p-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 paragraph element to set a style attribute
13HTMLElement paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
14
15// Set the style attribute with background-color property
16paragraph.Style.BackgroundColor = "#e5f3fd";
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));Code JavaScript
1<script>
2 // Find the paragraph element to set a style attribute
3 var paragraph = document.getElementsByTagName("p")[0];
4
5 // Set the style attribute with background-color property
6 paragraph.style.backgroundColor = "#e5f3fd";
7</script>La figure illustre les résultats de la modification de la couleur d’arrière-plan du premier paragraphe du fichier HTML à l’aide d’une feuille de style CSS en ligne :
Changer la couleur d’arrière-plan de toute la page Web
Vous pouvez modifier la couleur d’arrière-plan en utilisant l’attribut style en ligne ou en utilisant le CSS interne.
Modifier la couleur d’arrière-plan à l’aide de CSS en ligne
Si vous souhaitez modifier la couleur de l’ensemble du document HTML, vous devez utiliser la propriété background-color de l’attribut style dans la balise d’ouverture de la section <body>.
Exemple en C#
1// Change background color with inline CSS in C#
2
3// Prepare output path for document saving
4string savePath = Path.Combine(OutputDir, "change-background-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 body element to set a style attribute
13HTMLElement body = (HTMLElement)document.GetElementsByTagName("body").First();
14
15// Set the style attribute with background-color property
16body.Style.BackgroundColor = "#e5f3fd";
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));Code JavaScript
1<script>
2 // Find the body element to set a style attribute
3 var body = document.getElementsByTagName("body")[0];
4
5 // Set style attribute with background-color property
6 body.style.backgroundColor = "#e5f3fd";
7</script>You can download the complete examples and data files from GitHub.
Modifier la couleur d’arrière-plan à l’aide d’une feuille de style CSS interne
Le même résultat de colorisation de l’arrière-plan peut être obtenu en utilisant le CSS interne, comme le montre l’exemple de code HTML suivant :
1<head>
2<style>
3 body {
4 background-color: rgb(229, 243, 253);
5 }
6</style>
7</head>Note: Gardez à l’esprit que l’utilisation d’un attribut style remplace tout style défini dans la balise HTML <style> ou dans une feuille de style externe.
L’exemple C# suivant montre comment réaliser un CSS interne pour changer la couleur d’arrière-plan d’un fichier HTML entier. Faites quelques pas :
- Charger un fichier HTML existant.
- Trouvez l’élément
<body>et supprimez la propriétébackground-colorde l’attributstyle. Note: Si la couleur d’arrière-plan est définie en utilisant l’attributstyleen ligne, cette étape est nécessaire car l’utilisation de l’attributstylea la priorité sur les CSS internes et externes. - Créez un élément
<style>et attribuez la valeurbackground-colorà l’élément<body>. - Trouvez l’élément
<head>dans votre document et ajoutez-y l’élément<style>. - Enregistrer le document HTML modifié.
Exemple en C#
1// Change background color for HTML using internal CSS - C#
2
3// Prepare output path for document saving
4string savePath = Path.Combine(OutputDir, "change-background-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// Find the body element
13HTMLElement body = (HTMLElement)document.GetElementsByTagName("body").First();
14
15// Remove the background-color property from the style attribute
16body.Style.RemoveProperty("background-color");
17
18// Create a style element and assign the background-color value for body element
19Element style = document.CreateElement("style");
20style.TextContent = "body { background-color: rgb(229, 243, 253) }";
21
22// Find the document head element and append style element to the head
23Element head = document.GetElementsByTagName("head").First();
24head.AppendChild(style);
25
26// Save the HTML document
27document.Save(Path.Combine(savePath));Code JavaScript
1<script>
2 // Find the body element
3 var body = document.getElementsByTagName("body")[0];
4
5 // Remove the background-color property from style attribute
6 body.style.removeProperty("background-color");
7
8 // Create a style element and assign the background-color value for body element
9 var style = document.createElement("style");
10 style.textContent = "body { background-color: rgb(229, 243, 253) }";
11
12 // Find the document head element and append style element to the head
13 var head = document.getElementsByTagName("head")[0];
14 head.appendChild(style);
15</script>La figure montre deux fragments du fichier HTML avant (a) et après (b) la modification de la couleur d’arrière-plan pour l’ensemble du document :
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.
