How to learn সিএসএস লিস্ট | SP Foundationbd

HTML এ দুই ধরনের এলিমেন্ট আছে list তৈরীর জন্য এটা আগে আমরা জেনে এসেছি। <ul></ul> এবং <ol></ol>

Navigation মেনু বা যেকোন তালিকা তৈরীর সময় এই ul, ol এবং li ব্যবহার করে থাকি। এই list styling এর জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমন

list-style-type, list-style-position, list-style-image, list-style, marker-offset

 list-style-type

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

1.<ul>

2.<li>HTML</li>

3.<li>CSS</li>

4.<li>PHP</li>

5.<li>MySQL</li>

6.</ul>

৭ নম্বর লাইনের "disc" বাই ডিফল্ট থাকে। অর্থ্যাৎ list-style-type: disc; না দিলেও বুলেট দেখাবে।

এখন list-style-type দিয়ে এই বুলেটের পরিবর্তে অন্যান্য চিহ্ন আনা যায়। যেমন ul এর জন্য যেসব চিহ্ন দেয়া যায়

 01.<style>

02.ul.first li {

03.list-style-type:none;

04.}

  1.  

06.ul.second li {

07.list-style-type:disc;

08.}

  1.  

10.ul.third li {

11.list-style-type:circle;

12.}

  1.  

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 হিসেবে নেবে।