সিএসএস(৩) column-rule-width প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-rule-width | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |
সংজ্ঞা ও ব্যবহার
column-rule-width প্রোপার্টি কলাম রুলের width নির্ধারন করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| medium | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
column-rule-width: medium/thin/thick/length/initial/inherit;
কলাম রুলের width নির্ধারন
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
/* Chrome, Safari, Opera */
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: outset;
-webkit-column-rule-width: 2px;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: outset;
-moz-column-rule-width: 2px;
column-count: 3;
column-gap: 30px;
column-rule-style: outset;
column-rule-width: 2px;
}
</style>
</head>
<body>
<div class="text">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<p><strong>নোটঃ</strong> column-rule-width প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৯ এবং
পূর্বের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.columnRuleWidth="10px"উদাহরণঃ
<!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.WebkitColumnRuleWidth = "8px"; // Code for Chrome, Safari, and Opera
document.getElementById("thisDiv").style.MozColumnRuleWidth = "8px"; // Code for Firefox
document.getElementById("thisDiv").style.columnRuleWidth = "8px";
}
</script>
</body>
</html>
ফলাফল
column-rule-width প্রোপার্টির ভ্যালু-সমূহ
- medium - ডিফল্ট ভ্যালু যা মাঝারি ধরনের রুল নির্দেশ করে।
- thin -সরু রুল নির্দেশ করে।
- thick -পুরু রুল নির্দেশ করে।
- length - রুলের পুরুত্ব নির্দেশ করতে সাহায্য করে ।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
column-rule-width প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।