সিএসএস লিস্ট টিউটোরিয়াল (CSS List Tutorial in Bangla)

সিএসএস লিস্ট টিউটোরিয়াল (CSS List Tutorial in Bangla)

এইচটিএমএল এ দুই ধরনের এলিমেন্ট আছে লিস্ট তৈরীর জন্য এটা আগে আমরা জেনে এসেছি। <ul></ul> এবং <ol></ol>
নেভিগেশন মেনু বা যেকোন তালিকা তৈরীর সময় এই ul, ol এবং li ব্যবহার করে থাকি। এই লিস্ট স্টাইলিং এর জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমন
list-style-type, list-style-position, list-style-image, list-style, marker-offset

list-style-type
যখন লিস্ট তৈরী করা হয় তখন (ul দিয়ে) বাই ডিফল্ট প্রতিটি লিস্টের সামনে একটা করে বুলেট চলে আসে যেমন

1.<ul>

2.<li>HTML</li>

3. 

4.<li>CSS</li>

5.<li>PHP</li>

6.<li>MySQL</li>

7.</ul>

প্রয়োগ দেখুন
৭ নম্বর লাইনের "disc" বাই ডিফল্ট থাকে। অর্থ্যাৎ list-style-type: disc; না দিলেও বুলেট দেখাবে।
এখন list-style-type দিয়ে এই বুলেটের পরিবর্তে অন্যান্য চিহ্ন আনা যায়। যেমন ul এর জন্য যেসব চিহ্ন দেয়া যায়

01.<style>

02.ul.first li {

03.list-style-type:none;

04.}

05. 

06.ul.second li {

07.list-style-type:disc;

08.}

09. 

10.ul.third li {

11.list-style-type:circle;

12.}

13. 

14.ul.fourth li {

15.list-style-type:square;

16.}

17.</style>

প্রয়োগ দেখুন

ol এর জন্যও বেশ কয়েকটি মান ব্যবহার করা যায় যেমন

1.list-style-type:decimal;

2.list-style-type:decimal-leading-zero;

3.list-style-type:lower-alpha;

4.list-style-type:upper-alpha;

5.list-style-type:lower-roman;

6.list-style-type:upper-roman;

উদাহরন আর দিলাম না। খুব সহজ, মান দেখেই বোঝা যাচ্ছে কোনটা দেখতে কেমন হবে। দেখতে চাইলে ol এবং li দিয়ে লিস্ট বানিয়ে স্টাইলগুলি প্রয়োগ করে দেখুন।

list-style-position
এই প্রোপার্টিজ দিয়ে চিহ্নগুলি বা থেকে একটু ভিতরে না বাহিরে তা ঠিক করা যায়। এটার বাই ডিফল্ট মান থাকে "outside", এছাড়া inside দিলে বা থেকে সরে একটু ডানে দেখাবে যেমন

1.ul.third li {

2.list-style-type:circle;

3.list-style-position:inside;

4.}

প্রয়োগ দেখুন

list-style-image
এটা দিয়ে চিহ্নের বদলে ছবি দেয়া যায়। যেমন

1.list-style-image:url(images/custom_bullet.png);

list-style
এটা হল শর্টহ্যান্ড প্রোপার্টি। উপরের ৩ টি প্রোপার্টিজের কার এই্ একটি দিয়ে করা যায়। উপরের গুলি বেশি ব্যবহার হয়না। list-style দিয়েই সবসময় সাধারনত কাজ করা হয়। যেমন

1.ul.third li {

2.list-style:url(../images/cancel_f2.png) inside ;

3.}

প্রয়োগ দেখুন

list-style : আগে list-style-type এরপর list-style-position শেষে list-style-image

এই list-style টাই বেশি ব্যবহার হতে দেখবেন। বেশিরভাগ সময় মেনু তৈরীর সময় ul এর ভিতর যখন অনেক li থাকে তখন এর বাই ডিফল্ট বুলেট সরানোর জন্য list-style:none; ব্যবহার করা হয়।
** list-style:none; এভাবে একটা মানও ব্যবহার করা যায়। একটা মান দিলে সেটা list-style-type হিসেবে নেবে।