Thay đổi màu viền HTML trong C# | Thay đổi CSS màu đường viền

Trong bài đăng trên blog này, chúng ta sẽ tìm hiểu cách thay đổi màu đường viền HTML trong C#. Hướng dẫn này sẽ cung cấp cho bạn kiến thức và kỹ năng cần thiết để thay đổi hiệu quả màu đường viền, màu đường viền CSS, màu đường viền bảng HTML, v.v. trong các tệp HTML theo lập trình bằng C#.

Bài viết này bao gồm các chủ đề sau:

  1. API C# để thay đổi màu đường viền trong tệp HTML
  2. Thay đổi màu đường viền HTML
  3. CSS màu viền sử dụng CSS nội bộ
  4. Thay đổi màu đường viền bảng HTML
  5. Tài nguyên học tập miễn phí

API C# để thay đổi màu đường viền trong tệp HTML

Chúng tôi sẽ sử dụng Aspose.HTML for .NET để thay đổi màu đường viền trong tệp HTML. Đây là thư viện lớp đa nền tảng mạnh mẽ và linh hoạt, trao quyền cho các nhà phát triển thao tác và quản lý tài liệu HTML trong các ứng dụng .NET của họ. Nó cho phép bạn tạo, chỉnh sửa và chuyển đổi các tệp HTML. Aspose.HTML for .NET cho phép bạn phân tích và trích xuất nội dung từ các tệp HTML. Nó không chỉ hỗ trợ HTML5 mà còn hỗ trợ các thông số kỹ thuật CSS3 và HTML Canvas, cho phép bạn tạo kiểu cho các tài liệu HTML của mình và tương tác với các phần tử động.

Vui lòng tải xuống DLL của API hoặc cài đặt nó bằng NuGet.

PM> Install-Package Aspose.Html

Thay đổi màu viền HTML trong C#

Thuộc tính border-color đặt màu của cả bốn đường viền của một phần tử. Khi một giá trị duy nhất được gán cho thuộc tính border-color, tất cả các đường viền sẽ được sơn bằng màu đó. Ví dụ: nếu chúng ta đặt thuộc tính border-color thành màu red, thì tất cả bốn màu viền sẽ là red. Ngoài ra, chúng tôi có thể linh hoạt chỉ định các giá trị màu riêng biệt cho đường viền trên, phải, dưới và trái.

Chúng ta có thể thay đổi màu đường viền của bất kỳ thành phần HTML nào bằng cách thực hiện theo các bước bên dưới:

  1. Tải tệp HTML hiện có bằng lớp HTMLDocument.
  2. Lấy HTMLElement cụ thể để thay đổi màu đường viền.
  3. Đặt thuộc tính kiểu đường viền, ví dụ: BorderStyle, BorderColor.
  4. Cuối cùng, lưu tài liệu HTML vào một tệp.

Mẫu mã sau đây cho biết cách thay đổi màu đường viền trong HTML bằng C#.

// Chuẩn bị đường dẫn đến tệp HTML nguồn
string documentPath = "C:\\Files\\input.html";

// Chuẩn bị đường dẫn đầu ra để lưu tài liệu
string savePath = "C:\\Files\\output.html";

// Tạo một phiên bản của tài liệu HTML
var document = new HTMLDocument(documentPath);

// Tìm phần tử h1 để đặt thuộc tính style
var header = (HTMLElement)document.GetElementsByTagName("h1").First();

// Đặt thuộc tính thuộc tính kiểu
header.Style.BorderStyle = "solid";
header.Style.BorderColor = "red blue green gray";

// Tìm phần tử h2 để đặt thuộc tính style
var subheading = (HTMLElement)document.GetElementsByTagName("h2").First();

// Đặt thuộc tính thuộc tính kiểu
subheading.Style.BorderStyle = "solid";
subheading.Style.BorderColor = "black";

// Lưu tài liệu HTML vào một tập tin
document.Save(Path.Combine(savePath));
Thay đổi màu viền HTML trong C#

Thay đổi màu viền HTML trong C#

Thay đổi CSS màu viền bằng CSS nội bộ trong C#

Chúng ta có thể thay đổi màu đường viền bằng cách thêm CSS nội bộ bằng cách sử dụng <style> element in an HTML document by following the steps below:

  1. Tải tệp HTML hiện có bằng lớp HTMLDocument.
  2. Tạo một <style> element using the CreateElement() method.
  3. Chỉ định TextContent cho <style> element.
  4. Lấy HTMLElement cụ thể để thay đổi màu đường viền.
  5. Sau đó, nối thêm phần tử kiểu bằng phương thức AppendChild().
  6. Cuối cùng, lưu tài liệu HTML vào một tệp.

Mẫu mã sau đây cho biết cách thay đổi màu đường viền bằng CSS nội bộ trong C#.

// Chuẩn bị đường dẫn đến tệp HTML nguồn
string documentPath = "C:\\Files\\input.html";

// Chuẩn bị đường dẫn đầu ra để lưu tài liệu
string savePath = "C:\\Files\\output_css.html";

// Tạo một phiên bản của tài liệu HTML
var document = new HTMLDocument(documentPath);

// Tạo phần tử kiểu và gán các giá trị color border-style và border-color cho phần tử h1
var style = document.CreateElement("style");
style.TextContent = "h1 { color:Blue; border-style:solid; border-color:rgb(220,30,100) }";

// Tìm phần tử đầu tài liệu và nối phần tử kiểu vào phần đầu
var head = document.GetElementsByTagName("head").First();
head.AppendChild(style);

// Lưu tài liệu HTML vào một tập tin
document.Save(Path.Combine(savePath));

Mẫu mã ở trên sẽ thêm vào phần sau <style> element in the <head> section of the output HTML document.

<style>
h1 { 
	color: blue; 
	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>

Thay đổi màu đường viền bảng HTML trong C#

Chúng ta có thể dễ dàng thay đổi màu đường viền của bảng HTML bằng CSS nội bộ hoặc nội tuyến. Chúng ta có thể áp dụng <style> element to the HTML <table> element.

Hãy làm theo các bước dưới đây để thay đổi màu đường viền của bảng HTML.

  1. Tải tệp HTML hiện có bằng lớp HTMLDocument.
  2. Chọn bảng bằng phương thức QuerySelector().
  3. Đặt thuộc tính style bằng phương thức SetAttribution().
  4. Cuối cùng, lưu tài liệu HTML vào một tệp.

Mẫu mã sau đây cho biết cách thay đổi màu đường viền của bảng HTML trong C#.

// Chuẩn bị đường dẫn đến tệp HTML nguồn
string documentPath = "C:\\Files\\html_table.html";

// Chuẩn bị đường dẫn đầu ra để lưu tài liệu
string savePath = "C:\\Files\\output_table.html";

// Tạo một phiên bản của tài liệu HTML
var document = new HTMLDocument(documentPath);

// Tạo Bộ chọn CSS để chọn thành phần bảng đầu tiên
var element = document.QuerySelector("table");

// Đặt thuộc tính kiểu với các thuộc tính cho phần tử đã chọn               
element.SetAttribute("style", "border: 2px #0000ff solid");

// Lưu tài liệu HTML vào một tập tin
document.Save(savePath);
Thay đổi màu đường viền bảng HTML trong C#

Thay đổi màu đường viền bảng HTML trong C#

Nhận giấy phép miễn phí

Bạn có thể nhận giấy phép tạm thời miễn phí để dùng thử Aspose.HTML for .NET mà không bị giới hạn về đánh giá.

Tạo bảng HTML – Tài nguyên học tập

Bên cạnh việc thay đổi màu đường viền, bạn có thể tìm hiểu thêm về thư viện và khám phá nhiều tính năng khác bằng cách sử dụng các tài nguyên bên dưới:

Phần kết luận

Trong bài đăng trên blog này, chúng ta đã học cách thay đổi màu đường viền trong tài liệu HTML bằng C#. Chúng tôi đã khám phá nhiều phương pháp khác nhau để thay đổi màu đường viền của các thành phần HTML khác nhau. Bằng cách làm theo các bước và mẫu mã được cung cấp trong bài viết này, bạn có thể dễ dàng phát triển các giải pháp tùy chỉnh của riêng mình để làm việc với tài liệu HTML. Trong trường hợp có bất kỳ sự mơ hồ nào, vui lòng liên hệ với chúng tôi trên diễn đàn hỗ trợ miễn phí của chúng tôi.

Xem thêm