সিএসএস লিস্ট প্রোপার্টি আপনাকে অনুমতি দেবে:
- তালিকার ক্রম (ordered lists) এর জন্য বিভিন্ন আইটেম তালিকা চিহ্নিতকারী নির্ধারণ
- আইটেম তালিকা চিহ্নিতকারী হিসেবে image (স্টিল ছবি) নির্ধারণ করা
তালিকা (list)
এইচটিএমএল এ লিস্ট তৈরীর জন্য দুই ধরনের এলিমেন্ট আছে।
- unordered lists (<ul>) - লিস্ট আইটেম বুলেট প্রতিক দ্বারা চিহ্নিত করা হয়।
- ordered lists (<ol>) - লিস্ট আইটেম সংখ্যা বা বর্ণ দ্বারা চিহ্নিত করা হয়।
সিএসএস দিয়ে, লিস্টকে আরো বেশি স্টাইল করা যায় এবং লিস্ট আইটেম চিহ্নিতকারী হিসেবে image ব্যবহার করা যায়।
বিভিন্ন লিস্ট আইটেম চিহ্নিতকারী
লিস্ট স্টাইলিং এর জন্য সিএসএস list-style-type প্রোপার্টিজ ব্যবহার করে।
যেমনঃ
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
কিছু মান unordered lists এর জন্য এবং কিছু ordered lists এর জন্য।
একটি ইমেজ বা স্টিল ছবি লিস্ট আইটেম মার্কার হিসেবে ব্যবহার
স্টিল ছবিকে লিস্ট আইটেম চিহ্নিতকারী হিসেবে ব্যবহারের জন্য লিস্ট স্টাইলিং এর জন্য list-style-image প্রোপার্টিজ ব্যবহার করা হয়।
ul {
list-style-image: url('sqpurple.gif');
}
উপরের উদাহরণটি সকল ব্রাউজার সমানভাবে দেখায় না। ইন্টারনেট এক্সপ্লোরার (IE) এবং ওপেরাে ব্রাউজার Firefox, Chrome, and Safari থেকে ইমেজটি একটু বেশি উন্নত দেখায়।
যদি আপনি সকল ব্রাউজার এ চিহ্নিতকারী িইমেজটি সমানভাবে দেখাতে চান তাহলে নিচে একটি crossbrowser solution বর্ণনা করা হলো।
Crossbrowser সমাধান
নিচের উদাহরণটি সকল ব্রাউজারে চিহ্নিতকারী ছবিটি সমানভাবে দেখায়:
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px center;
padding-left: 15px;
}
উদাহরণের বর্ণনা:
- <ul> এর জন্য
- লিস্ট মার্কার মুছে ফেলতে list-style-type কে none হিসেবে নির্ধারণ করুন
- প্যাডিং এবং মার্জিন উভয় 0px হিসেবে নির্ধারণ করুন (ক্রস ব্রাউজার উপযুক্ততার জন্য)
- সকল <li> এর ভিতরের <ul> এর জন্য
- ইমেজ এর URL সেট করুন এবং এটিকে কেবলমাত্র একবার দেখান (কোন পুনরাবৃত্তি নয়)
- আপনি যেখানে চান সে অনুসারে ইমেজ এর অবস্থান ঠিক করুন (left 0px and vertical value: center)
- টেক্সটকে padding-left সহ অবস্থান ঠিক করুন
লিস্ট - সংক্ষিপ্ত প্রোপার্টি
list-style প্রোপার্টি হচ্চে সংক্ষিপ্ত প্রোপার্টি। এটি সকল লিস্ট প্রোপার্টি ঘোষণা করতে ব্যবহৃত হয়।
ul {
list-style: square inside url("sqpurple.gif");
}
যখন সংক্ষিপ্ত প্রোপার্টি ব্যবহার করা হবে তখন প্রোপার্টি মান এর ক্রম হবে:
list-style-type - (যদি লিস্ট স্টাইল ইমেজ নির্দিষ্ট হয়, প্রোপার্টি এর মান প্রদর্শিত হবে যদি কোন কারণে ইমেজটি প্রদর্শিত না হয়)list-style-position- (লিস্ট আইটেম চিহ্নিতকারীটি কন্টেন্ট এর ভেতরের দিকে নাকি বাহিরে দিকে প্রদর্শিত হবে তা নির্দিষ্ট করে)list-style-image- (লিস্ট আইটেম চিহ্নিতকারী হিসেবে ইমেজকে নির্দিষ্ট করে)
যদি এদের একটি প্রোপার্টি মান অনুপস্তিত থাকে, অনুপস্থিত প্রোপার্টি এর ডিফল্ট মান (যদি থাকে) প্রবেশ করবে।
নিজে নিজে চেষ্টা করো
অনুশীলন ০১ঃ
তালিকাটিকে unordered লিস্ট হতে "স্কয়ার" হিসেবে স্টাইল করো এবং ক্রমিক লিল্টটিকে "upper-roman" হিসেবে সেট করো।
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <p>This is an unordered list:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>This is an ordered list:</p> <ol> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html>
অনুশীলন ০২ঃ
"sqpurple.gif" ইমেজটিকে লিস্ট আইটেম চিহ্নিতকারী হিসেবে ব্যবহার করো।
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <p>This is an unordered list:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html>
সকলণ সিএসএস লিস্ট প্রোপার্টি
| প্রোপার্টি | বর্ণনা |
| list-style | সকল প্রোপার্টিকে সেট করার জন্য একবারে ঘোষণা করা হয়। |
| list-style-image | ইমেজকে লিস্ট আইটেম চিহ্নিতকারী হিসেবে চিহ্নিত করা হয়। |
| list-style-position | লিস্ট আইটেম চিহ্নিতকারীটি কন্টেন্ট এর ভেতরের দিকে নাকি বাহিরে দিকে প্রদর্শিত হবে তা নির্দিষ্ট করে |
| list-style-type | লিস্ট আইটেম চিহ্নিতকারী এর প্রকার নির্দিষ্ট করে |
