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