सीएसएस सूची शैली

सूचियाँ HTML में डेटा प्रदर्शित करने का एक महत्वपूर्ण तरीका हैं। जब आपके पास एक सामान्य विषय के साथ कई आइटम हों, जैसे जूते के आकार या नेविगेशन उपकरण, तो डेटा प्रस्तुत करने का सबसे प्रभावी तरीका सूची का उपयोग करना हो सकता है।

डिफ़ॉल्ट रूप से, HTML में सूचियाँ काफी स्पष्ट हैं। यहीं पर सीएसएस सूची-शैली की संपत्ति आती है। सूची-शैली की संपत्ति और इसकी उप संपत्तियों का उपयोग आपकी अनूठी वेबसाइट डिजाइन के पूरक के लिए सूचियों को अनुकूलित करने के लिए किया जाता है।

यह ट्यूटोरियल उदाहरणों के साथ कवर करेगा कि कैसे सूची-शैली की संपत्ति और उसके उप गुणों का उपयोग करके सीएसएस में सूचियों को स्टाइल किया जाए। यह यह भी कवर करेगा कि किसी सूची और उसके आइटम के पृष्ठभूमि रंग कैसे सेट करें। इस ट्यूटोरियल को पढ़ने के बाद, आप CSS का उपयोग करके स्टाइलिंग सूचियों के विशेषज्ञ होंगे।

एचटीएमएल और सीएसएस सूचियां

सूचियों का उपयोग कई जुड़े हुए आइटम दिखाने के लिए किया जाता है। HTML में, तीन प्रकार की सूचियाँ हैं जिनका उपयोग आप डेटा प्रस्तुत करने के लिए कर सकते हैं। य़े हैं:

• अनियंत्रित सूचियां (
  ) - उन वस्तुओं की सूची जिनके मूल्यों को बुलेट बिंदुओं का उपयोग करके चिह्नित किया जाता है।
  • आदेशित सूचियां (
    ) - उन वस्तुओं की सूची जिनके मूल्यों को एक आदेश प्रणाली (उदाहरण के लिए, अनुक्रमिक संख्या या अक्षर) का उपयोग करके चिह्नित किया जाता है।
    1. परिभाषा सूचियां (

       ) - विवरण के साथ आइटम की एक सूची।

  यदि आप HTML सूचियों के बारे में अधिक जानने में रुचि रखते हैं, तो HTML में सूचियों पर हमारा लेख पढ़ें।
  

  उपरोक्त सूची प्रकारों में से प्रत्येक अपनी डिफ़ॉल्ट HTML शैली के साथ आता है। इसके अतिरिक्त, CSS कई गुण प्रदान करता है जिनका उपयोग आप अपनी सूचियों को अधिक सौंदर्यपूर्ण रूप से मनभावन बनाने और अपनी शैली मार्गदर्शिका के साथ बेहतर ढंग से संरेखित करने के लिए कर सकते हैं।
  

  CSS सूची गुण आपको इसकी अनुमति देते हैं:
  

  • आदेशित सूचियों के लिए आइटम मार्कर बदलें।
  • अनियंत्रित सूचियों के लिए आइटम मार्कर बदलें।
  • छवि को सूची आइटम मार्कर के रूप में सेट करें।
  • सूचियों और उनके आइटम में पृष्ठभूमि रंग जोड़ें।

  इस ट्यूटोरियल में, हम CSS में स्टाइल लिस्ट के दो व्यापक तरीकों पर चर्चा करेंगे:लिस्ट-स्टाइल प्रॉपर्टी इसके अलग-अलग सब प्रॉपर्टीज के जरिए, और लिस्ट-स्टाइल शॉर्टहैंड प्रॉपर्टी। सूची-शैली संपत्ति के उप गुण हैं:
  

  81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

  बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

  • सूची-शैली-प्रकार
  • सूची-शैली-स्थिति
  • सूची-शैली-छवि

  सूची-शैली आशुलिपि संपत्ति को इस प्रकार लिखा जाता है:
  

  <पूर्व>सूची-शैली:[सूची-शैली-प्रकार] [सूची-शैली-स्थिति] [सूची-शैली-छवि];

  हम यह भी चर्चा करेंगे कि सूचियों और सूची मदों में पृष्ठभूमि रंग कैसे जोड़ें।

  मूल HTML सूची उदाहरण

  सबसे पहले, आइए HTML में एक सूची का एक उदाहरण देखें। मान लीजिए कि एक स्थानीय बेकरी हमसे एक वेब पेज बनाने के लिए कहती है जिसमें ग्राहकों के घरेलू उपयोग के लिए व्यंजनों की एक सूची शामिल है।
  

  यहाँ मूल HTML कोड है जिसका उपयोग हम अपनी सूची को परिभाषित करने के लिए करेंगे:

   
  बटरफ्लाई केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन्स
  

  हमारी सूची इस प्रकार दिखाई देती है:
  

  

  हमारी सूची में पाँच आइटम हैं। हम प्रत्येक सूची आइटम को <li> . के भीतर संलग्न करते हैं टैग। ("ली" का अर्थ "सूची आइटम" है।) हम इन्हें संलग्न करते हैं <li> <ul> . के भीतर टैग उपनाम। <ul> टैग एक अनियंत्रित सूची की पहचान करता है।
  

  चूंकि यह एक अनियंत्रित सूची है, हमारा वेब ब्राउज़र सूची में प्रत्येक आइटम से पहले एक बुलेट बिंदु रखता है। (यदि यह एक ऑर्डर की गई सूची होती, तो हमारा वेब ब्राउज़र सूची में प्रत्येक आइटम से पहले एक ऑर्डर करने योग्य मान - आमतौर पर एक संख्या या एक अक्षर - रखता है।)
  

  अब, आइए देखें कि हम सूची-शैली संपत्ति का उपयोग करके किसी सूची को कैसे शैलीबद्ध कर सकते हैं।

  सूची आइटम मार्कर

  सूची-शैली-प्रकार की संपत्ति का उपयोग किसी सूची में आइटम के लिए उपयोग किए जाने वाले मार्कर के प्रकार को निर्दिष्ट करने के लिए किया जाता है।

  अनियंत्रित सूची आइटम मार्कर

  मान लीजिए कि बेकरी हमें यह दिखाने के लिए कहती है कि प्रत्येक सूची आइटम से पहले एक वृत्त बुलेट बिंदु बनाम एक वर्ग बुलेट बिंदु के साथ उनकी सूची कैसी दिखेगी। बेकरी के लिए ये डिज़ाइन बनाने के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं:

  styles.cssli.circlebulletPoint { list-style-type:Circle;}li.squarebulletPoint { list-style-type:वर्ग;}index.html
   
  बटरफ्लाई केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन
  
   
  
   हमारा कोड लौटाता है:
   
    
  
   जैसा कि आप देख सकते हैं, हमारा पहला सूची आइटम सर्कल बुलेट पॉइंट मार्कर शैली का उपयोग करता है। हमने अपनी पहली सूची आइटम के लिए वर्ग मान "circlebulletPoint" - और इसलिए उस मान की संबंधित शैली- निर्दिष्ट करके इसे पूरा किया। हमने अपनी दूसरी सूची आइटम के लिए वर्ग मान "स्क्वायरबुलेटपॉइंट" निर्दिष्ट किया है, इसलिए वेब ब्राउज़र उस आइटम से पहले एक वर्ग बुलेट बिंदु प्रदर्शित करता है। 
   
   
  
   अन्य सूची-शैली-प्रकार हैं जिन्हें सूची में लागू किया जा सकता है, जो हैं:
   
   
   
  डिस्क
   
  मंडली
   
  दशमलव
   
  दशमलव-अग्रणी-शून्य
   
  लोअर-रोमन
   
  ऊपरी रोमन
   
  निचला-ग्रीक
   
  निचला-लैटिन
   
  ऊपरी-लैटिन
   
  अर्मेनियाई
   
  जॉर्जियाई
   
  लोअर-अल्फ़ा
   
  कोई नहीं
   
   
  
   हम इनमें से कुछ पर चर्चा करते हैं जो अगले भाग में आदेशित सूचियों पर लागू होती हैं।
   
  आदेशित सूची आइटम मार्कर
   
  
   आदेशित सूचियों की अपनी आइटम मार्कर शैलियाँ होती हैं। 
   
   
  
   मान लीजिए हम चाहते हैं कि बेकरी की रेसिपी एक ऑर्डर की गई सूची में प्रदर्शित हो। हम यह देखना चाहते हैं कि सूची में प्रत्येक आइटम से पहले एक लोअरकेस वर्णानुक्रम द्वारा चिह्नित इसके क्रम के साथ हमारी सूची कैसी दिखेगी, और सूची में प्रत्येक आइटम से पहले एक अपरकेस रोमन अंक के साथ यह कैसा दिखेगा। हम इस कार्य को पूरा करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:
   
  styles.cssli.alpha { सूची-शैली-प्रकार:निचला-अल्फा;}li.roman { सूची-शैली-प्रकार:ऊपरी-रोमन;}index.html
   
  तितली केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन
   
  
   हमारा कोड लौटाता है:
   
    
  
   इस उदाहरण में, हमने एक अनियंत्रित सूची के बजाय एक आदेशित सूची (
  ) का उपयोग किया है। यह हमें हमारी सूची को संख्याओं (या अक्षरों, आदि) के साथ ऑर्डर करने की अनुमति देता है। फिर, हमने अपनी सूची में पहले आइटम को लोअरकेस वर्णमाला के अक्षर से और हमारी सूची में दूसरे आइटम को बड़े रोमन अंक से चिह्नित किया।
   
  डिफ़ॉल्ट सूची आइटम मार्कर स्टाइलिंग निकालें
   
  
   सूची से डिफ़ॉल्ट स्टाइलिंग के पहलुओं को हटाने के लिए हम अपने कोड में तीन CSS गुणों का उपयोग कर सकते हैं:सूची-शैली-प्रकार, मार्जिन और पैडिंग।
   
  सूची-शैली-प्रकार को कोई नहीं पर सेट करना
   
  
   यदि हम सूची आइटम से पहले किसी भी प्रकार का बुलेट बिंदु या क्रमसूचक संकेतक (जैसे कोई संख्या या अक्षर) नहीं चाहते हैं, तो हम सूची-शैली-प्रकार की संपत्ति को कोई नहीं पर सेट कर सकते हैं। सूची में किसी भी बुलेट बिंदु या क्रमसूचक संकेतक को हटाने के लिए इस संपत्ति का उपयोग करने का एक उदाहरण यहां दिया गया है:
   
  styles.cssul { list-style-type:none;}index.html
   
  बटरफ्लाई केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन्स
  
   
  
   हमारा कोड लौटाता है:
   
    
  
   हमारी सूची अभी भी एक सूची के रूप में संरचित है, लेकिन जब वेब पेज पर प्रदर्शित होती है, तो सूची के आइटम में मार्कर नहीं होते हैं।
   
  मार्कर स्थिति
   
  
   सूची-शैली-स्थिति गुण का उपयोग किसी सूची में सूची आइटम मार्करों की स्थिति निर्दिष्ट करने के लिए किया जाता है। 
   
   
  
   ऐसी दो स्थितियां हैं जिनमें किसी सूची के लिए आइटम मार्कर दिखाई दे सकते हैं:अंदर और बाहर। यदि सूची मार्कर सूची के अंदर दिखाई देते हैं, तो टेक्स्ट सीधे आइटम मार्करों के बगल में दिखाई देगा; यदि सूची मार्कर सूची के बाहर दिखाई देते हैं, तो सूची मार्करों और सूची में टेक्स्ट आइटम के बीच एक अंतर होगा। 
   
   
  
   यहां दो उदाहरण सीएसएस नियम हैं जो प्रदर्शित करते हैं कि इन दोनों राज्यों में सूची-शैली-स्थिति कैसे लागू की जा सकती है:
   
  ul.a { सूची-शैली-स्थिति:बाहर;}ul.b { सूची-शैली-स्थिति:अंदर;}
   
  
   हमारी पहली सूची में, हमने सूची-शैली-स्थिति:बाहरी शैली का उपयोग किया। यह सूचियों पर लागू डिफ़ॉल्ट शैली है। जैसे, अगर हमने अपने कोड के ब्लॉक में यह या किसी अन्य सूची-शैली-स्थिति को निर्दिष्ट नहीं किया होता, तो ब्राउज़र सूची आइटम मार्करों के लिए इस स्थिति में चूक जाता। इस शैली का उपयोग करने वाली हमारी बेकरी सूची का कोड निम्नलिखित है:
   
   
  बटरफ्लाई केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन्स
  
   
  
   कोड लौटाता है:
   
    
  
   इस शैली में, सूची आइटम मार्कर (इस मामले में, बुलेट पॉइंट) हमारी सूची आइटम के बाहर दिखाई देते हैं। 
   
   
  
   हमारी दूसरी सूची में, हमने अपने सूची आइटम मार्करों की स्थिति को "अंदर" के रूप में निर्दिष्ट किया है। इस शैली का उपयोग करने वाली हमारी बेकरी सूची का कोड निम्नलिखित है:
   
   
  बटरफ्लाई केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन्स
  
   
  
   कोड लौटाता है:
   
    
  
   यह बताना मुश्किल है लेकिन हमारे सूची आइटम मार्करों की स्थिति अब सूची आइटम से बाहर है।
   
  इमेज मार्कर
   
  
   सूचियाँ अक्सर छवियों के साथ कस्टम मार्कर का उपयोग करती हैं। यदि आप किसी सूची आइटम के लिए मार्कर को किसी छवि पर सेट करना चाहते हैं, तो आप सूची-शैली-छवि सीएसएस संपत्ति का उपयोग कर सकते हैं। 
   
   
  
   मान लीजिए कि बेकरी हमें सूची आइटम मार्करों को उनकी सूची में केक की छवियों (बुलेट पॉइंट, नंबर, आदि के बजाय) में बदलने के लिए कहती है। इस कार्य को पूरा करने के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं:
   
  styles.cssul { list-style-image:url("https://img.icons8.com/small/16/000000/cake.png");}index.html
   
  बटरफ्लाई केक 
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन
  
   
  
   हमारा कोड लौटाता है:
   
    
  
   जैसा कि आप देख सकते हैं, डिफ़ॉल्ट सूची आइटम मार्कर का उपयोग करने के बजाय, हमने अपना स्वयं का उपयोग किया। इस मामले में, हमारा सूची आइटम मार्कर केक की एक छवि है।
   
  स्टाइल शॉर्टहैंड प्रॉपर्टी की सूची बनाएं
   
  
   हम सूची-शैली संपत्ति के उप-गुणों पर चर्चा कर रहे हैं। इनसे हमें अपनी सूची में अलग-अलग शैलियों को लागू करने की अनुमति मिली है। 
   
   
  
   हालांकि, स्टाइलिंग सूचियों का एक अधिक कुशल तरीका है। सूची को स्टाइल करने के लिए प्रत्येक व्यक्तिगत उप-प्रॉपर्टी का उपयोग करने के बजाय, हम सूची-शैली शॉर्टहैंड प्रॉपर्टी का उपयोग कर सकते हैं। यहाँ सूची-शैली आशुलिपि संपत्ति के लिए वाक्य रचना है:
   
  ul { सूची-शैली:[सूची-शैली-प्रकार] [सूची-शैली-स्थिति] [सूची-शैली-छवि];
   
  
   ऊपर निर्दिष्ट मानों का क्रम वह क्रम है जिसे आपको सूची-शैली आशुलिपि संपत्ति के साथ उपयोग करने की आवश्यकता है। यदि आप शॉर्टहैंड सिंटैक्स बनाने वाले तीन उप गुणों में से किसी एक के लिए कोई मान निर्दिष्ट नहीं करते हैं, तो वेब ब्राउज़र उस उप-संपत्ति के डिफ़ॉल्ट मान का उपयोग करेगा। 
   
   
  
   मान लीजिए कि हम केक छवि के साथ बेक किए गए सामान व्यंजनों की हमारी सूची को स्टाइल करना चाहते हैं और प्रत्येक सूची आइटम मार्कर को हमारी सूची के बाहर ले जाना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
   
  styles.cssul { सूची-शैली:url के बाहर ('https://img.icons8.com/small/16/000000/cake.png');}index.html
   
  बटरफ्लाई केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन
  
   
  
   हमारा कोड लौटाता है:
   
    
  
   हमारी सूची अब प्रत्येक सूची आइटम मार्कर के लिए केक छवि का उपयोग करती है। इसके अलावा, प्रत्येक सूची आइटम मार्कर को हमारी सूची के बाहर स्टाइल किया गया है। 
   
  सीएसएस सूची रंग
   
  
   जब आप एक सूची तैयार कर रहे हों, तो आप यह तय कर सकते हैं कि आप सूची को पृष्ठभूमि रंग प्रदर्शित करना चाहते हैं। 
   
   
  
   मान लीजिए कि बेकरी हमें पूरी सूची के पृष्ठभूमि रंग को हल्के नीले रंग में सेट करने और सूची में प्रत्येक आइटम के लिए गुलाबी पृष्ठभूमि रंग का उपयोग करने के लिए कहती है। हम इस कार्य को पूरा करने के लिए CSS बैकग्राउंड प्रॉपर्टी का उपयोग कर सकते हैं, जैसे:
   <पूर्व>उल {पृष्ठभूमि:हल्का नीला; पैडिंग:10px;}उल ली {पृष्ठभूमि:गुलाबी; मार्जिन:10px;}

  हमारा कोड लौटाता है:

   
  बटरफ्लाई केक
   
  चॉकलेट ट्रेबेक
   
  लेमन पाउंड केक
   
  पीनट बटर फ्लैपजैक
   
  चॉकलेट मफिन्स
  

  हमारे कोड में, हमने <ul> . पर बैकग्राउंड प्रॉपर्टी का इस्तेमाल करके हल्का नीला बैकग्राउंड कलर लगाया है तत्व, जो एक अनियंत्रित सूची बनाता है। हमने <ul> . भी दिया है पैडिंग प्रॉपर्टी का उपयोग करके एक 10px पैडिंग तत्व।
  

  

  हमने गुलाबी पृष्ठभूमि भी लागू की और प्रत्येक सूची आइटम के चारों ओर 10px मार्जिन बनाया।
  

  जैसा कि आप ऊपर देख सकते हैं, हमने अपनी शैलियों को "उल ली" चयनकर्ता में शामिल करके इसे पूरा किया। यह चयनकर्ता बताता है कि गुलाबी पृष्ठभूमि और 10px मार्जिन सभी पर लागू किया जाना चाहिए <li> <ul> . में संलग्न टैग टैग।

  निष्कर्ष

  जब आप HTML सूचियों के साथ काम कर रहे हों, तो आप उन सूचियों में कस्टम शैलियों को लागू करने के लिए CSS का उपयोग कर सकते हैं ताकि उन्हें अधिक सौंदर्यपूर्ण रूप से प्रसन्न किया जा सके। सूची-शैली की संपत्ति का उपयोग सीएसएस में एक सूची में शैलियों को लागू करने (या शैलियों को हटाने) के लिए किया जाता है।
  

  इस ट्यूटोरियल में उदाहरणों के साथ चर्चा की गई है कि CSS लिस्ट-स्टाइल प्रॉपर्टी और इसके तीन उप-प्रॉपर्टी का उपयोग कैसे करें। हमने यह भी चर्चा की कि किसी सूची और उसके भीतर की वस्तुओं के लिए पृष्ठभूमि रंग कैसे सेट करें।
  

  अब आपके पास वह ज्ञान है जिसकी आपको CSS में एक समर्थक की तरह स्टाइलिंग सूचियाँ शुरू करने की आवश्यकता है!