सूची-शैली - सीएसएस-ट्रिक्स

list-styleसंपत्ति एक आशुलिपि संपत्ति है कि एक घोषणा में तीन अलग-अलग सूची से संबंधित संपत्तियों के लिए सेट मान:

ul ( list-style: || || ; )

यहाँ वाक्य रचना का एक उदाहरण दिया गया है:

ul ( list-style: square outside none; )

जो निम्न लॉन्गहैंड संस्करण के समान होगा:

ul ( list-style-type: square; list-style-position: outside; list-style-image: none; )

शॉर्टहैंड में, यदि किसी भी मान को छोड़ दिया जाता है, तो वे अपनी प्रारंभिक स्थिति में वापस आ जाएंगे।

के लिए मान list-style-type

list-style-typeसंपत्ति, प्रत्येक मार्कर, या गोली की सामग्री की स्थापना की सूची में से सूची के प्रकार परिभाषित करता है। list-style-typeशामिल करने के लिए स्वीकार्य कीवर्ड मान :

• disc
• circle
• square
• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-latin
• upper-latin
• armenian
• georgian
• lower-alpha
• upper-alpha
• none

एमडीएन की एक पूरी सूची है। CSS3 में गैर-कीवर्ड मान पेश किए गए थे, और कुछ समर्थन देखने लगे हैं, जैसे:

ul ( list-style-type: "→"; )

निम्नलिखित डेमो में प्रत्येक कीवर्ड मान को प्रदर्शित करने के लिए अनऑर्डरित सूचियों का एक समूह शामिल है:

list-style-typeसंपत्ति पर लागू होता है सभी सूचियों के लिए, और किसी भी तत्व पर सेट होता है करने के लिए display: list-item।

सूची मार्कर का रंग वह होगा जो तत्व का गणना किया गया रंग है ( colorसंपत्ति के माध्यम से सेट किया गया है)।

के लिए मान list-style-position

list-style-positionसंपत्ति परिभाषित करता है जहां सूची मार्कर का स्थान निर्धारित करने के लिए, और यह दो में से एक मान स्वीकार करता है: insideया बाहर। ये paddingसूची से हटाए गए और बाईं ओर लाल सीमा के साथ दिखाए गए हैं :

के लिए मान list-style-image

list-style-imageसंपत्ति सूची मार्कर एक छवि के साथ सेट कर दिया जाता है कि क्या निर्धारित करता है और "कोई नहीं" या उस छवि में अंक एक यूआरएल के एक मूल्य स्वीकार करता है:

ul ( list-style-image: url(images/bullet.png.webp); )

अधिक प्रदर्शन

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है

IE6 / 7 के लिए सभी कीवर्ड मानों का समर्थन नहीं करते हैं list-style-typeऔर एक बग भी है जहां फ्लोट किए गए सूची आइटम अपने सूची मार्कर को प्रदर्शित नहीं करते हैं। यह list-style-imageसूची आइटम पर एक पृष्ठभूमि छवि (इसके बजाय ) का उपयोग करके हल किया जाता है ।