css column-rule özelliği, html elementinin çoklu sütunlu yapısında sütunlar arasındaki dikey ayracın özelliklerini belirlemek için kullanırız.
Aldığı değerler :
rulevalue : Verdiğimiz değere özellikler belirleriz.
inherit : Bir üst elementten miras alır.
initial : Varsılan değere döner.
Kullanım şekli :
column-count : 4;
column-rule : çizgi-stili;
column-rule: çizgi-stili renk;
column-rule : çizği-genişlik çizgi-stili;
column-rule : çizği-genişlik çizgi-stili renk;Sütun sayısı belirtildikten sonra ayraçın özelliklerine atama 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;
}
.one { column-rule: solid; }
.two { column-rule: 5px dashed; }
.three { column-rule: 10px dotted blue; }
.four { column-rule: double purple; }
</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>
</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…
