¿Cómo cambiar el color del borde en HTML? Ejemplos de C#

En este artículo, usaremos ejemplos de C# para mostrar diferentes formas de configurar o cambiar el color del borde en archivos HTML usando la biblioteca Aspose.HTML for .NET.

Establecer o cambiar el color del borde del elemento HTML es fácil con la propiedad CSS border-color. 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 color estándar o con valores HEX, RGB, RGBA, HSL y HSLA.

Para obtener más información sobre cómo utilizar códigos de color HTML, visite el artículo Códigos de color HTML. En la sección Color del borde, encontrará ejemplos de código HTML sobre cómo cambiar el color del borde.

Cambiar el color del borde usando CSS en línea

Puede establecer o cambiar el color del borde utilizando el atributo style en línea - CSS en línea (inline CSS). La propiedad border-color solo funcionará cuando se defina primero la propiedad border-style, que se utiliza para establecer los bordes. Esta propiedad no funcionará sola. Si esta propiedad no está establecida, hereda el color del elemento. La propiedad border-color acepta nombres de colores, valores RGB, RGBA, HEX, HSL o HSLA. Para cambiar el color del borde del elemento HTML usando la API Aspose.HTML, debe seguir algunos pasos:

1. Cargue un archivo HTML existente.
2. Cree una instancia de un documento HTML.
3. Determine para qué elemento desea cambiar el color del borde y busque este elemento para establecerle un atributo de estilo. Utilice el método GetElementsByTagName(name) de la clase Element que devuelve un elemento HTML con un nombre de etiqueta determinado.
4. Establezca el atributo style con las propiedades border-style y border-color: use la propiedad Style de la clase HTMLElement.
5. Guarde el documento HTML modificado.

Puede establecer o cambiar el color del borde para varios elementos HTML como <p>, <h1>…<h6>, <div> o <table>. El siguiente ejemplo de C# muestra el cambio de color del borde para el elemento <h1>:

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
var document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
var header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.Color = "#8B0000";
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "rgb(220,30,100)";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Cabe señalar que en este ejemplo de С#, no solo se cambió el color del borde del elemento <h1>, sino también el color del texto de este elemento (se agregó la propiedad color).

Puede descargar los ejemplos completos y los archivos de datos desde GitHub.

Cambiar color en cuatro lados del borde

La propiedad border-color establece el color de los cuatro bordes de un elemento. Si la propiedad border-color tiene un solo valor, entonces todo el borde se pintará con este color. Pero puedes establecer diferentes valores de color para los bordes superior, derecho, inferior e izquierdo. Por ejemplo, si configura el border-color: red blue green gray, el borde superior es rojo, el borde derecho es azul, el borde inferior es verde y el borde izquierdo es gris.

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-four-border-color.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "change-border-color.html");

// Create an instance of an HTML document
var document = new HTMLDocument(documentPath);

// Find the h1 element to set a style attribute
var header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Set the style attribute properties
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "red blue green gray";

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

La figura ilustra los resultados de cambiar el color del borde para el elemento <h1> usando CSS en línea: a) color cambiado para todo el borde; b) cambió de color para cada uno de los cuatro lados del borde.

Cambiar el color del borde usando CSS interno

Se puede lograr el mismo resultado de coloración de bordes usando CSS interno, como se muestra en el siguiente ejemplo de código HTML:

<head>
<style>
	h1 {
	border-color: rgb(220,30,100);
	}
</style>
</head>

Nota: Tenga en cuenta que el uso de un atributo style anula cualquier estilo establecido en la etiqueta HTML <style> o en la hoja de estilos externa.

El siguiente ejemplo de C# demuestra cómo implementar CSS interno para cambiar el color del borde. Tome algunos pasos:

1. Cargue un archivo HTML existente.
2. Cree una instancia de un documento HTML.
3. Cree un elemento <style> y asigne los valores border-style y border-color para el elemento <h1>.
4. Busque el elemento <head> en su documento y agregue el elemento <style>.
5. Guarde el documento HTML modificado.

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "file.html");

// Create an instance of an HTML document
var document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for h1 element
var style = document.CreateElement("style");
style.TextContent = "h1 {color:DarkRed; border-style:solid; border-color:rgb(220,30,100) }";

// Find the document head element and append style element to the head
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

La ejecución del código С# que hemos proporcionado anteriormente dará como resultado que el elemento <style> aparezca en el <head> del archivo de salida, que se ilustra con el siguiente código HTML:

<head>
<style>
	h1 { 
		color: darkred;
		border-top-style: solid;
		border-right-style: solid;
		border-bottom-style: solid;
		border-left-style: solid;
		border-top-color: rgb(220, 30, 100);
		border-right-color: rgb(220, 30, 100);
		border-bottom-color: rgb(220, 30, 100);
		border-left-color: rgb(220, 30, 100); }
</style>
</head>

El resultado es similar al que se muestra en la Figura (a) anterior.

Cambiar el color del borde de la tabla

Si desea cambiar el color del borde de la tabla, puede utilizar CSS interno o en línea.

Puede aplicar el atributo style con el elemento HTML <table>. Tenga en cuenta que el uso de un atributo de estilo anula cualquier estilo establecido en la etiqueta HTML <style> o en la hoja de estilos externa. Para cambiar el color del borde de la tabla usando el atributo de estilo CSS en línea, puede usar el método QuerySelector() para navegar por DOM y encontrar el elemento <table>. Luego establezca el atributo de estilo con las propiedades requeridas para el elemento <table>:

C# Ejemplo 1: uso de CSS en línea

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-inline-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
var document = new HTMLDocument(documentPath);

// Create a CSS Selector that selects the first table element
var element = document.QuerySelector("table");

// Set style attribute with properties for the selected element
element.SetAttribute("style", "border: 2px #0000ff solid");

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Código JavaScript 1

<script>
	// Create a CSS Selector that selects the first table element
    var element = document.querySelector("table");

    // Set style attribute with properties for the selected element
    element.setAttribute("style", "border: 2px #0000ff solid");
</script>

Se puede lograr el mismo resultado de coloración del borde de la tabla utilizando CSS interno, como se muestra en el siguiente ejemplo 2 de código C#:

C# Ejemplo 2: uso de CSS interno

// Prepare an output path for a document saving
string savePath = Path.Combine(OutputDir, "change-table-border-color-internal-css.html");

// Prepare path to source HTML file
string documentPath = Path.Combine(DataDir, "table.html");

// Create an instance of an HTML document
var document = new HTMLDocument(documentPath);

// Create a style element and assign the color border-style and border-color values for table element
var style = document.CreateElement("style");
style.TextContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

// Find the document head element and append style element to the head
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Save the HTML document to a file
document.Save(Path.Combine(savePath));

Código JavaScript 2

<script>
	// Create a style element and assign the border-style and border-color values for table element
	var style = document.createElement("style");
	style.textContent = "table { border-style:solid; border-color:rgb(0, 0, 255) }";

	// Find the document's <head> element and add a <style> element to it
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(style);
</script>

La figura muestra la tabla HTML table.html después de cambiar el color del borde de rojo a azul:

Generador de tablas HTML es una aplicación en línea para crear tablas con opciones personalizables. Es gratis y claro de usar. ¡Simplemente complete todas las opciones requeridas y obtenga un resultado!