CSS list-style-type प्रॉपर्टी का उपयोग लिस्ट आइटम्स के मार्कर को स्टाइल करने के लिए किया जाता है। हम इन स्टाइल्स को अनऑर्डर्ड और ऑर्डर्ड दोनों प्रकार की सूचियों पर लागू कर सकते हैं।
सिंटैक्स
CSS list-style-type प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { list-style-type: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण सूचियों की स्टाइलिंग को दर्शाते हैं:
<!DOCTYPE html> <html> <head> <style> ol li { padding: 5px; list-style-type: lower-roman; } li:last-child { font-size: 1.2em; font-style: italic; list-style-type: circle; } </style> </head> <body> <ol> <li>demo1</li> <li> demo 2 <ul> <li>demo a</li> <li>demo b</li> </ul> </li> <li>demo 3</li> </ol> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> ol li { width: 50%; margin: 5px; font-size: 1.2em; list-style-type: devanagari; border: thin solid; background: linear-gradient(to right, lightgreen, pink,lightblue); } li:last-child { font-style: italic; list-style-type: lower-latin; } </style> </head> <body> <ol> <li>Eh!?</li> <li> demo one <ol> <li>What!?</li> <li>demo two</li> </ol> </li> <li>demo 3</li> <li>demo four</li> </ol> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
