सीएसएस लिस्ट

CSS सूची गुण आपको सूची आइटम के चिह्न को स्थापित, परिवर्तित करने या चित्र को सूची आइटम के चिह्न के रूप में इस्तेमाल करने की अनुमति देते हैं。

सीएसएस लिस्ट

किसी भी वर्णनात्मक टेक्स्ट को किसी भी संख्या के रूप में लिया जा सकता है। जनगणना, सूर्य मंडल, वंशावली, दौरा मेनू, यहां तक कि आपके सभी दोस्तों को सूची या सूची की सूची के रूप में प्रस्तुत किया जा सकता है。

सूची इतनी विविध हैं कि इसका महत्व काफी है, इसलिए, CSS में सूची शैली कम होना एक बड़ी बाधा है。

सूची प्रकार

सूची की शैली को प्रभावित करने के लिए, सबसे सरल (और सबसे अधिक समर्थित) तरीका इसके चिह्न को परिवर्तित करना है。

उदाहरण में, एक अक्रमबद्ध सूची में, सूची आइटम के चिह्न (मार्कर) आइटमों के पास दिखाई देता है। एक क्रमबद्ध सूची में, चिह्न संख्या, अक्षर या किसी अन्य गणना प्रणाली के चिह्न हो सकता है。

सूची आइटम के चिह्न को परिवर्तित करने के लिए, आप इस गुण का उपयोग कर सकते हैं: लिस्ट-स्टाइल-टाइप:

ul {list-style-type : square}

ऊपरोक्त बयान अक्रमबद्ध सूची में सूची आइटम चिह्न को वर्गाकार सेट करता है。

सूची आइटम चित्र

कभी-कभी, सामान्य चिह्न पर्याप्त नहीं होते हैं। आप चिह्नों के लिए एक चित्र का उपयोग करना चाहते हैं, इसके लिए आप इसका उपयोग कर सकते हैं: लिस्ट-स्टाइल-इमेज गुण करके:

ul li {list-style-image : url(xxx.gif)}

सरलता के लिए एक url() मूल्य का उपयोग करके चित्र को चिह्न के रूप में इस्तेमाल कर सकते हैं。

सूची चिह्न स्थान

CSS2.1 यह निश्चित कर सकता है कि चिह्न सूची आइटम के बाहर या भीतर दिखाई देता है। यह इसके द्वारा किया जाता है: लिस्ट-स्टाइल-पोजिशन समाप्त。

शॉर्टनाम सूची शैली

सरलता के लिए, उपरोक्त 3 सूची शैली गुण को एक सुविधापूर्ण गुण में जोड़ा जा सकता है:लिस्ट-स्टाइलइस तरह:

li {list-style : url(example.gif) square inside}

list-style के मूल्य को किसी भी क्रम में सूचीबद्ध किया जा सकता है और ये सभी मूल्य अनदेखा किए जा सकते हैं। यदि एक मूल्य दिया गया है, तो अन्य डिफ़ॉल्ट मूल्य भर दिए जाएंगे。

CSS सूची उदाहरण:

अक्रमबद्ध सूची में विभिन्न प्रकार के सूची चिह्न
इस उदाहरण में, सीएसएस में सभी विभिन्न प्रकार के सूची मार्कर को दिखाया गया है।
क्रमबद्ध सूची में विभिन्न प्रकार के सूची आइटमों का चिह्न
इस उदाहरण में, सीएसएस में सभी विभिन्न प्रकार के सूची मार्कर को दिखाया गया है।
सभी लिस्ट स्टाइल टाइप
इस उदाहरण में, सीएसएस में सभी विभिन्न प्रकार के सूची मार्कर को दिखाया गया है。
चित्र को लिस्ट मार्कर के रूप में सेट करना
चित्र को लिस्ट मार्कर के रूप में इस्तेमाल करना
लिस्ट मार्कर को स्थापित करना
इस उदाहरण में, लिस्ट मार्कर के स्थान को दिखाया गया है。
सभी लिस्ट एट्रिब्यूट को एक घोषणा में परिभाषित करना
इस उदाहरण में, सूची के सभी एट्रिब्यूट को एक शॉर्ट हार्डैक में सेट किया गया है。

सीएसएस लिस्ट एट्रिब्यूट (लिस्ट)

एट्रिब्यूट वर्णन
लिस्ट-स्टाइल शॉर्ट हार्डैक
लिस्ट-स्टाइल-इमेज चित्र को सूची आइटम के मार्कर के रूप में सेट करता है。
लिस्ट-स्टाइल-पोजिशन सूची में सूची आइटम के मार्कर के स्थान को सेट करता है。
लिस्ट-स्टाइल-टाइप सूची आइटम के मार्कर के प्रकार को सेट करता है。
मार्कर-ऑफसेट