Как изменить border color в HTML? Примеры С#

В этой статье мы будем использовать примеры C#, чтобы показать различные способы установки или изменения цвета границы в файлах HTML с использованием библиотеки классов Aspose.HTML.

Установить или изменить border color для элемента HTML легко с помощью свойства CSS border-color. Есть несколько способов установить значение этого свойства. Вы можете использовать встроенный, внутренний или внешний CSS, а значения цвета HTML могут быть указаны как стандартные имена цветов или со значениями HEX, RGB, RGBA, HSL и HSLA.

Дополнительные сведения об использовании цветовых кодов HTML см. в статье Цветовые коды HTML. В разделе Border Color вы найдете примеры кода HTML о том, как изменить цвет границы.

Изменить border color с помощью встроенного CSS

Вы можете установить или изменить border color, используя встроенный атрибут style – встроенный CSS. Свойство border-color будет работать, только если сначала определено свойство border-style, которое используется для установки границ. Это свойство не будет работать в одиночку. Если это свойство не установлено, оно наследует цвет элемента. Свойство border-color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.

Чтобы изменить border color HTML-элемента с помощью Aspose.HTML API, выполните несколько шагов:

1. Загрузите существующий файл HTML.
2. Создайте экземпляр HTML-документа.
3. Определите, для какого элемента вы хотите изменить border color, и найдите этот элемент, чтобы установить для него атрибут стиля. Используйте метод GetElementsByTagName(name) класса Element, который возвращает HTML-элемент с заданным именем.
4. Установите атрибут style со свойствами border-style и border-color: используйте свойство Style класса HTMLElement.
5. Сохраните измененный HTML-документ.

Вы можете установить или изменить border color для различных элементов HTML, таких как <p>, <h1>…<h6>, <div> или <table>. В следующем примере C# показано изменение цвета границы для элемента <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));

Следует отметить, что в этом С# примере был изменен не только border color для элемента <h1>, но и цвет текста для этого элемента (добавлено свойство color).

Вы можете скачать полные примеры и файлы данных с GitHub.

Изменить цвет для четырех сторон границы

Свойство border-color устанавливает цвет четырех границ элемента. Если свойство border-color имеет единственное значение, то вся рамка будет окрашена этим цветом. Но вы можете установить разные значения цвета для верхней, правой, нижней и левой границ. Например, если вы установите border-color: red blue green grey, верхняя граница будет красной, правая – синей, нижняя – зеленой, а левая – серой.

// 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));

На рисунке показаны результаты изменения цвета границы элемента <h1> с помощью встроенного CSS: а) изменен цвет всей границы; б) изменен цвет для каждой из четырех сторон границы.

Изменить border color с помощью внутреннего CSS

Тот же результат раскрашивания границ может быть достигнут с помощью внутреннего CSS, как показано в следующем примере кода HTML:

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

Примечание. Имейте в виду, что использование атрибута style переопределяет любой стиль, установленный в HTML-теге <style> или во внешней таблице стилей.

В следующем примере C# показано, как реализовать внутренний CSS для изменения цвета границы. Сделайте несколько шагов:

1. Загрузите существующий файл HTML.
2. Создайте экземпляр HTML-документа.
3. Создайте элемент <style> и назначьте значения border-style и border-color для элемента <h1>.
4. Найдите в документе элемент <head> и добавьте в него элемент <style>.
5. Сохраните измененный HTML-документ.

// 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));

Выполнение кода С#, которое мы привели выше, приведет к появлению элемента <style> в <head> выходного файла, что иллюстрируется следующим 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>

Результат аналогичен показанному на рисунке (а) выше.

Изменить border color таблицы

Если вы хотите изменить цвет границы таблицы, вы можете использовать встроенный или внутренний CSS.

Вы можете применить атрибут style к HTML-элементу <table>. Имейте в виду, что использование атрибута стиля переопределяет любой стиль, установленный в HTML-теге <style> или во внешней таблице стилей. Чтобы изменить цвет границы таблицы с помощью встроенного атрибута стиля CSS, вы можете использовать метод QuerySelector() для навигации по DOM и поиска элемента <table>. Затем установите атрибут стиля с необходимыми свойствами для элемента <table>:

C# Example 1 – Использование встроенного CSS

// 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));

JavaScript code 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>

Тот же результат раскрашивания границ таблицы может быть достигнут с помощью внутреннего CSS, как показано в следующем C# Example 2:

C# Example 2 – Использование внутреннего CSS

// 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));

JavaScript code 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>	

На рисунке показана таблица HTML table.html после изменения цвета границы с красного на синий:

HTML Table Generator – онлайн-приложение для создания таблиц с настраиваемыми параметрами. Это бесплатно и понятно в использовании. Просто заполните все необходимые параметры и получите результат!