Thuộc tính column-rule-color trong CSS
Bùi Tấn Lực - 831
- 16/10/2025
Chức năng của Thuộc tính column-rule-color trong CSS
Thuộc tính column-rule-color trong CSS dùng để quy định nàu sắc của đường kẻ giữa các cột trong bố cục nhiều cột.
Cú pháp của Thuộc tính column-rule-color trong CSS
column-rule-color: giatri;
giatri: Giá trị dùng để quy định nàu sắc của đường kẻ giữa các cột trong bố cục nhiều cột (Ví dụ: mã màu #ff0000, màu tiếng anh red, transparent, các hệ màu: rgb(201, 76, 76), rgba(201, 76, 76, 0.3), hsl(89, 43%, 51%), hsla(89, 43%, 51%, 0.3))
Code Thuộc tính column-rule-color trong CSS
column-rule-color: #ff0000;
column-rule-color: red;
column-rule-color: rgb(201, 76, 76);
column-rule-color: rgba(201, 76, 76, 0.3);
column-rule-color: hsl(89, 43%, 51%);
column-rule-color: hsla(89, 43%, 51%, 0.3);
column-rule-color: transparent;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-rule-color trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{width:100%; height:auto; margin-bottom:10px; column-count: 3; column-gap: 40px; column-rule-style: solid; column-rule-width: 5px;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-rule-color trong CSS</h1>
<p>Quy định nàu sắc của đường kẻ giữa các cột trong bố cục nhiều cột:</p>
<h4>column-rule-color: #ff0000;</h4>
<div class="divcha" style="column-rule-color: #ff0000;">
Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule-color: red;</h4>
<div class="divcha" style="column-rule-color: red;">
Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule-color: rgb(201, 76, 76);</h4>
<div class="divcha" style="column-rule-color: rgb(201, 76, 76);">
Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule-color: rgba(201, 76, 76, 0.3);</h4>
<div class="divcha" style="column-rule-color: rgba(201, 76, 76, 0.3);">
Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule-color: hsl(89, 43%, 51%);</h4>
<div class="divcha" style="column-rule-color: hsl(89, 43%, 51%);">
Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule-color: hsla(89, 43%, 51%, 0.3);</h4>
<div class="divcha" style="column-rule-color: hsla(89, 43%, 51%, 0.3);">
Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
<h4>column-rule-color: transparent;</h4>
<div class="divcha" style="column-rule-color: transparent;">
Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule-color trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>
</body>
</html>
Ứng dụng column-rule-color khi thiết kế bố cục nhiều cột
Trong bố cục nhiều cột, đường phân cách không chỉ giúp người đọc nhận biết ranh giới giữa các phần nội dung mà còn góp phần tạo nhịp điệu cho toàn bộ giao diện. column-rule-color cho phép kiểm soát màu của đường kẻ này, từ đó dễ dàng điều chỉnh theo nền, màu chữ và phong cách thiết kế của website.
Tạo đường phân cách cột hài hòa với giao diện
Nên chọn màu đường phân cách có độ tương phản vừa phải với nền. Màu quá đậm có thể khiến bố cục bị chia cắt rõ rệt, trong khi màu quá nhạt lại khó nhận thấy. Với giao diện tối giản, một sắc xám nhẹ thường tạo cảm giác gọn gàng và không làm người đọc mất tập trung.
.noidung {
column-count: 3;
column-rule-color: #D8D3C8;
column-rule-style: solid;
column-rule-width: 1px;
}
Cách phối hợp trên giữ đường kẻ đủ rõ để phân biệt các cột nhưng vẫn hòa vào tổng thể nội dung. Khi website có màu nhận diện riêng, có thể sử dụng một biến thể nhạt hơn của màu chủ đạo thay vì chọn màu tương phản mạnh.
Kết hợp column-rule-color với các thuộc tính column-rule
Màu chỉ là một phần của đường phân cách. Để kiểm soát hoàn chỉnh, column-rule-color có thể kết hợp với column-rule-style và column-rule-width. Ba thuộc tính lần lượt quyết định màu sắc, kiểu hiển thị và độ dày của đường kẻ.
.noidung {
column-count: 2;
column-rule-color: #B9B2A5;
column-rule-style: dashed;
column-rule-width: 1px;
}
Việc kết hợp này giúp đường phân cách phù hợp hơn với từng kiểu nội dung. Chẳng hạn, đường liền tạo cảm giác chắc chắn và rõ ràng, còn đường nét đứt mang lại vẻ nhẹ nhàng hơn khi dùng cho những khu vực có nhiều thông tin.
Chọn màu đường kẻ phù hợp với nội dung website
Không nên chọn màu dựa trên đường kẻ riêng lẻ mà cần xét cả nền và màu chữ xung quanh. Với nền sáng, màu trung tính có độ sáng thấp hơn nền một khoảng vừa đủ thường dễ sử dụng. Với nền tối, nên ưu tiên màu sáng nhưng tránh độ tương phản quá cao.
Đối với các trang chứa nhiều văn bản, màu phân cách nên có tính tiết chế để không cạnh tranh với nội dung chính. Ngược lại, những khu vực cần nhấn mạnh sự phân chia có thể sử dụng màu nhận diện thương hiệu với sắc độ được giảm nhẹ.
Khi thay đổi giao diện theo từng chủ đề, chỉ cần điều chỉnh giá trị column-rule-color là có thể thay đổi diện mạo đường phân cách mà không cần sửa lại cấu trúc HTML.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-rule-color trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
