HTML में नंबरिंग स्टाइल कैसे बदलें। सीएसएस का उपयोग करके HTML नेस्टेड क्रमांकित सूचियों में सही क्रमांकन। स्वचालित क्रमांकन के साथ नेस्टेड सूचियाँ

क्रमांकित सूचियाँ उनके क्रम संख्या के साथ तत्वों का एक संग्रह है। नंबरिंग का प्रकार और प्रकार तत्व मापदंडों पर निर्भर करता है

, जिसका उपयोग सूची बनाने के लिए किया जाता है। निम्नलिखित मान क्रमांकन तत्वों के रूप में कार्य कर सकते हैं:
• अरबी अंक (1, 2, 3, ...);
• दस से कम संख्याओं के लिए अग्रणी शून्य वाले अरबी अंक (01, 02, 03, ...,10);
• बड़े लैटिन अक्षर (ए, बी, सी, ...);
• लोअरकेस लैटिन अक्षर (ए, बी, सी, ...);
• रोमन अंक अपरकेस(I, II, III, ...);
• लोअरकेस रोमन अंक (i, ii, iii, ...);
• अर्मेनियाई नंबरिंग;
• जॉर्जियाई नंबरिंग.

व्यावहारिक दृष्टिकोण से, बुलेटेड सूची में वस्तुओं को प्रदर्शित करने के सिद्धांतों को क्रमांकित सूची के समान ही लागू किया जा सकता है। लेकिन यह देखते हुए कि हम एक गणना से निपट रहे हैं, कुछ विशेषताएं हैं जिन पर आगे चर्चा की जाएगी।

सूची क्रमांकन

इसे किसी भी संख्या से सूची प्रारंभ करने की अनुमति है; इस उद्देश्य के लिए तत्व की प्रारंभ विशेषता का उपयोग किया जाता है

या तत्व का मूल्य
1. . मान कोई भी पूर्णांक है सकारात्मक संख्या. इससे कोई फर्क नहीं पड़ता कि किस प्रकार की संख्या निर्धारित की गई है, भले ही लैटिन अक्षरों का उपयोग सूची के रूप में किया गया हो। यदि प्रारंभ और मान दोनों विशेषताओं को एक ही समय में किसी सूची में लागू किया जाता है, तो बाद वाले को प्राथमिकता दी जाती है और क्रमांकन को मान द्वारा निर्दिष्ट संख्या से प्रदर्शित किया जाता है, जैसा कि उदाहरण 1 में दिखाया गया है।

   उदाहरण 1: सूची क्रमांकन बदलना

   4. आपको अपने कार्यस्थल का अच्छे से ख्याल रखना चाहिए।
   5. कमरे में प्रकाश व्यवस्था को समायोजित करें ताकि प्रकाश स्रोत ऑपरेटर के किनारे या पीछे स्थित हो।
   10. चिकित्सीय जटिलताओं से बचने के लिए मुलायम सीट वाली कुर्सी चुनने की सलाह दी जाती है।
   
   
   

   इस उदाहरण में सूची का पहला तत्व रोमन अंक IV से शुरू होगा, क्योंकि प्रारंभ = "4" विशेषता निर्दिष्ट है, फिर संख्या V आती है, और अंतिम तत्व क्रम से बाहर आता है और उसे संख्या X सौंपी जाती है (चित्र) 1).

   चावल। 1. सूची में रोमन अंक

   संख्याएँ लिखना

   डिफ़ॉल्ट रूप से, क्रमांकित सूची की एक निश्चित उपस्थिति होती है: पहले एक संख्या होती है, फिर एक बिंदु होता है, और उसके बाद पाठ को एक स्थान से अलग करके प्रदर्शित किया जाता है। लेखन का यह रूप दृश्यात्मक और सुविधाजनक है, लेकिन कुछ डेवलपर सूचियों की संख्या को डिज़ाइन करने का एक अलग तरीका देखना पसंद करते हैं। अर्थात्, ताकि एक बिंदु के बजाय एक समापन ब्रैकेट हो, जैसा कि चित्र में दिखाया गया है। 2 या ऐसा ही कुछ.

   

   चावल। 2. कोष्ठक के साथ क्रमांकित सूची दृश्य

   शैलियाँ आपको सामग्री और प्रति-वृद्धि गुणों का उपयोग करके सूची क्रमांकन के प्रकार को बदलने की अनुमति देती हैं। सबसे पहले, ol चयनकर्ता को काउंटर-रीसेट: आइटम पर सेट करने की आवश्यकता है, यह आवश्यक है ताकि प्रत्येक नई सूची में नंबरिंग नए सिरे से शुरू हो। अन्यथा, नंबरिंग जारी रहेगी और आपको 1,2,3 के बजाय 5,6,7 दिखाई देगा। आइटम का मूल्य काउंटर के लिए एक विशिष्ट पहचानकर्ता है; हम इसे स्वयं चुनते हैं। इसके बाद, आपको मूल मार्करों को स्टाइल प्रॉपर्टी सूची-शैली-प्रकार के माध्यम से none मान के साथ छिपाने की आवश्यकता है।

   सामग्री संपत्ति आम तौर पर छद्म तत्वों के ::बाद और ::पहले के संयोजन में काम करती है। इस प्रकार, li::before निर्माण कहता है कि सूची के प्रत्येक तत्व से पहले कुछ सामग्री जोड़ी जानी चाहिए (उदाहरण 2)।

   उदाहरण 2. अपनी खुद की नंबरिंग बनाना

   ली::पहले ( सामग्री: काउंटर(आइटम) ") "; /* संख्याओं में एक कोष्ठक जोड़ें */ प्रति-वृद्धि: आइटम; /* काउंटर का नाम सेट करें */ )

   मूल्य काउंटर (आइटम) के साथ सामग्री संपत्ति एक संख्या प्रदर्शित करती है; कोष्ठक जोड़ने से, जैसा कि इस उदाहरण में दिखाया गया है, हमें आवश्यक प्रकार की संख्या प्राप्त होती है। सूची संख्या को एक से बढ़ाने के लिए प्रति-वृद्धि की आवश्यकता है। ध्यान दें कि आइटम नामक एक ही पहचानकर्ता का उपयोग हर जगह किया जाता है। अंतिम कोड उदाहरण 3 में दिखाया गया है।

   उदाहरण 3: सूची दृश्य बदलना

   1. पहला
   2. दूसरा
   3. तीसरा
   4. चौथी
   
   
   

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

   सामग्री: "[" काउंटर(आइटम) "] ";

   रूसी अक्षरों के साथ सूची

   लैटिन अक्षरों के साथ एक क्रमांकित सूची है, लेकिन सूची के लिए कोई रूसी अक्षर नहीं हैं। इन्हें उपरोक्त तकनीक का उपयोग करके कृत्रिम रूप से जोड़ा जा सकता है। चूँकि क्रमांकन शैलियों के माध्यम से किया जाता है, सूची स्वयं मूल रहती है, केवल चयनित वर्ग को इसमें जोड़ा जाता है, आइए इसे सिरिलिक कहते हैं (उदाहरण 4)।

   उदाहरण 4: सूची बनाने के लिए कोड

   1. एक
   2. दो
   3. तीन

   अक्षरों को जोड़ना ::before छद्म-तत्व और सामग्री संपत्ति का उपयोग करके किया जाता है। चूँकि प्रत्येक पंक्ति का अपना अक्षर होना चाहिए, हम छद्म वर्ग :nth-child(1) का उपयोग करेंगे, जिसमें अक्षर संख्या कोष्ठक में लिखी जाएगी। पहला अक्षर, स्वाभाविक रूप से, ए है, दूसरा बी है, तीसरा सी है, आदि। यह पूरा सेट ली चयनकर्ता में निम्नानुसार जोड़ा गया है (उदाहरण 5)।

   उदाहरण 5: छद्म वर्ग का उपयोग करना: nth-child

   सिरिलिक li:nth-child(1)::before (सामग्री: "a)"; ) .सिरिलिक li:nth-child(2)::पहले (सामग्री: "बी)"; ) .सिरिलिक li:nth-child(3)::before ( content: "at)"; )

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

   हम अंततः अक्षरों के संरेखण और स्थिति को समायोजित करते हैं, वैकल्पिक रूप से फ़ॉन्ट आकार, रंग और अन्य पैरामीटर निर्दिष्ट करते हैं (उदाहरण 6)।

   उदाहरण 6. रूसी अक्षरों के साथ सूची

   1. बोर्श
   2. पाइक कटलेट
   3. कुलेब्यका
   4. खट्टा क्रीम में मशरूम
   5. कैवियार के साथ पेनकेक्स
   6. क्वास
   
   
   

   इस उदाहरण का परिणाम चित्र में दिखाया गया है। 3.

   क्रमांकित सूचियाँ उनके क्रम संख्या के साथ तत्वों का एक संग्रह है। नंबरिंग का प्रकार और प्रकार टैग विशेषताओं पर निर्भर करता है

   , जिसका उपयोग सूची बनाने के लिए किया जाता है। क्रमांकित सूची में प्रत्येक आइटम को एक टैग द्वारा दर्शाया गया है
   1. जैसा कि नीचे दिया गया है।
      1. पहला बिंदु
      2. दूसरा बिंदु
      3. तीसरा बिंदु

      यदि आप कोई अतिरिक्त विशेषता निर्दिष्ट नहीं करते हैं और केवल टैग लिखते हैं

      , तो डिफ़ॉल्ट अरबी संख्याओं (1, 2, 3,...) वाली एक सूची है, जैसा कि उदाहरण 11.3 में दिखाया गया है।

      उदाहरण 11.3. एक क्रमांकित सूची बनाएं

      समय के साथ काम करना

      1. समय की पाबंदी बनाना (आपको किसी भी चीज़ के लिए कभी देर नहीं होगी);
      2. समय की पाबंदी का इलाज (आप कभी भी जल्दी में नहीं होंगे);
      3. समय और घड़ियों की धारणा में परिवर्तन।
      
      
      

      इस उदाहरण का परिणाम चित्र में दिखाया गया है। 11.3.

      चावल। 11.3. क्रमांकित सूची दृश्य

      ध्यान दें कि क्रमांकित सूची पाठ के ऊपर, नीचे और बाईं ओर स्वचालित इंडेंटेशन भी जोड़ती है।

      निम्नलिखित मान क्रमांकन तत्वों के रूप में कार्य कर सकते हैं:

      • अरबी अंक (1, 2, 3,...);
      • बड़े लैटिन अक्षर (ए, बी, सी, ...);
      • लोअरकेस लैटिन अक्षर (ए, बी, सी, ...);
      • बड़े रोमन अंक (I, II, III, ...);
      • लोअरकेस रोमन अंक (i, ii, iii, ...)।

      क्रमांकित सूची के प्रकार को इंगित करने के लिए, टैग के प्रकार विशेषता का उपयोग करें

      . इसके संभावित मान तालिका में दिये गये हैं। 11.2.
      मेज़ 11.2. क्रमांकित सूची के प्रकार

      सूची प्रकार	HTML कोड	उदाहरण
      अरबी अंक		1. चेबुरश्का 2. मगरमच्छ जीन 3. शापोकल्याक
      लैटिन वर्णमाला के बड़े अक्षर		ए चेबुरश्का बी मगरमच्छ जीन सी. शापोकल्याक
      लैटिन वर्णमाला के छोटे अक्षर		एक। Cheburashka बी। मगरमच्छ जीन सी। शापोकल्याक
      ऊपरी मामले में रोमन अंक		आई. चेबुरश्का द्वितीय. मगरमच्छ जीन तृतीय. शापोकल्याक
      छोटे अक्षरों में रोमन अंक		मैं। Cheburashka द्वितीय. मगरमच्छ जीन iii. शापोकल्याक

      किसी विशिष्ट मान के साथ सूची प्रारंभ करने के लिए, टैग की प्रारंभ विशेषता का उपयोग करें

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

      उदाहरण 11.4. सूची क्रमांकन

      8. किंग मैग्नम XLIV
      9. राजा सिगफ्राइड XVI
      10. राजा सिगिस्मंड XXI
      11. राजा हस्ब्रांड्ट प्रथम
      
      
      

      इस उदाहरण का परिणाम चित्र में दिखाया गया है। 11.4.

      

      चावल। 11.4. रोमन अंकों के साथ क्रमांकित सूची

      उन सूचियों के लिए, जिनका निर्माण HTML का उपयोग करके यहां वर्णित है, निम्नलिखित CSS नियम प्रदान किए गए हैं।

      सूची-शैली-प्रकार

      HTML कोड में प्रकार विशेषता के बजाय बुलेट या सूची क्रमांकन निर्दिष्ट करता है। के लिए संपत्ति मूल्य बुलेटेड सूचियाँहो सकता है:

      • डिस्क- सर्कल, डिफ़ॉल्ट रूप से सेट।
      • घेरा- घेरा।
      • वर्ग- वर्ग।

      क्रमांकित सूचियों के लिए, संपत्ति को आमतौर पर निम्नलिखित मान निर्दिष्ट किए जाते हैं:

      • दशमलव- अरबी अंक, डिफ़ॉल्ट मान।
      • निचला-रोमन- छोटे रोमन अंक.
      • ऊपरी उपन्यास- बड़े रोमन अंक।
      • कम-अल्फा- लोअरकेस लैटिन अक्षर।
      • ऊपरी अल्फा- बड़े लैटिन अक्षर.

      साथ ही, किसी भी सूची प्रकार के लिए, सूची-शैली-प्रकार संपत्ति को किसी पर भी सेट नहीं किया जा सकता है, जो मार्कर को पूरी तरह से हटा देगा।

      क्रमांकित सूचियों के लिए अन्य मान उपलब्ध हैं, जैसे सीजेके-आइडियोग्राफ़िकवैचारिक क्रमांकन सेट करता है, अर्मेनियाई- पारंपरिक अर्मेनियाई, और दशमलव-अग्रणी-शून्यरोमन अंकों में क्रमांकन सेट करेगा, लेकिन अग्रणी शून्य के साथ: 01, 02, 03...09, हालाँकि व्यवहार में ये और समान मान बहुत ही कम उपयोग किए जाते हैं।

      नीचे दिया गया उदाहरण तीन सूचियाँ प्रदर्शित करता है: पारंपरिक अर्मेनियाई क्रमांकन के साथ एक क्रमांकित सूची, एक वृत्त के साथ एक बुलेटेड सूची, और वैचारिक रूप से क्रमांकित वस्तुओं के साथ एक क्रमांकित सूची।

      1. पहला बिंदु
      2. दूसरा बिंदु
      3. तीसरा बिंदु
      • पहला बिंदु
      • दूसरा बिंदु
      • तीसरा बिंदु
      1. पहला बिंदु
      2. दूसरा बिंदु
      3. तीसरा बिंदु
      
      
      

      परिणाम।

      मार्करों का रंग संपत्ति द्वारा निर्दिष्ट सूची में पाठ के रंग से मेल खाता है रंग.

      सूची-शैली-छवि

      आपको अपनी स्वयं की छवि को सूची मार्कर के रूप में सेट करने की अनुमति देता है। उदाहरण के लिए, यदि सूची पृष्ठ वाले फ़ोल्डर में फ़ाइल है मार्कर.png, जिसका आप उपयोग करना चाहते हैं, तो डिज़ाइन कोड इस प्रकार होगा:

      उल (सूची-शैली-छवि: यूआरएल ("मार्कर.पीएनजी");)

      सूची-शैली-स्थिति

      मार्कर की स्थिति निर्धारित करता है: या तो इसे सूची तत्व की सीमा के बाहर रखा गया है ( सूची-शैली-स्थिति: बाहर), या पाठ इसके चारों ओर लपेटता है ( सूची-शैली-स्थिति: अंदर).

      नीचे दिया गया उदाहरण इन मूल्यों के बीच अंतर दिखाता है। पहले मामले में, मार्कर सूची के अंदर है; दूसरे मामले में, इसे सूची के बाहर रखा गया है।

      • जरा अंदर और बाहर का फर्क देखो.
      • अंदर के मामले में, मार्कर सीधे सूची में फिट बैठता है, इसकी सीमाओं से परे जाने के बिना और लेआउट में हस्तक्षेप किए बिना। पाठ इसके चारों ओर बहता है, मार्कर अंदर लगता है।
      • बाहरी मान मार्कर को सूची से बाहर ले जाता है।
      
      
      

      परिणामस्वरूप, निम्न पृष्ठ बनता है:

      

      सूची-शैली

      आपको सभी तीन सूचीबद्ध गुणों को एक पंक्ति में लिखकर कोड को छोटा करने की अनुमति देता है। नियम रिक्त स्थान से अलग करके लिखे गए हैं:

      उल (सूची-शैली: अंदर चौकोर;)

      आइए तीन सूचियों वाले पृष्ठ का एक उदाहरण देखें। पहले को 01, 02 प्रारूप में संख्याओं के साथ क्रमांकित किया गया है, दूसरे को एक कस्टम चित्र (पृष्ठ के साथ फ़ोल्डर में फ़ाइल मार्कर.पीएनजी) के साथ चिह्नित किया गया है, तीसरी सूची का मार्कर अक्षम है।

      HTML कोड नीचे दिया गया है.

      1. पहला बिंदु
      2. दूसरा बिंदु
      3. तीसरा बिंदु
      • पहला बिंदु
      • दूसरा बिंदु
      • तीसरा बिंदु
      1. पहला बिंदु
      2. दूसरा बिंदु
      3. तीसरा बिंदु
      
      
      

      ब्राउज़र निम्न पृष्ठ प्रदर्शित करेगा.

      
      

      अक्सर आपको नंबरिंग का उपयोग करना पड़ता है: विभिन्न सूचियाँ, सूचियाँ बनाते समय, सामग्री तालिका या सामग्री तालिका डिज़ाइन करते समय, आदि।

      सीएसएस नंबरिंग प्रक्रिया को स्वचालित करने के लिए काउंटरों का उपयोग करता है।

      आइए एक सरल उदाहरण से शुरू करें। फिर, अधिक जटिल तरीके से, हम इसके आइटम और उप-आइटम की स्वचालित क्रमांकन के साथ एक नेस्टेड सूची बनाएंगे।

      मीटर की पहचान

      सबसे पहले आपको मीटर की पहचान करनी होगी.

      काउंटर-रीसेट प्रॉपर्टी का उपयोग करके, काउंटर को एक नाम और प्रारंभिक मान निर्दिष्ट किया जाता है। नाम कुछ भी हो सकता है, लेकिन किसी नंबर से शुरू नहीं हो सकता.

      सांकेतिक टुकड़ा:

      यह प्रविष्टि टैग के लिए ऐसा कहती है 3 के प्रारंभिक मान के साथ एक काउंटर नामित संख्या स्थापित की गई है।

      डिफ़ॉल्ट रूप से, काउंटर का प्रारंभिक मान 0 है।

      काउंटर वेतन वृद्धि

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

      सांकेतिक टुकड़ा:

      बॉडी (काउंटर-रीसेट: संख्या 3 ;)
      बॉडी पी (प्रति-वृद्धि: संख्या 3 ; }

      यह कोड स्निपेट कहता है कि पैराग्राफ ( टैग

      ) दस्तावेज़ के मुख्य भाग में 3 की वृद्धि में संख्या काउंटर के साथ क्रमांकित किया जाएगा।

      पहले पैराग्राफ की संख्या 6 होगी, क्योंकि काउंटर का प्रारंभिक मूल्य 3 है और इसकी वृद्धि 3 है।

      काउंटर इन्क्रीमेंट के लिए डिफ़ॉल्ट मान 1 है।

      अब सभी आवश्यक काउंटर पैरामीटर सेट हो गए हैं: नाम, प्रारंभिक मूल्य, वेतन वृद्धि और तत्व जिसे क्रमांकित किया जाएगा। आगे....

      काउंटर प्रदर्शन

      अब आपको काउंटर वैल्यू प्रदर्शित करने और उसके स्थान के लिए नियम निर्धारित करने की आवश्यकता है। यह सामग्री संपत्ति और पहले और बाद के छद्म तत्वों का उपयोग करके किया जाता है।

      सामग्री संपत्ति सामग्री को पहले सम्मिलित करती है ( पहले) या के बाद ( बाद) निर्दिष्ट तत्व का।

      सांकेतिक टुकड़ा:

      बॉडी (काउंटर-रीसेट: संख्या 3 ;)
      बॉडी पी:बाद में (प्रति-वृद्धि: संख्या 3 ; सामग्री: "बराबर है" काउंटर(संख्या) "।" ;)

      इसलिए, पिछले कोड स्निपेट में हमने एक कंटेंट प्रॉपर्टी जोड़ी है जो "बराबर" शब्द को प्रिंट करती है जिसके बाद काउंटर नंबर का मान और एक बिंदु "।" . यह सब अनुच्छेद सामग्री के बाद पृष्ठ पर डाला जाता है ( टैग

      ), जो कि बाद वाला छद्म तत्व कहता है।

      अंततः...

      नीचे वर्णित उदाहरण है.

      सांकेतिक टुकड़ा:

      
      
      
      
      

      
      

      2 गुना 3

      
      

      3 बार 3

      
      

      4 गुना 3

      
      

      5 गुना 3

      
      
      
      

      परिणाम:

      स्वचालित क्रमांकन के साथ नेस्टेड सूचियाँ

      आइए नेस्टेड सूचियों को क्रमांकित करने की प्रक्रिया को स्वचालित करने के लिए काउंटरों का उपयोग करने का एक उदाहरण देखें।

      आपको HTML और CSS में सूचियों का अध्ययन करने से पहले से ही पता होना चाहिए कि सूची आइटम स्वचालित रूप से क्रमांकित होते हैं। लेकिन यह नंबरिंग सबसे सरल है.

      1.1, 1.2, 2.1, 2.2, आदि जैसे उपधाराओं की स्वचालित संख्या के बारे में क्या?

      यह समस्या उन काउंटरों का उपयोग करके हल की जाती है जो आपको नेस्टेड सूचियों को क्रमांकित करने की प्रक्रिया को स्वचालित करने की अनुमति देते हैं।

      सांकेतिक टुकड़ा:

      
      
      
      
      

      
      

      1. पहली सूची आइटम
      
      
      1. पैराग्राफ 1 का पहला उपपैराग्राफ
      
      
      2. पहले पैराग्राफ का दूसरा उपपैराग्राफ
      
      
      2. दूसरी सूची आइटम
      
      
      1. पैराग्राफ 2 का पहला उपपैराग्राफ
      
      
      2. दूसरे पैराग्राफ का दूसरा उपपैराग्राफ
      
      
      3. सूची में तीसरा आइटम
      
      
      1. पैराग्राफ 3 का पहला उपपैरा
      
      
      2. तीसरे पैराग्राफ का दूसरा उपपैराग्राफ
      
      
      3. तीसरे पैराग्राफ का तीसरा उपपैरा
      
      

      
      
      
      

      परिणाम:

      इस प्रकार आप नेस्टेड सूचियों को क्रमांकित करने की प्रक्रिया को स्वचालित करते हैं!

      लेखक से:वेब ब्राउज़र आपको बदलने की अनुमति देते हैं उपस्थितिएक पृष्ठ पर कई तत्व सीएसएस का उपयोग करना. लेकिन पृष्ठ पर कुछ तत्वों को प्रस्तुत करते समय, ब्राउज़र उनके डिज़ाइन को बदलने से इनकार कर देते हैं। उदाहरण के लिए, ड्रॉप-डाउन सूचियां (चयन), रेडियो बटन (रेडियो) और चेकबॉक्स (चेकबॉक्स) जैसे फॉर्म तत्वों की प्रत्येक में अपनी विशिष्ट उपस्थिति होती है ऑपरेटिंग सिस्टम, और ब्राउज़र इस रूप को वेब फ़ॉर्म पर थोपने का प्रयास कर रहे हैं।

      

      वेब ब्राउज़र यह भी निर्दिष्ट करते हैं कि बिना क्रमांकित और क्रमांकित सूचियाँ कैसे प्रदर्शित की जानी चाहिए। उदाहरण के लिए, ब्राउज़र बिना क्रमांकित सूचियों के लिए बुलेट का स्वरूप और क्रमांकित सूचियों के लिए संख्याओं का स्वरूप बदलना बहुत कठिन बना देते हैं। बेशक, सूचियों के साथ काम करने के लिए कई सीएसएस गुण हैं, जैसे सूची-शैली-प्रकार, सूची-शैली-छवि और सूची-शैली-स्थिति। लेकिन यहां तक ​​कि कुछ सरल करने (जैसे किसी सूची में संख्याओं का रंग बदलना) के लिए परिष्कृत HTML/CSS वर्कअराउंड का सहारा लेना पड़ता है।

      

      सौभाग्य से, कुछ कम-ज्ञात सीएसएस गुणों को मिलाकर, आप अपनी क्रमांकित सूची संख्याओं को अपनी इच्छानुसार स्वरूप दे सकते हैं। वास्तव में, इस ट्यूटोरियल को पढ़ने के बाद, आप क्रमांकित सूची में संख्याओं के फ़ॉन्ट, रंग और लगभग किसी भी अन्य विशेषता को बदलने में सक्षम होंगे।

      पूरे रहस्य में दो घटक शामिल हैं: पहला, क्रमांकित सूची में मानक (डिफ़ॉल्ट) संख्याओं को पूरी तरह छिपाना, और दूसरा, इन नंबरों को वापस जोड़ने के लिए छद्म तत्व से पहले :: का उपयोग करना।

      1. क्रमांकित सूची के लिए एक वर्ग या पहचानकर्ता (आईडी) जोड़ें. यह एक अच्छा विचार है, जो आपको बाद में प्रत्येक सूची की पहचान करने की अनुमति देता है जिसके लिए आप अपने स्वयं के काउंटर बनाना चाहते हैं:

      1. यह पहला तत्व है
      2. यह दूसरा तत्व है
      3. यह तीसरा तत्व है
      4. यह चौथा तत्व है
      5. यह पांचवां तत्व है
      6. यह छठा तत्व है

      < ol class = "custom-counter" > < / ol >

      यदि आप केवल ओएल या ली जैसे टैग चयनकर्ताओं का उपयोग करते हैं, तो आपको पृष्ठ पर सभी क्रमांकित सूचियों के लिए समान उपस्थिति के साथ समान काउंटर मिलेंगे।

      2. सूची मार्कर का डिफ़ॉल्ट दृश्य रद्द करें. सबसे पहले, आपको यह सुनिश्चित करना होगा कि ब्राउज़र काउंटरों के लिए डिफ़ॉल्ट उपस्थिति नहीं जोड़ेगा। निम्नलिखित नियम आपको ऐसा करने में मदद करेगा:

      कस्टम-काउंटर (मार्जिन-बाएँ: 0; पैडिंग-दाएँ: 0; सूची-शैली-प्रकार: कोई नहीं;)

      कस्टम - काउंटर ( मार्जिन - बाएँ : 0 ; पैडिंग - दाएँ : 0 ; सूची - शैली - प्रकार : कोई नहीं ;

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

      3. सूची तत्वों की प्रति-वृद्धि संपत्ति के लिए एक नाम सेट करें. सीएसएस में एक संपत्ति है जिसे काउंटर-इंक्रीमेंट कहा जाता है। यह आपको अपने काउंटर के लिए एक नाम सेट करने की अनुमति देता है। यह हमें कुछ विशेष नहीं देता है, सिवाय इसके कि हम ::before छद्म-तत्व (जो हम अगले चरण में करेंगे) का उपयोग करते समय अपने काउंटर की पहचान कर सकते हैं। काउंटर नाम निर्दिष्ट करने के लिए यहां एक सरल कोड उदाहरण दिया गया है:

      कस्टम-काउंटर ली (काउंटर-इंक्रीमेंट: स्टेप-काउंटर;)

      कस्टम - काउंटर ली ( काउंटर - इंक्रीमेंट : स्टेप - काउंटर ;

      इस उदाहरण में, स्टेप-काउंटर नाम का कोई विशेष अर्थ नहीं है। यह सीएसएस संपत्ति या किसी अन्य चीज़ के लिए कोई मूल्य नहीं है। यह सिर्फ एक नाम है जिसे हम अब से उपयोग करेंगे। आप कोई भी नाम सोच सकते हैं: स्टेप, काउंटर, या यहां तक ​​कि बोतल-ऑफ़-रूट-बीयर-ऑन-द-वॉल।

      4. काउंटर नंबर जोड़ने और उन्हें स्टाइल करने के लिए ::before छद्म तत्व का उपयोग करें:

      कस्टम-काउंटर li::before (सामग्री: काउंटर(स्टेप-काउंटर); मार्जिन-दाएं: 5px; फ़ॉन्ट-आकार: 80%; पृष्ठभूमि-रंग: आरजीबी (200,200,200); रंग: सफेद; फ़ॉन्ट-वजन: बोल्ड; पैडिंग : 3px 8px; सीमा-त्रिज्या: 3px;

      कस्टम - काउंटर li::before( सामग्री: काउंटर (चरण - काउंटर); मार्जिन - दाएँ : 5px ; पैडिंग: 3px 8px; बॉर्डर - त्रिज्या : 3px ;

      छद्म-तत्व::पहले आपको किसी तत्व से पहले सामग्री डालने की अनुमति देता है। हमारे मामले में, यह सामग्री को सूची तत्व से पहले सम्मिलित करेगा। आप उपयोग कर रहे हैं सीएसएस संपत्तिब्राउज़र को यह बताने के लिए सामग्री कि उसे सूची तत्व की शुरुआत में कौन सी सामग्री डालनी चाहिए। ये वास्तविक शब्द या ब्राउज़र द्वारा स्वचालित रूप से उत्पन्न कुछ भी हो सकते हैं।

      यहां हम काउंटर() का उपयोग करते हैं, जो काउंटर-इंक्रीमेंट प्रॉपर्टी से प्राप्त पहचानकर्ता को एक पैरामीटर के रूप में लेता है। याद रखें कि चरण 2 में, हमने काउंटर-इंक्रीमेंट प्रॉपर्टी के लिए नाम स्टेप-काउंटर निर्दिष्ट किया था, जिससे काउंटर को एक नाम दिया गया और ब्राउज़र को सूची के प्रत्येक तत्व के लिए काउंटर का उपयोग करने के लिए कहा गया। सूची के प्रत्येक तत्व के लिए काउंटर में एक की वृद्धि होगी, अर्थात। परिणामस्वरूप, हमारे पास सूची के पहले तत्व से पहले नंबर 1, सूची के दूसरे तत्व से पहले नंबर 2 आदि होगा।

      बेशक, ब्राउज़र आमतौर पर ऐसा करते हैं। हालाँकि, ::before छद्म-तत्व का उपयोग करके हम इन संख्याओं को इस तरह से स्टाइल भी कर सकते हैं जो मानक क्रमांकित सूची आइटम के साथ संभव नहीं होगा। अनिवार्य रूप से, उपरोक्त नियम में अन्य सभी गुणों का उपयोग केवल काउंटर के लिए एक शानदार लुक बनाने के लिए किया जाता है (उदाहरण के लिए)। पृष्ठभूमि का रंग, गोल कोनें, भिन्न फ़ॉन्ट रंग, आदि)। ये शैलियाँ कुछ ऐसे तरीकों को प्रदर्शित करती हैं जिनसे आप क्रमांकित सूचियों में संख्याओं का स्वरूप बदल सकते हैं। और आप और भी बहुत कुछ कर सकते हैं, इसलिए दिलचस्प, मज़ेदार और सुंदर क्रमांकित सूचियाँ बनाने के लिए बेझिझक उन सीएसएस युक्तियों का उपयोग करें जिन्हें आप जानते हैं।

      आप वेबसाइट पर इस तकनीक का उपयोग करने का तैयार कार्यशील उदाहरण देख सकते हैं