সিএসএস আমাদের পটভূমি, তালিকা-শৈলী বৈশিষ্ট্য, ফন্ট স্টাইলিং, ইত্যাদি নির্দিষ্ট করে শৈলী তালিকার অনুমতি দেয়। তালিকা-শৈলী বৈশিষ্ট্য হল তালিকা-শৈলী-প্রকার, তালিকা-শৈলী নির্দিষ্ট করার জন্য একটি সংক্ষিপ্ত বিবরণ -চিত্র, এবং তালিকা-শৈলী-অবস্থান একই ক্রমে।
সিনট্যাক্স
CSS তালিকা-শৈলী সম্পত্তির সিনট্যাক্স নিম্নরূপ -
Selector { list-style: /*value*/ }
উদাহরণ
নিম্নলিখিত উদাহরণগুলি তালিকার স্টাইলিং-
চিত্রিত করে<!DOCTYPE html> <html> <head> <style> ul { display: flex; float: left; list-style-image: url("https://www.tutorialspoint.com/images/reactjs.png"); background: lightseagreen; list-style-position: inside; } li { background: azure; margin: 5px 20px; } </style> </head> <body> <h3>ReactJS</h3> <ul> <li>Lesson 1</li> <li>Lesson 2</li> <li>Lesson 3</li> <li>Lesson 4</li> <li>Lesson 5</li> </ul> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়---
উদাহরণ
<!DOCTYPE html> <html> <head> <style> ol { width: 40%; color: white; list-style: lower-greek inside; background-image: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg"); } li { background-color: rgba(0,0,0,0.6); margin: 5px 30px; } </style> </head> <body> <h2>Ethereum</h2> <ol> <li>Smart Contracts</li> <li>Ganache</li> <li>Creating Wallet </li> <li>Deploying Contract</li> </ol> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -