¿Cómo cambiar el color del texto en HTML? Ejemplos de C#
En este artículo, usaremos ejemplos de C# para mostrar diferentes formas de cambiar el color del texto en HTML usando la biblioteca Aspose.HTML for .NET.
Cambiar el color del texto en una página web es fácil con la propiedad de color CSS. Hay algunas formas de establecer el valor de esta propiedad. Puede utilizar CSS en línea, interno o externo, y los valores de color HTML se pueden especificar como nombres de colores estándar en inglés o con valores HEX, RGB, RGBA, HSL y HSLA. En los ejemplos siguientes, usaremos códigos de color HEX y RGB porque son los más utilizados.
Si desea obtener más información sobre los códigos de color RGB, RGBA, HSL, HSLA y HEX, visite el artículo Códigos de color HTML. Puede encontrar ejemplos de código HTML sobre cómo cambiar el color del texto en el artículo Trabajar con color HTML.
Cambiar el color del texto usando CSS en línea
Puede cambiar el color del texto dentro de una etiqueta HTML usando la propiedad color del atributo style. Esto se conoce como CSS en línea. CSS en línea le permite aplicar estilos personalizados a un elemento HTML a la vez. El CSS para un elemento HTML se configura utilizando el atributo de estilo con las propiedades CSS definidas en él.
Por ejemplo, en el siguiente fragmento de código, puede ver cómo especificar la propiedad CSS color para el elemento HTML <p> en el archivo file.html existente. Tome algunos pasos:
- Cargue un archivo HTML existente.
- Busque, por ejemplo, el primer elemento de párrafo para establecer un atributo de estilo. Utilice el método
GetElementsByTagName(
name) de la clase Element que devuelve el primer elemento con un nombre de etiqueta determinado en el orden del documento. - Utilice la propiedad
Style de la clase
HTMLElement para establecer el atributo
stylecon la propiedadcolor. - Guarde el documento HTML modificado.
Código c#
1// Prepare output path for HTML document saving
2string savePath = Path.Combine(OutputDir, "change-paragraph-color-inline-css.html");
3
4// Prepare path to source HTML file
5string documentPath = Path.Combine(DataDir, "file.html");
6
7// Create an instance of an HTML document
8var document = new HTMLDocument(documentPath);
9
10// Find the first paragraph element to set a style attribute
11var paragraph = (HTMLElement)document.GetElementsByTagName("p").First();
12
13// Set the style attribute with color property
14paragraph.Style.Color = "#8B0000";
15
16// Save the HTML document to a file
17document.Save(Path.Combine(savePath));Código 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>Como resultado, el texto del primer párrafo del archivo HTML cambiará a color rojo oscuro #8B0000 (para ver la figura a, desplácese hacia abajo en la página).
Puede descargar los ejemplos completos y los archivos de datos desde GitHub.
Cambiar el color del texto usando CSS interno
El CSS interno es popular para aplicar propiedades de estilo a páginas individuales. Puede aplicar hojas de estilo CSS internas colocando el elemento <style> en la sección <head> de una página. Por ejemplo, desea cambiar el color de todos los párrafos de una página web. Para hacer esto, debes agregar p {color: #8B0000; } a la sección principal de un archivo HTML. Tome algunos pasos:
- Cargue un archivo HTML existente.
- Cree un elemento
<style>y asigne el valor de color del texto para todos los elementos del párrafo. Utilice el método CreateElement(localName) de la clase Element que crea un elemento del tipo especificado. - Busque el elemento
<head>del documento y agréguele el elemento<style>. - Guarde el documento HTML modificado.
Código c#
1// Prepare output path for HTML document saving
2string savePath = Path.Combine(OutputDir, "change-paragraph-color-internal-css.html");
3
4// Prepare path to source HTML file
5string documentPath = Path.Combine(DataDir, "file.html");
6
7// Create an instance of an HTML document
8var document = new HTMLDocument(documentPath);
9
10// Create a style element and assign the text color value for all paragraph elements
11var style = document.CreateElement("style");
12style.TextContent = "p { color:#8B0000 }";
13
14// Find the document head element and append style element to the head
15var head = document.GetElementsByTagName("head").First();
16head.AppendChild(style);
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));Código 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>Para cambiar el color del texto, puede usar los ejemplos de C# considerados en este artículo con elementos HTML <p>, <h1> o <h2>, etc. Tenga en cuenta que usar el atributo de estilo (CSS en línea ) anula cualquier estilo especificado en la etiqueta HTML <style> o en una hoja de estilos externa.
La figura ilustra los resultados de cambiar el color del texto según el uso del ejemplo de CSS en línea (a) y el ejemplo de CSS interno (b):
Aspose.HTML ofrece Aplicaciones web HTML gratuitas que son una colección en línea de convertidores, fusiones, herramientas de SEO, generadores de código HTML, herramientas de URL y más. Las aplicaciones funcionan en cualquier sistema operativo con un navegador web y no requieren ninguna instalación de software adicional. Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con HTML.
