अनऑर्डर्ड और ऑर्डर्ड लिस्ट्स की स्टाइल और पोजिशन को CSS प्रॉपर्टीज़ list-style-type, list-style-image और list-style-position द्वारा फॉर्मेट किया जा सकता है।
सिंटैक्स
CSS list-style प्रॉपर्टी का सिंटैक्स निम्नलिखित है:
Selector { list-style: /*value*/ }उदाहरण
निम्नलिखित उदाहरण CSS list-style प्रॉपर्टी को दर्शाते हैं:
निम्नलिखित उदाहरण ऑर्डर्ड लिस्ट को स्टाइल करता है:
<!DOCTYPE html> <html> <head> <style> ol { list-style: upper-roman; line-height: 150%; } </style> </head> <body> <h2>Latest C# Versions</h2> <ol> <li>C# 8.0</li> <li>C# 7.3</li> <li>C# 7.2</li> <li>C# 7.1</li> <li>C# 7.0</li> </ol> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
उदाहरण
निम्नलिखित उदाहरण अनऑर्डर्ड लिस्ट को स्टाइल करता है:
<!DOCTYPE html> <html> <head> <style> ul > ul{ list-style: circle inside; } li:last-child { list-style-type: square; } </style> </head> <body> <h2>Programming Languages</h2> <ul> <li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li> <li>Java programming language developed by James Gosling.</li> <ul> <li>Core Java</li> <li>Advanced Java</li> </ul> <li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li> </ul> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
