সিএসএস(৩) column-rule-style প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-rule-style | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |
সংজ্ঞা ও ব্যবহার
column-rule-style প্রোপার্টি কলাম রুলের স্টাইল নির্ধারন করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| none | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
column-rule-style: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset/initial/inherit;
কলামের স্টাইল নির্ধারন করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: dotted;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: dotted;
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<div class="text">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<p><strong>নোটঃ</strong> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সন গুলোতে column-rule-style প্রোপার্টি সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.columnRuleStyle="dotted"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
#thisDiv {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-rule: 3px outset teal;
/* Firefox: */
-moz-column-count: 3;
-moz-column-rule: 3px outset teal;
/* Standard syntax */
column-count: 3;
column-rule: 3px outset teal;
}
</style>
</head>
<body>
<p>Column-rule প্রোপার্টির স্টাইল পরিবর্তন করতে "ক্লিক করি" বাটনে ক্লিক করুন।</p>
<button onclick="myFunction()">ক্লিক করিঃ</button><br><br>
<div id="thisDiv">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.WebkitColumnRuleStyle = "dotted"; // Code for Chrome, Safari, and Opera
document.getElementById("thisDiv").style.MozColumnRuleStyle = "dotted"; // Code for Firefox
document.getElementById("thisDiv").style.columnRuleStyle = "dotted";
}
</script>
</body>
</html>
ফলাফল
Column-rule-style প্রোপার্টির ভ্যালু-সমূহ
- none - ডিফল্ট ভ্যালু যেখানে কোনো রুল থাকবে না।
- hidden - এখানে রুল hidden থাকবে।
- dotted - dotted রুল থাকবে।
- dashed - dashed রুল থাকবে।
- solid - solid রুল থাকবে।
- double -double রুল থাকবে।
- groove - 3D groove রুল থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
- ridge - 3D ridge এর নিয়ম থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
- inset - 3D inset রুল থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
- outset -3D outset রুল থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
Column-rule-style প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।