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