Thuộc tính column-rule-style trong CSS
Bùi Tấn Lực - 839
- 16/10/2025
Chức năng của Thuộc tính column-rule-style trong CSS
Thuộc tính column-rule-style trong CSS dùng để quy định kiểu đường kẻ nằm 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-style trong CSS
column-rule-style: kieuduongke;
kieuduongke: Kiểu đường kẻ nằm giữa các cột trong bố cục nhiều cột (Ví dụ: solid, dotted, dashed, double, groove, ridge, inset, outset,...)
Code Thuộc tính column-rule-style trong CSS
column-rule-style: solid;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-rule-style 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-color: red; column-rule-width: 5px;}
</style>
</head>
<body>
<h1>Code Thuộc tính column-rule-style trong CSS</h1>
<p>Quy định kiểu đường kẻ nằm giữa các cột trong bố cục nhiều cột:</p>
<h4>column-rule-style: solid;</h4>
<div class="divcha" style="column-rule-style: solid;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: dotted;</h4>
<div class="divcha" style="column-rule-style: dotted;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: dashed;</h4>
<div class="divcha" style="column-rule-style: dashed;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: double;</h4>
<div class="divcha" style="column-rule-style: double;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: groove;</h4>
<div class="divcha" style="column-rule-style: groove;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: ridge;</h4>
<div class="divcha" style="column-rule-style: ridge;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: inset;</h4>
<div class="divcha" style="column-rule-style: inset;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: outset;</h4>
<div class="divcha" style="column-rule-style: outset;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: none;</h4>
<div class="divcha" style="column-rule-style: none;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style: hidden;</h4>
<div class="divcha" style="column-rule-style: hidden;">
Hãy Chạy thử Code Thuộc tính column-rule-style 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-style 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-style để định dạng đường kẻ giữa các cột
Khi nội dung được chia thành nhiều cột, column-rule-style giúp xác định cách hiển thị đường phân cách giữa các cột. Việc chọn kiểu đường phù hợp không chỉ làm bố cục dễ đọc hơn mà còn giúp phần nội dung có sự phân cấp rõ ràng.
Tạo đường kẻ phân cách cột rõ ràng cho nội dung
Đối với các khối văn bản có nhiều cột, đường kẻ phân cách nên đủ rõ để người đọc nhận biết ranh giới nhưng không quá nổi bật so với nội dung chính. Các kiểu như solid thường phù hợp với bố cục cần sự gọn gàng, trong khi dashed hoặc dotted có thể tạo cảm giác nhẹ nhàng và linh hoạt hơn.
Ví dụ, có thể sử dụng đường kẻ liền để tạo ranh giới trực quan giữa các cột:
.noidung {
column-count: 3;
column-rule-style: solid;
}
Kết hợp column-rule-style với column-rule-width và column-rule-color
column-rule-style chỉ quyết định kiểu đường kẻ. Để kiểm soát toàn bộ diện mạo, nên kết hợp thêm column-rule-width để thiết lập độ dày và column-rule-color để chọn màu.
Cách kết hợp này giúp đường phân cách cân đối hơn với nền và màu chữ của khu vực nội dung:
.noidung {
column-count: 3;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: #d8d8d8;
}
Chọn kiểu đường kẻ phù hợp với từng bố cục
Không nên sử dụng một kiểu đường kẻ cho mọi thiết kế. solid phù hợp với giao diện tối giản, dashed tạo cảm giác mềm hơn, còn dotted thích hợp khi muốn đường phân cách ít gây chú ý. Với nội dung dài, nên ưu tiên kiểu dễ quan sát và không làm người đọc nhầm đường kẻ với nội dung.
Quan trọng nhất là giữ sự đồng nhất giữa kiểu đường, độ dày và màu sắc. Khi các thuộc tính này được phối hợp hợp lý, đường phân cách sẽ hỗ trợ bố cục thay vì trở thành chi tiết gây rối mắt.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-rule-style 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 *
