সিএসএস 3.0 এর column প্রোপার্টি গুলো ব্যবহার করে ওয়েব পেজের কোন এলিমেন্টেকে সহজে একাধিক কলামে ভাগ করে প্রদর্শন করা যায়। খবরের কাগজে যেমন খবর গুলো অনেক গুলো কলামে ভাগ করা থাকে, সেভাবে। নিচে এর একটি ব্যাবহারিক উদাহরন দেখুন।
সিএসএস এর 3.0 সংস্করণে যে সকল column প্রোপার্টি গুলো যোগ করা হয়েছে, সেগুলো হল নিম্নরূপ।
কোন এইচটিএমএল এলিমেন্ট কত গুলো কলামে বিভক্ত হবে, তা সিএসএস এর column-count প্রোপার্টি ব্যাবহার করে নির্ধারণ করা হয়। নিচে column-count প্রোপার্টির সিনট্যাক্স দেখুন।
column-count: number|auto|initial|inherit;
নিচের উদাহরণ টি দেখুন, এখানে column-count প্রপার্টির মান নির্ধারণ করা হয়েছে 3, তাই <div> এলিমেন্টটি ৩টি ভাগে বিভক্ত হয়েছে।
div { column-count: 3; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-count সমর্থন বা support করে না।
column-count প্রপার্টির জন্য যে সকল মান বা value নির্ধারণ করা যায়, সে গুলো হল নিম্নরুপ -
column-count প্রপার্টি ব্যবহার করে যে কলাম গুলো তৈরি করা হয়, সেগুলোর মাঝে ফাকা স্থান বা gap তৈরি করতে column-gap প্রপার্টি ব্যবহার করা হয়। নিচে column-gap প্রোপার্টির সিনট্যাক্স দেখুন।
column-gap: length|normal|initial|inherit;
নিচের উদাহরণ টি দেখুন, এখানে column-gap প্রপার্টির মান নির্ধারণ করা হয়েছে 50px, তাই কলাম গুলোর মাঝে 50px এর ফাকা স্থান রয়েছে।
div { column-gap: 50px; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের সংস্করণ বা version গুলো column-gap সমর্থন বা support করে না।
column-gap প্রপার্টির জন্য যে সকল মান বা value নির্ধারণ করা যায়, সে গুলো হল নিম্নরুপ।
কলাম গুলোর মাঝের স্টাইল নির্ধারণ করতে সিএসএস এর column-rule-style প্রোপার্টি ব্যাবহার করা হয়। নিচে column-rule-style প্রোপার্টির সিনট্যাক্স দেখুন।
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit
নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর column-rule-style প্রোপার্টি ব্যাবহার করা হয়েছে।
div { column-rule-style: solid; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule-style সমর্থন বা support করে না।
সিএসএস এর column-rule-style প্রোপার্টিতে যে সকল মান বা value ব্যাবহার করা যায়, সেগুলো হল নিম্নরূপ।
দুইটি কলামের মাঝের স্টাইল এর প্রস্থ বা width নির্ধারণ করা হয় column-rule-width প্রোপার্টি ব্যাবহার করে। নিচে column-rule-width প্রোপার্টির সিনট্যাক্স দেখুন।
column-rule-width: medium|thin|thick|length|initial|inherit;
নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস এর column-rule-width প্রোপার্টি ব্যাবহার করা হয়েছে।
div { column-rule-width: 1px; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule-width সমর্থন বা support করে না।
সিএসএস এর column-rule-width প্রপার্টির জন্য যে সকল মান বা value নির্ধারণ করা যায়, সেগুল হল নিম্নরুপ।
ুইটি কলামের মাঝের স্টাইলটির রঙ নির্ধারণ করার জন্য সিএসএস এর column-rule-color প্রোপার্টি ব্যাবহার করা হয়। নিচে column-rule-color প্রোপার্টির সিনট্যাক্স দেখুন।
column-rule-color: color|initial|inherit;
সিএসএস এর column-rule-color প্রোপার্টি ব্যাবহার করে নিচে কিছু সিএসএস স্টাইল কোড দেখুন।
div { column-rule-color: teal; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule-color সমর্থন বা support করে না।
column-rule-color প্রোপার্টিতে যে সকল মান বা value নির্ধারণ করা যায়, সে গুলো হল নিম্নরূপ।
সকল column-rule-* প্রোপার্টি গুলোর শর্টহ্যান্ড হল column-rule প্রোপার্টি। সিএসএস এর column-rule প্রোপার্টিতে ধারাবাহিক ভাবে column-rule-width, column-rule-style ও ও column-rule-color প্রোপার্টির মান উল্লেখ করতে হয়। নিচে column-rule প্রোপার্টির সিনট্যাক্স দেখুন।
column-rule: width । style । colour;
নিচে column-rule প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন, যেখানে প্রস্থ বা width, স্টাইল এবং রঙ নির্ধারণ করা হয়েছে।
div { column-rule: 2px solid lime; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-rule সমর্থন বা support করে না।
কলামের মাঝে অবস্থিত কোনো এইচটিএমএল এলিমেন্ট কয়টি কলাম নিয়ে অবস্থান করবে তা column-span প্রোপার্টি দ্বারা নির্ধারণ করে দেয়া যায়। নিচের একটি উদাহরণ দেখুন,এখানে h2 এলিমেন্ট অর্থাৎ <h2> ট্যাগের মধ্যস্থিত লেখা গুলো সকল কলামে বিস্তৃত থাকবে।
h2 { column-span: all; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-span সমর্থন বা support করে না।
সিএসএস এর column-width প্রোপার্টি ব্যাবহার করে, কোন কলামের প্রস্থ বা width কত হবে বা এটি কতটুকু জায়গা দখল করবে তা নির্ধারণ করা হয়।
নিচে উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে প্রতিটি কলামের প্রস্থ 150px নির্ধারণ করা হয়েছে।
div { column-width: 150px; }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো column-width প্রোপার্টি সমর্থন বা support করে না।
সিএসএস এর column-span প্রপার্টি এবং column-width প্রপার্টির শর্টহ্যান্ড হল columns প্রপার্টি।
এক্ষেত্রে column-span এবং column-width প্রপার্টির মান বা value ধারাবাহিক ভাবে উল্লেখ করতে হয়।
নিচে columns প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন। এখানে -webkit এবং -moz প্রিফিক্স ব্যবহার করা হয়েছে ক্রোম, সাফারি, অপেরা এবং ফায়ারফক্স এ ভালভাবে প্রদর্শন এর জন্য।
div { columns: 100px 3; -webkit-columns: 100px 3; /* Chrome, Safari, Opera */ -moz-columns: 100px 3; /* Firefox */ }
নোট - ইন্টারনেট এক্সপ্লোরার 9 ও এর আগের সংস্করণ বা version গুলো columns প্রোপার্টি সমর্থন বা support করে না।
প্রপার্টি | |||||
---|---|---|---|---|---|
column-count | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
column-gap | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
column-rule | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
column-rule-color | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
column-rule-style | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
column-rule-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
column-span | 50.0 4.0 -webkit- |
10.0 | Not supported | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
প্রোপার্টি | বর্ণনা |
---|---|
column-count | |
column-gap | |
column-rule-style | |
column-rule-width | |
column-rule-color | |
column-rule | |
column-span | |
column-width | |
columns |