কম্পিউটার টিউটোরিয়াল

CSS-এ ইমেজকে লিস্ট مارকার হিসেবে ব্যবহার

CSS list-style-image প্রপার্টি লিস্ট আইটেমের জন্য একটি ইমেজকে مارকার হিসেবে সেট করতে ব্যবহৃত হয়।

সিনট্যাক্স

CSS list-style-image প্রপার্টির সিনট্যাক্স নিম্নরূপ:

Selector {    list-style-image: /*মান*/ }

উদাহরণ

নিচের উদাহরণগুলো CSS list-style-image প্রপার্টি উদাহরণ দেয়:

<!DOCTYPE html> <html> <head> <style> ul {    width: 150px;    list-style-image: url("https://www.tutorialspoint.com/images/Servlets.png");    background: goldenrod; } li {    text-align: center;    background: lavenderblush;    margin: 5px 30px; } </style> </head> <body> <h2>Servlets</h2> <ul> <li>Client Request</li> <li>Server Response</li> <li>Cookies Handling</li> <li>Session Tracking</li> </ul> </body> </html>

আউটপুট

এটি নিচের আউটপুট দেয়:

CSS-এ ইমেজকে লিস্ট مارকার হিসেবে ব্যবহার

আরেকটি উদাহরণ

<!DOCTYPE html> <html> <head> <style> ul {    margin-left: 20px;    list-style-image: url("https://www.tutorialspoint.com/images/hibernate.png"); } li {    font-size: 1.3em;    text-align: center;    background: burlywood;    margin: 3px; } </style> </head> <body> <h2>Hibernate টিউটোরিয়াল</h2> <ul> <li>Sessions</li> <li>Persistent Class</li> <li>Mapping Files</li> <li>Mapping Types</li> <li>Annotations</li> </ul> </body> </html>

আউটপুট

এটি নিচের আউটপুট দেয়:

CSS-এ ইমেজকে লিস্ট مارকার হিসেবে ব্যবহার

  1. CSS জেনারেল সিবলিং সিলেক্টর: সমান প্যারেন্টের পরের সিবলিংস সিলেক্ট করা

  2. CSS দিয়ে ক্যালেন্ডার তৈরি করার পদ্ধতি

  3. CSS দিয়ে বুলেটসহित्य অনর্ডার্ড লিস্ট তৈরি করার পদ্ধতি

  4. CSS দিয়ে বেসিক লিস্টকে লিস্ট গ্রুপে রূপান্তর করার পদ্ধতি