CSS list-style प्रॉपर्टी का उपयोग

परिचय

`list-style` शॉर्टहैंड प्रॉपर्टी है जो `list-style-type`, `list-style-position`, `list-style-image` को एक साथ सेट करती है।

सिंटैक्स

list-style: <type> || <position> || <image>;

घटक प्रॉपर्टीज

प्रॉपर्टी	मान	विवरण
list-style-type	disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, आदि	मार्कर प्रकार
list-style-position	outside (डिफ़ॉल्ट), inside	मार्कर स्थिति
list-style-image	url(), none	कस्टम इमेज मार्कर

उदाहरण

<html>
<head>
    <style>
        /* शॉर्टहैंड: type position */
        ul.basic {
            list-style: square inside;
        }
        
        /* कस्टम इमेज मार्कर */
        ul.image-bullets {
            list-style: url('/images/bullet.png') outside;
        }
        
        /* क्रमांकित सूची */
        ol.roman {
            list-style: upper-roman outside;
        }
        
        /* कोई मार्कर नहीं */
        ul.no-bullets {
            list-style: none;
        }
    </style>
</head>
<body>
    <ul class="basic">
        <li>Table</li>
        <li>Chair</li>
    </ul>
    
    <ol class="roman">
        <li>पहला चरण</li>
        <li>दूसरा चरण</li>
    </ol>
</body>
</html>

व्यक्तिगत प्रॉपर्टीज का उपयोग (अधिक नियंत्रण)

<style>
ul.detailed {
    list-style-type: "★ ";  /* कस्टम स्ट्रिंग (CSS Counter Styles Level 3) */
    list-style-position: inside;
    /* list-style-image: url(...); */  /* टाइप को ओवरराइड करता है */
}
</style>

सर्वोत्तम अभ्यास

शॉर्टहैंड `list-style` सुविधाजनक है लेकिन व्यक्तिगत प्रॉपर्टीज अधिक नियंत्रण देती हैं
`list-style-image` उपयोग करते समय फॉलबैक `list-style-type` प्रदान करें
`inside` पोजीशन मार्कर को कंटेंट फ्लो में रखता है, `outside` बॉक्स के बाहर
रिसेट के लिए: `list-style: none` (सामान्य CSS रिसेट में शामिल)