সিএসএস৩ একাধিক কলাম - Css3 Multiple Columns



সিএসএস ৩ এর মাল্টিপল কলাম লেআউট ব্যবহার করে ওয়েব পেজের কোন এলিমেন্টে সহজে একাধিক কলামে বিভক্ত করা যায়। খবরের কাগজে খবরগুলো যেমন বিভক্ত করা থাকে অনেকটা সেরকম।

websschool.com is a free bangla website for learning web design, electronics circuits and many other web related services like that SEO, free website template etc. websschool.com is a free bangla website for learning web design, electronics circuits and many other web related services like that SEO, free website template etc.


মাল্টিপল কলাম প্রোপার্টি

সিএসএস ৩ এর মাল্টিপল কলাম প্রোপার্টি গুলো হল নিম্নরুপ -

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width


column-count প্রপার্টি

কোন এলিমেন্ট কত গুলো কলামে বিভক্ত হবে তা column-count প্রপার্টি ব্যবহার করে নিরধার করা হয়। নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-count: number|auto|initial|inherit;


নিচের উদাহরণ টি দেখুন, এখানে column-count প্রপার্টির মান নির্ধারণ করা হয়েছে 3, তাই <div> এলিমেন্টটি ৩তি ভাগে বিভক্ত হয়েছে।

উদাহরণ

div {
column-count: 3;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-count সাপোর্ট করে না।

column-count প্রপার্টির মান

column-count প্রপার্টির জন্য যে সকল মান নির্ধারণ করা যায়, সেগুল হল নিম্নরুপ -

number - কোন এলিমেন্টের কন্টেন্টগুলো কতটি কলামে ভাগ করা হবে তা সংখ্যা দ্বারা নির্ধারন করে, যেমন -1, 2, 3 ইত্তাদি।
auto - column-count প্রোপার্টির মান স্বয়ংক্রিয় ভাবে নিরধারিত হবে। এটা হল default মান।
initial - সিএসএস প্রোপার্টির স্বয়ংক্রিয় মান নির্ধারণ করে।
inherit - এই মানের ফলে প্রোপার্টি প্যারেন্ট এলিমেন্টের মান বা value উত্তরাধিকার সূত্রে পায়।


column-gap প্রপার্টি

column-count প্রপার্টি ব্যবহার করে যে কলাম গুলো তৈরি করা হয়, সেগুলোর মাঝে ফাকা স্থান বা gap তৈরি করতে column-gap প্রপার্টি ব্যবহার করা হয়। নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-gap: length|normal|initial|inherit;


নিচের উদাহরণ টি দেখুন, এখানে column-gap প্রপার্টির মান নির্ধারণ করা হয়েছে 50px, তাই কলাম গুলোর মাঝে 50px এর ফাকা স্থান রয়েছে।

উদাহরণ

div {
column-gap: 50px;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-gap সাপোর্ট করে না।

column-gap প্রপার্টির মান

column-gap প্রপার্টির জন্য যে সকল মান নিরধার করা যায়, সেগুল হল নিম্নরুপ -

length - সংখ্যা দ্বারা নির্ধারিত এই মান কলামের মধ্যে ফাঁকা স্থানের দূরত্ব নির্ধারন করে। যেমন 2px, 5px ইত্যাদি।
normal - এই মান একাধিক কলামের মধ্যে স্বয়ংক্রিয় ভাবে কিছু জায়গা ফাঁকা রাখে।
initial - সিএসএস প্রোপার্টির স্বয়ংক্রিয় মান নির্ধারণ করে।
inherit - এই মানের ফলে প্রোপার্টি প্যারেন্ট এলিমেন্টের মান বা value উত্তরাধিকার সূত্রে পায়।


column-rule-style প্রপার্টি

column-rule-style প্রপার্টি কলাম গুলোর মাঝে স্টাইল নির্ধারণ করতে ব্যবহার করা হয়। নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit


নিচে আর একটি উদাহরণ দেখুন।

উদাহরণ

div {
column-rule-style: solid;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-rule-style সাপোর্ট করে না।

column-rule-style প্রপার্টির মান

column-rule-style প্রপার্টির জন্য যে সকল মান নিরধার করা যায়, সেগুল হল নিম্নরুপ -

none - এটা স্বয়ংক্রিয় বা default মান। যেখানে কোনো রুল থাকবে না
hidden - আর ফলে রুল hidden থাকবে।
dotted - একটি dotted রুল থাকবে।
dashed - একটি dashed রুল থাকবে।
solid - একটি solid রুল থাকবে।
double - একটি double রুল থাকবে।
groove - একটি 3D groove রুল থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
ridge - একটি 3D ridge এর নিয়ম থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
inset - একটি 3D inset রুল থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
outset - একটি 3D outset রুল থাকবে। এই ইফেক্টটি width এবং color ভ্যালুর উপর নির্ভর করে।
initial - সিএসএস প্রোপার্টির স্বয়ংক্রিয় মান নির্ধারণ করে।
inherit - এই মানের ফলে প্রোপার্টি প্যারেন্ট এলিমেন্টের মান বা value উত্তরাধিকার সূত্রে পায়।


column-rule-width প্রপার্টি

column-rule-width প্রপার্টি ব্যবহার করে দুইটি কলামের মাঝের স্টাইলটির প্রস্থ নির্ধারণ করা হয়। নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-rule-width: medium|thin|thick|length|initial|inherit;


নিচে column-rule-width প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন।

উদাহরণ

div {
column-rule-width: 1px;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-rule-style সাপোর্ট করে না।

column-rule-width প্রপার্টির মান

column-rule-width প্রপার্টির জন্য যে সকল মান নির্ধারণ করা যায়, সেগুল হল নিম্নরুপ -

medium - এটা স্বয়ংক্রিয় বা default মান যা মাঝারি ধরনের রুল নির্দেশ করে।
thin - এই মান সরু রুল নির্দেশ করে।
thick - এই মান পুরু রুল নির্দেশ করে।
length - দৈর্ঘ্য যেমন (px) ব্যবহার করে পুরুত নির্ধারণ করে।
initial - সিএসএস প্রোপার্টির স্বয়ংক্রিয় মান নির্ধারণ করে।
inherit - এই মানের ফলে প্রোপার্টি প্যারেন্ট এলিমেন্টের মান বা value উত্তরাধিকার সূত্রে পায়।


column-rule-color প্রপার্টি

column-rule-color প্রপার্টি ব্যবহার করে দুইটি কলামের মাঝের স্টাইলটির রঙ নির্ধারণ করা হয়। নিচে এর সিনট্যাক্স দেখুন।

সিনট্যাক্স

column-rule-color: color|initial|inherit;



নিচে column-rule-color প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন।

উদাহরণ

div {
column-rule-color: teal;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-rule-color সাপোর্ট করে না।

column-rule-color প্রপার্টির মান

column-rule-color প্রপার্টির জন্য যে সকল মান নির্ধারণ করা যায়, সেগুল হল নিম্নরুপ -

color - স্টাইল এর রঙ নির্ধারণ করে। সিএসএস স্টাইল এ রঙ সম্পরকে আরও জানতে ব্রাউজ করুন্ সিএসএস রঙের মান পেজটি দেখুন।
initial - সিএসএস প্রোপার্টির স্বয়ংক্রিয় মান নির্ধারণ করে।
inherit - এই মানের ফলে প্রোপার্টি প্যারেন্ট এলিমেন্টের মান বা value উত্তরাধিকার সূত্রে পায়।


column-rule প্রপার্টি

column-rule প্রপার্টি হল সকল column-rule-* প্রপার্টি অর্থাৎ column-rule-width, column-rule-style এবং column-rule-color প্রপার্টির শর্টহ্যান্ড প্রপার্টি।

নিচে column-rule প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন, যেখানে প্রস্থ বা width, স্টাইল এবং রঙ নির্ধারণ করা হয়েছে।

উদাহরণ

div {
column-rule: 2px solid lime;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-rule সাপোর্ট করে না।


column-span প্রপার্টি

কলামের মাঝে অবস্থিত কোনো এলিমেন্ট কয়টি কলাম নিয়ে অবস্থান করবে তা column-span প্রোপার্টি দ্বারা নির্ধারণ করে দেয়া যায়। নিচের উদাহরণটি দেখুন,এখানে <h2> এলিমেন্টটি সকল কলামে বিস্তৃত থাকবে।

উদাহরণ

h2 {
column-span: all;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-span সাপোর্ট করে না।


column-width প্রপার্টি

কোন কলামের প্রস্থ কত হবে বা এটি কতটুকু জায়গা দখল করবে তা column-width প্রোপার্টি দ্বারা নির্ধারণ করে দেয়া হয়। নিচে একটি উদাহরণ দেখুন, যেখানে প্রতিটি কলামের প্রস্থ 150px হয়েছে।

উদাহরণ

div {
column-width: 150px;
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো column-width সাপোর্ট করে না।

columns প্রপার্টি

column প্রপার্টি হল column-span প্রপার্টি এবং column-width প্রপার্টির শর্টহ্যান্ড প্রপার্টি।

সিনট্যাক্স

columns: auto|column-width column-count|initial|inherit;


নিচে columns প্রপার্টি ব্যবহার করে একটি উদাহরণ দেখুন। এখানে -webkit এবং -moz প্রিফিক্স ব্যবহার করা হয়েছে যথাক্রমে ক্রোম, সাফারি, অপেরা এবং ফায়ারফক্স এ ভালভাবে প্রদর্শন এর জন্য।

উদাহরণ

div {
columns: 100px 3;
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
}


নোট - ইন্টারনেট এক্সপ্লোরার 9 ও আর আগের ভার্সনগুলো columns সাপোর্ট করে না।


ব্রাউজার সাপোর্ট

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইনের ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো -webkit- বা -moz- যুক্ত প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
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-fill কলাম গুলোর অবস্থান নির্ধারণ করে।
column-gap দুইটি কলামের মাঝের দূরত্ব নির্ধারণ করে।
column-rule দুইটি কলামের মধ্যবর্তী স্টাইল নির্ধারণ করে।(অনেকটা বর্ডারের মত)
column-rule-color দুইটি কলামের মাঝের স্টাইলটির রঙ নির্ধারণ করে।
column-rule-style দুইটি কলামের মাঝের স্টাইলটি কেমন হবে তা নির্ধারণ করে।
column-rule-width দুইটি কলামের মাঝের স্টাইলটির প্রস্থ নির্ধারণ করে।
column-span একটি এলিমেন্ট কতগুলো কলাম একত্রিত হয়ে অবস্থান করবে তা নির্ধারণ করে।
column-width কলাম গুলোর প্রস্থ নির্ধারণ করে।
columns column-width এবং column-count একত্রে নির্ধারণ করার জন্য শর্টহ্যান্ড প্রপার্টি ।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.