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