css column-rule-style özelliği, html elementinin çoklu sütunlu yapısında sütunlar arasındaki dikey ayraçın stil özelliklerini belirlemek için kullanılır.
Aldığı değerler :
none : Değer yok.
solid : düz çizgi
hidden : gizli
dashed : kesikli çizgi
dotted : noktalı çizgi
double : Çift çizgi
groove : içe dönük gölgeli çizgi
ridge : içe dönük gölgeli çizgi
inset : içe dönük derin çizgi
otset : dışa dönük derin çizgi
inherit : Bir üst elementten miras alır.
initial : Varsılan değere döner.
Sütun sayısı belirtildikten sonra ayracın özelliklerine stil ataması yapabiliriz.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin-bottom: 10px;
width: 400px;
padding: 5px;
border: 1px solid black;
column-count: 3;
column-rule-style: solid;
}
.one { column-rule-style: none; }
.two { column-rule-style: dashed; }
.three { column-rule-style: dotted; }
.four { column-rule-style: hidden; }
.five { column-rule-style: initial; }
</style>
</head>
<body>
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="two">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="three">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="four">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="five">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
</body>
</html>Html çıktısı:
Eğer css columns konusunu bilmiyorsanız öncelikle o konuyu öğrenmenizi tavsiye ederim.
Başka bir yazımızda görüşmek üzere…
