उल ली सीएसएस सूचियों के स्टाइलिश स्टाइल के उदाहरण। क्रमबद्ध सूचियों में स्टाइलिंग लाइन नंबर (अंक) ol टैग का उपयोग क्रमांकित सूचियों को करने के लिए किया जाता है

अर्थ और अनुप्रयोग

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

(अंग्रेजी के लिए कम आदेशित सूचि - आदेशित सूचि)। प्रत्येक सूची आइटम एक टैग के साथ शुरू होती है
1. (सामग्री सूचीबद्ध करें)।

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

   गुण			ओपेरा		iexplorer	धार
   प्रारंभ, टाइप करें	हाँ	हाँ	हाँ	हाँ	हाँ	हाँ
   औंधा	हाँ	हाँ	हाँ	हाँ	नहीं	नहीं

   गुण

   गुण	मूल्य	विवरण
   सघन	सघन	HTML5 में समर्थित नहीं है। इंगित करता है कि सूची सामान्य आकार (रेखा-ऊंचाई: 80%) से छोटी होनी चाहिए। इस विशेषता के बजाय CSS का उपयोग करें।
   	औंधा	इंगित करता है कि क्रमांकित (क्रमबद्ध) सूची में क्रम अवरोही होना चाहिए। विशेषता इंटरनेट एक्सप्लोरर और एज ब्राउज़रों द्वारा समर्थित नहीं है।
   शुरू	संख्या	एक आदेशित (आदेशित) सूची का प्रारंभिक मूल्य निर्धारित करता है। मान पूर्णांक होना चाहिए, नकारात्मक मानों की अनुमति है। जब अक्षरों (प्रकार \u003d "ए" और टाइप \u003d "ए") के साथ उपयोग किया जाता है, तो विशेषता मान में निर्दिष्ट संख्या वर्णमाला में पत्र की क्रमिक संख्या होती है। उदाहरण के लिए, प्रारंभ \u003d "4" पत्र से मेल खाएगा 'डी' और सूची इसके साथ शुरू होगी। मान प्रारंभ \u003d "27" का उपयोग करते समय, काउंटर शून्य पर रीसेट हो जाता है, और सूची दो अंकों ("27" \u003d "एए", "28" \u003d "एबी", "29" \u003d "एसी" ...) बन जाती है।
   प्रकार	1 (चूक) एक बड़े) (लोअरकेस) मैं (रोमन बड़ा) मैं (रोमन छोटा)	एक क्रमांकित (आदेशित) सूची के निर्माण में प्रयुक्त बुलेट के प्रकार को निर्धारित करता है।

   उपयोग उदाहरण

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

   यह पृष्ठ पर इस तरह दिखेगा:

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

   यदि आप चाहते हैं कि सूची एक विशिष्ट संख्या से शुरू हो (1 से नहीं), तो आपको टैग के लिए प्रारंभ विशेषता निर्दिष्ट करनी होगी

   .

   उदाहरण के लिए:

   एक और दिलचस्प विशेषता प्रकार है, जो आपको अल्फ़ाबेटिक नंबरिंग ("ए" - बड़े, "ए - लोअरकेस) या रोमन संख्याओं (" आई "- अपरकेस में" आई "- लोअरकेस में) को निर्दिष्ट करने की अनुमति देता है।

   एक उदाहरण पर विचार करें जो प्रकार विशेषता (डिफ़ॉल्ट के अलावा) के लिए सभी संभावित मान दिखाता है:

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

   मैं इस तथ्य पर आपका ध्यान आकर्षित करता हूं कि इसे क्रमांकित (क्रमबद्ध) सूचियों को अन्य क्रमांकित सूचियों (किसी सूची आइटम के अंदर) में बनाने की अनुमति है

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

         यह पृष्ठ पर इस तरह दिखेगा।

         चलिए html की शुरुआत के बारे में हमारी बातचीत जारी रखते हैं। इस लेख में, मैं पाठ में पैराग्राफ, सूचियाँ और शीर्षकों के निर्माण के बारे में बात करना चाहता हूँ। और सिंगल टैग के बारे में भी
         तथा

         ---

         .

         मैं आपको इस श्रृंखला में पहला पाठ पढ़ने के लिए दृढ़ता से सलाह देता हूं, साथ ही उन लोगों के लिए html सीखना शुरू करने पर एक परिचयात्मक लेख जो अभी तक उनसे परिचित नहीं हैं।

         अब हम अपने टैग का अध्ययन जारी रखेंगे। मैं यह मानूंगा कि पाठक पहले से ही उपरोक्त लेखों की सामग्री से परिचित है।

         हमेशा की तरह, कार्य योजना:

         1. पैराग्राफ
         2. कतार टूट जाती है
            
         3. सूची, और सूची आइटम
         4. हेडिंग
         5. क्षैतिज शासक

            ---

         पैराग्राफ

         पाठ लगभग हमेशा पैराग्राफ से बना होता है। एक पैराग्राफ पाठ का एक तत्व है जो एक पूर्ण विचार को वहन करता है।

         Html में, एक पैराग्राफ, जैसा कि शीर्षक से आंका जा सकता है, नामित है। "पी" अक्षर "पैरा" शब्द से लिया गया है, जिसका अर्थ है "पैराग्राफ"।

         आइए एक उदाहरण पर विचार करें:

         पहले पैराग्राफ का पाठ। इसमें विचार शामिल है। लेकिन फिर विचार समाप्त हो गया।
         

         
         

         एक और विचार पहले ही शुरू हो चुका है और हम इसे दूसरे पैराग्राफ में लिख रहे हैं।
         

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

         कतार टूट जाती है
         

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

         हवा धीरे-धीरे चलती है
         
         और नाव आग्रह करती है
         
         वह खुद को लहरों में चलाता है
         पाल के साथ उठाया।
         

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

         सूचियाँ,

         और सूची आइटम

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

         
         
         • Bulka
         
         
         • पाई
         
         
         • पाव रोटी
         
         
         • पाई
         
         

         ब्राउज़र स्क्रीन पर, यह कोड इस तरह दिखेगा:

         • Bulka
         • पाई
         • पाव रोटी
         • पाई

         अगर हम उल टैग के साथ उल टैग को बदल देते हैं, तो हमें एक क्रमांकित सूची मिलती है:

         
         
         1. Bulka
         
         
         2. पाई
         
         
         3. पाव रोटी
         
         
         4. पाई
         
         

         अब यह इस तरह दिखता है:

         1. Bulka
         2. पाई
         3. पाव रोटी
         4. पाई

         कोई भी एक सूची को दूसरे में रखने से मना नहीं करता है, उदात्त सूचियों के साथ नेस्टेड सूची बनाता है:

         
         उपकरण:
         
         • देखा
         
         
         • पेंचकस
           
           
           
           1. सीधे
           
           
           2. पार करना
           
           
           
           
         
         
         • ड्रिल
         
         

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

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

         हेडिंग

         बेशक, पैराग्राफ दस्तावेजों को संरचित करने में मदद करते हैं। लेकिन एक बड़े पाठ को छोटे तार्किक भागों में तोड़ने के लिए, आप उनमें से प्रत्येक को कैप्शन दे सकते हैं। प्रत्येक भाग में अपने स्वयं के निचले-स्तर के शीर्षकों और इसी तरह और भी सब-वे हो सकते हैं। शीर्षक सेट करने के लिए, टैग का उपयोग करें , जहां "x" 1 से 6. की संख्या है। संख्या जितनी अधिक होगी, हेडिंग उतनी ही कम होगी। यही है, शीर्ष-स्तरीय हेडिंग को h1 कहा जाएगा, और सबसे नीचे का हेडिंग h6 होगा। डिफ़ॉल्ट रूप से, इन शीर्षकों के पाठ को बड़े, इंडेंटेड फ़ॉन्ट में प्रदर्शित किया जाता है। यह पाठ पूरी पंक्ति पर प्रदर्शित होता है, अर्थात hx टैग ब्लॉक-आधारित होते हैं। H1 टैग में सबसे बड़ा फ़ॉन्ट है, और h6 टैग में सबसे छोटा है। एक नियम के रूप में, एक पृष्ठ पर एक, अधिकतम दो, शीर्ष-स्तरीय एच 1 टैग हैं। जैसे ही स्तर घटता है, टैग की संख्या बढ़ जाती है। लेकिन शायद ही कोई वेबमास्टर इस तरह से पाठ को तोड़ने में सक्षम होगा कि उसे 5 या 6 स्तरों के शीर्षकों की आवश्यकता हो। यहां तक \u200b\u200bकि स्तर 4 का उपयोग शायद ही कभी किया जाता है।

         बात कम, काम ज्यादा!

         सूचियों को गिना और अनावश्यक किया जा सकता है।

         क्रमांकित सूचियाँ कोड द्वारा आउटपुट होती हैं:

         संख्या के साथ सूची
         1. परिच्छेद 1
         2. बिंदु 2
         3. बिंदु 3

         कोड से आउटपुट सूची नहीं हैं:

         चेक अंक या अन्य प्रतीकों के साथ सूची
         • परिच्छेद 1
         • परिच्छेद 1
         • परिच्छेद 1

         किसी भी सूची में प्रत्येक आइटम एक झूठे टैग में संलग्न है। सभी सूची आइटम एक सामान्य उल या ओएल टैग में लिपटे हुए हैं। इन टैग की शैलियों को स्टाइलशीट में लिखा गया है।

         प्रत्येक टैग के लिए, विशिष्ट दृश्य शैलियों को सौंपा गया है। वे पाठ से संकेत देते हैं।

         एक क्रमांकित सूची के लिए, प्रत्येक आइटम के लिए क्रमांकन शैलियों को निर्धारित किया जाता है।

         दशमलव मान द्वारा मानक अरबी अंकों का वर्णन किया जाता है।

         सूची-शैली-प्रकार: दशमलव; /*अरबी अंक*/

         बुलेटेड सूची के लिए, आप वर्ण शैली - वर्ग या मंडलियाँ निर्दिष्ट करते हैं।

         सूची-शैली-प्रकार: वृत्त; / * मंडलियां * /
         सूची-शैली-प्रकार: वर्ग; / * वर्ग * /

         प्रत्येक मेनू आइटम को एक छवि सौंपी जा सकती है।

         सूची-शैली-छवि: url (छवि के लिए पथ);

         आमतौर पर, टेम्प्लेट में, एक क्रमांकित सूची को सरल संख्याओं के साथ स्वरूपित किया जाता है, और क्रमांकित नहीं किया जाता है - काले वर्गों और मंडलियों के साथ। यह उबाऊ और अनुभवहीन है। चलो इसे ठीक करते हैं।
         

         ट्वेंटी इलेवन टेम्पलेट में सूची शैलियाँ कहाँ हैं?

         स्टाइलशीट स्टाइल खोलें। / * टेक्स्ट एलिमेंट्स * / नामक सेक्शन खोजें

         मानक कोड इस तरह दिखता है:

         मैं एक क्रमांकित सूची कैसे व्यवस्थित करूं?

         पृष्ठभूमि का उपयोग करके क्रमांकित सूची

         इस अच्छी संख्या वाली सूची डिज़ाइन को देखें।

         पसंद? चलो इसे फिर से करते हैं।

         Ol टैग के लिए स्टाइल खोजें। इसमें नए गुण जोड़ें।

         ओल (गद्दी: 0px 0 0 20px; मार्जिन: 0.5em 0 1.571em 1.9em; रंग: # 2EEE2E; सूची-शैली-प्रकार: कोई नहीं; फ़ॉन्ट: 15px / 17px Verdana, Arial, Helalica, sans-serif; z-index; : 2; काउंटर-रीसेट: बिंदु;) ओल ली (मार्जिन-निचला: 4 पीएक्स; लाइन-ऊंचाई: 1.6; रंग: # 2 ई 2 ई 2 ई; स्थिति: रिश्तेदार;) ओएल ली: इससे पहले (मार्जिन-तल: 4 पीएक्स; काउंटर-इंकमेंट: बिंदु 1; लाइन-ऊँचाई: 1.6; ऊँचाई: जीपीएक्स; मार्जिन-लेफ्ट: -36 पीएक्स; लेफ्ट: 0 पीएक्स; चौड़ाई: जीपीएक्स; मार्जिन-टॉप: 1 पीएक्स; पृष्ठभूमि: # बीडीसी 3 सी 7; सामग्री: काउंटर (बिंदु); पाठ-संरेखण: केंद्र; स्थिति: पूर्ण; फ़ॉन्ट-वजन: बोल्ड;)

         आपको यह समझने के लिए कि आपके डिज़ाइन के लिए आपको क्या बदलने की आवश्यकता है, आइए इस कोड को अलमारियों के नीचे रखें।

         सूची-शैली-प्रकार: कोई नहीं; - मानक अंकों का आउटपुट अक्षम करता है
         काउंटर-रीसेट: बिंदु; - नंबरिंग काउंटर के लिए एक चर सेट करता है
         स्थिति: रिश्तेदार; - अंक खुद के पास स्थान

         पहले ol ली टैग के लिए एक छद्म तत्व है। निम्नलिखित शैलियों है:
         सामग्री: काउंटर (बिंदु); - एक चर का मूल्य प्रदर्शित करता है
         प्रति-वृद्धि: बिंदु 1; - 1 से काउंटर बढ़ाता है
         स्थिति: निरपेक्ष;
         पृष्ठभूमि: # बीडीसी 3 सी 7; - संख्या के लिए पृष्ठभूमि (पृष्ठभूमि रंग या एक सुंदर आइकन के साथ सेट की जा सकती है
         मार्जिन - मार्जिन
         गद्दी - गद्दी
         रंग - तत्व पाठ रंग
         पृष्ठभूमि - बैकग्राउंड
         text-align - पाठ संरेखण
         फ़ॉन्ट-भार - फ़ॉन्ट का वजन (वजन)

         अपनी शैलियों में, आप किसी भी रंग, संरेखण, फ़ॉन्ट आकार और संकेत सेट कर सकते हैं।

         प्रत्येक आइटम के लिए एक अद्वितीय छवि के साथ क्रमांकित सूची

         महिलाओं के लिए एक साइट में कुछ बहुत ही आकर्षक संख्याएँ हैं।

         इसे कैसे लागू किया जाता है? आइए निम्नलिखित कोड पर एक नज़र डालें:

         / * पहला नंबर * / ol ली: पहला बच्चा (सूची-शैली-चित्र: url (नंबर 1 के साथ छवि का पथ);) / * दूसरा नंबर * / ol li: nth-child (2n) (सूची-शैली- छवि: url (नंबर 2 के साथ छवि का पथ);) / * तीसरा नंबर * / ol li: nth-child (3n) (सूची-शैली-छवि: url (नंबर 3 के साथ छवि का पथ);) / * चौथा नंबर; * (ol li: nth-child (4n) (सूची-शैली-चित्र: url (संख्या 4 के साथ छवि का पथ);) / * अगला, हम निम्नलिखित आइटम नंबर के लिए उसी तरह लिखते हैं * /

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

         यदि आप उन लेखों की सूचियों में हैं जिनका उपयोग आप 20 नंबर की वस्तुओं तक करते हैं, तो आपको nth-child (An) छद्म श्रेणी को 20 बार पंजीकृत करना होगा। ताकि शैलियों में अंतिम nth-child (20n) छद्म वर्ग हो।

         स्टाइलशीट में उन पंक्तियों का पता लगाएं, जो क्रमांकित सूची (ऑल ली टैग) की उपस्थिति का वर्णन करती हैं।

         इसमें पहला-बच्चा छद्म वर्ग जोड़ें। इसे एक बार कॉपी और पेस्ट करें, फिर इस संपत्ति को nth-child (An) में बदलें और जितने चाहें उतने नंबर कॉपी करें, जितना आपका आइकन होना चाहता है। आइटम नंबर जोड़ें।

         प्रत्येक संख्या के लिए, अपने स्वयं के अनूठे आइकन के साथ एक सूची-शैली-छवि गुण जोड़ें।

         यदि साइट पर मौजूद आइकन बिंदुओं से बहुत दूर स्थित हैं या उन्हें ओवरलैप करते हैं, तो आपको डिजिटल आइकन या बिंदुओं के पाठ के संरेखण और संकेत को संपादित करने की आवश्यकता है।
         

         बुलेटेड (अनावश्यक) सूची की व्यवस्था कैसे करें?

         वैकल्पिक आइकनों के साथ बुलेटेड सूची उल ली

         मुझे यह बुलेटेड सूची बहुत पसंद आई।

         उल (पैडिंग: 11 पीएक्स 0 5 पीएक्स 0;) उल ली (पैडिंग-लेफ्ट: 32 पीएक्स; मार्जिन-बॉटम: 10 पीएक्स; फॉन्ट: सामान्य 15 पीएक्स वर्दाना, संस-सेरिफ़; रंग: # 2 ई 2 ई 2; लाइन-ऊँचाई: 1.6; सीमा-निचला: 1px धराशायी #ccc; पैडिंग-बॉटम: 10px;) ul li: इससे पहले (सामग्री: ""; स्थिति: निरपेक्ष; चौड़ाई: 27px; ऊँचाई: जीपीएक्स; मार्जिन-लेफ्ट: -35px; मार्जिन-टॉप: -2 पीएक्स; बैकग्राउंड; url ("images / sprite.jpg") 0px 2px no-repeat; list-style-type: Circle;) ul li: nth-child (2n): इससे पहले (सामग्री: ""; स्थिति: निरपेक्ष; चौड़ाई: 27px; ऊंचाई: 43px; मार्जिन-लेफ्ट: -35px; मार्जिन-टॉप: -2px; बैकग्राउंड: url ("images / sprite.jpg") 0px -17px no-repeat; लिस्ट-स्टाइल-टाइप: सर्कल;)

         मानक सूची-शैली-प्रकार शैली के बजाय, आप "पथ टू आइकन" संपत्ति - सूची-शैली-छवि: url असाइन कर सकते हैं। लेकिन फिर आपको साइट के किनारों से बाहरी बाएं मार्जिन को पंजीकृत करने की आवश्यकता है - इसके बिना, आइकन प्रदर्शित नहीं किए जाएंगे, वे सामग्री क्षेत्र से परे जाएंगे।

         प्रयोग के लिए, आप संकेत दे सकते हैं:

         उल ली (सूची-शैली-छवि: url (छवियां / रेडियो। Png); मार्जिन-बाएं: 30px;)

         आइकन का विकल्प nth-child (An) प्रॉपर्टी के साथ सेट किया जा सकता है। उपरोक्त उदाहरण छद्म तत्व से पहले का उपयोग करता है।

         कोड में एक छद्म वर्ग nth-child (2n) है। इसका मान है 2. यह पता चलता है कि प्रत्येक आइटम में एक अलग आइकन है। यदि 2n के बजाय आप 2n + 1 लिखते हैं, तो दूसरा आइकन विषम बिंदुओं पर गिर जाएगा।

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

         इसके अलावा, प्रत्येक आइटम को फ्रेम, पृष्ठभूमि, आइकन सौंपा जा सकता है। बस बहुत चालाक मत बनो। हमारा काम फैंसी डिजाइन के साथ हर किसी को हराना नहीं है, बल्कि सामग्री धारणा की गुणवत्ता में सुधार करना है।
         

         पृष्ठ पर अलग-अलग डिज़ाइन के साथ कई सूचियाँ कैसे प्रदर्शित करें?

         कभी-कभी आपको विभिन्न शैलियों के साथ कई सूचियों को रखने की आवश्यकता होती है।

         यदि आप सामान्य शैलियों को असाइन करते हैं, तो उसी उपस्थिति को सभी सूचियों को सौंपा जाएगा। यदि आप ol या ul टैग के लिए एक अलग आईडी असाइन करते हैं और इसे HTML लेख संपादन मोड में पंजीकृत करते हैं, तो विभिन्न सूचियाँ प्रदर्शित की जा सकती हैं। खैर, इस आईडी के लिए स्टाइलशीट में, आपको अलग-अलग शैलियों को पंजीकृत करने की आवश्यकता है।

         उदाहरण के लिए, यहां सामग्री के लिए एक अच्छा लेआउट है:

         HTML में, आप इस तरह सूची लिखते हैं:

         सामग्री
         1. परिच्छेद 1
         2. बिंदु 2
         3. बिंदु 3

         CSS में, आप इस तरह की शैली लिखेंगे:

         Ol # sod (पैडिंग: 0px 20px 10px 51px; मार्जिन: 0.5em 0 0em 1em; रंग: # 2E2E2E; सूची-शैली-प्रकार: कोई नहीं; पृष्ठभूमि: # f1f4f5; बॉर्डर-बाएं: # BDC3C7 4px ठोस; प्रदर्शन: इनलाइन; ब्लॉक;) ol # sod li () ol # sod li: इससे पहले (फ़ॉन्ट-वजन: सामान्य! महत्वपूर्ण!

         नई शैली मुख्य ol टैग से भिन्न होती है: पृष्ठभूमि, प्रदर्शन शैली, सामग्री के बाईं ओर रेखा।

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

         ये तरीके मेनू आइटम, श्रेणियों और साइट के किसी भी अन्य तत्वों के डिजाइन में भी लागू होते हैं।
         

         मैं सामग्री सूची में एंकर लिंक कैसे बना सकता हूं?

         उन्हें HTML कोड में कैसे लिखें? कोड का एक टुकड़ा लिंक के एंकर को फ्रेम करता है, और कोड का एक और टुकड़ा उस जगह के बगल में रखा जाता है, जहां हमें लिंक पर क्लिक करने पर उतारने की आवश्यकता होती है।

         सामग्री
         1. शीर्षक 1
         2. शीर्षक २
         3. शीर्षक ३

         और लेख के पाठ में आपको इस तरह लिखना होगा:

         शीर्षक 1 ... शीर्षक 2 ... शीर्षक 3 ...

         शायद अधिक अनुभवी वेबमास्टर मुझे किसी चीज़ में सुधारेंगे। मैं सिर्फ वही सुझाता हूं जो मैंने खुद अभ्यास में आजमाया है।

         यदि आपके पास अभी भी कोई प्रश्न है, तो मुझे टिप्पणी में उन्हें देखकर खुशी होगी।

         आयुवा वेरोनिका।

         शायद आप भी इसमें रुचि लेंगे:

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

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

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

         आपको यह भी जानना होगा कि सूचियों में शुरू में कई तत्व होते हैं:

         1 ... अव्यवस्थित जानकारी।
         2 ... जानकारी का आदेश दिया।
         3 ... परिभाषाएं।

         स्थापना के साथ आरंभ करना:

         1. विकल्प:

         
         
         • सामग्री सूचीबद्ध करें
         
         
         • अनूठी सूची
         
         
         • मूल सूची
         
         
         • ZORNET.RU - वेबमास्टर के लिए
         
         
         • एक और सूची
         
         
         
         सीएसएस

         Ksangelopan (
         मार्जिन: 19 पीएक्स 0 0;
         गद्दी: 0;
         सूची-शैली: कोई नहीं;
         काउंटर-रीसेट: ली;
         }
         .ksangelopan ली!
         बॉर्डर: 2px ठोस # 3575ad;
         पृष्ठभूमि: # d7dee4;
         स्थिति: रिश्तेदार;
         मार्जिन-बॉटम: 17px;
         पैडिंग: 15 पीएक्स 9 पीएक्स;
         }
         .एक्सगेलोपान ली: हॉवर (
         z-index: 1;
         }
         .ksangelopan ली: इससे पहले (
         बॉर्डर: 2px ठोस # 2270b3;
         स्थिति: निरपेक्ष;
         शीर्ष: -14 पीएक्स;
         गद्दी: 3 पीएक्स 9 पीएक्स;
         फ़ॉन्ट-आकार: 11px;
         फोंट की मोटाई: बोल्ड;
         रंग: # 246eaf;
         पृष्ठभूमि: # f2f4f7;
         प्रति-वृद्धि: ली;
         सामग्री: काउंटर (ली);
         -वेबकैट-संक्रमण-अवधि: 0.4s;
         संक्रमण-अवधि: 0.4s;
         }
         .ksangelopan ली: होवर: इससे पहले (
         पृष्ठभूमि: # 2672 बी 3;
         रंग: # f7f9fb;
         -webkit- परिवर्तन: अनुवाद (-11px, 0);
         -ms- परिवर्तन: अनुवाद (-11px, 0);
         -ओ-परिवर्तन: अनुवाद (-11 पीएक्स, 0);
         रूपांतर: अनुवाद (-11px, 0);
         }
         .ksangelopan ली: के बाद
         सामग्री: "";
         स्थिति: निरपेक्ष;
         संक्रमण-अवधि: 0.3;
         -webkit- संक्रमण-संपत्ति: चौड़ाई;
         संक्रमण-गुण: चौड़ाई;
         z- इंडेक्स: -1;
         पृष्ठभूमि: # एफएफ;
         ऊंचाई: 100%;
         बायां: 0;
         शीर्ष: 0;
         चौड़ाई: 0;
         }
         .ksangelopan ली: होवर: के बाद (
         चौड़ाई: 100%;
         }

         
         यह पूरी स्थापना है।

         2 दूसरा विकल्प:

         

         
         
         • सामग्री सूचीबद्ध करें
         
         
         • अनूठी सूची
         
         
         • मूल सूची
         
         
         • ZORNET.RU - वेबमास्टर के लिए
         
         
         • एक और सूची
         
         
         
         सीएसएस

         बेलेदुज़्लोपामेज़ (
         मार्जिन-नीचे: 8px;
         गद्दी: 0;
         सूची-शैली: कोई नहीं;
         काउंटर-रीसेट: ली;
         }
         (.Bededuzlopamges ली)
         स्थिति: रिश्तेदार;
         बॉर्डर: 2px ठोस # 195588;
         पृष्ठभूमि: # eff3f7;
         गद्दी: 15px 19px 15px 27px;
         मार्जिन: 12px 0 12px 40px;
         -वेबकैट-संक्रमण-अवधि: 0.3s;
         संक्रमण-अवधि: 0.3;
         }
         .beleduzlopamges li: होवर (
         पृष्ठभूमि: # एफएफ;
         }
         .beleduzlopamges li: से पहले (
         लाइन-ऊंचाई: 32 पीएक्स;
         स्थिति: निरपेक्ष;
         शीर्ष: 4 पीएक्स;
         बाएँ: -39 पीएक्स;
         चौड़ाई: 39 पीएक्स;
         पाठ-संरेखित करें: केंद्र;
         फ़ॉन्ट-आकार: 16 पीएक्स;
         फोंट की मोटाई: बोल्ड;
         रंग: # f9f5f5;
         पृष्ठभूमि: # 275b88;
         प्रति-वृद्धि: ली;
         सामग्री: काउंटर (ली);
         संक्रमण-अवधि: 0.2 एस;
         }
         .beleduzlopamges li: होवर: इससे पहले (
         चौड़ाई: 46 पीएक्स;
         }
         .beleduzlopamges li: के बाद (
         स्थिति: निरपेक्ष;
         बायां: 0;
         शीर्ष: 4 पीएक्स;
         सामग्री: "";
         ऊंचाई: 0;
         चौड़ाई: 0;
         सीमा: 16px ठोस पारदर्शी;
         बॉर्डर-लेफ्ट-कलर: # 275b88;
         -वेबकैट-संक्रमण-अवधि: 0.2 एस;
         संक्रमण-अवधि: 0.2 एस;
         }
         .beleduzlopamges li: होवर: के बाद (
         मार्जिन-बाएं: 6 पीएक्स;
         }

         
         साइट की मुख्य शैली से मिलान करने के लिए केंद्र पैमाने को स्वतंत्र रूप से सेट किया जा सकता है।

         3 तीसरा विकल्प:

         

         
         
         • UCoz के लिए लिपियों
         
         
         • UCoz के लिए टेम्पलेट
         
         
         • वेबसाइट डिज़ाइन
         
         
         • साइट के लिए शैलियाँ
         
         
         • सीएसएस स्टाइल
         
         
         
         सीएसएस

         निज़ुआलिसेनलैग (
         गद्दी: 0;
         सूची-शैली: कोई नहीं;
         काउंटर-रीसेट: ली;
         }
         .nizualisanelag ली (
         स्थिति: रिश्तेदार;
         गद्दी: 9px 17px 17px 25px;
         मार्जिन-वाम: 39px;
         संक्रमण-अवधि: 0.2 एस;
         कर्सर: सूचक;
         फोंट की मोटाई: बोल्ड;
         रंग: # 343638;
         }
         .nizualisanelag ली: पहले (
         सीमा: 3px ठोस पारदर्शी;
         लाइन-ऊंचाई: 35 पीएक्स;
         स्थिति: निरपेक्ष;
         शीर्ष: 0;
         बाएं: -29 पीएक्स;
         चौड़ाई: 41 पीएक्स;
         पाठ-संरेखित करें: केंद्र;
         फ़ॉन्ट-आकार: 14 पीएक्स;
         फोंट की मोटाई: बोल्ड;
         रंग: # 619dce;
         प्रति-वृद्धि: ली;
         सामग्री: काउंटर (ली);
         संक्रमण-अवधि: 0.3;
         
         box-sizing: बॉर्डर-बॉक्स;
         }
         .nizualisanelag ली: होवर: इससे पहले (
         रंग: # 337AB7;
         }
         .nizualisanelag ली: के बाद (
         स्थिति: निरपेक्ष;
         शीर्ष: 0;
         बाएं: -29 पीएक्स;
         चौड़ाई: 41 पीएक्स;
         ऊंचाई: 41 पीएक्स;
         बॉर्डर: 5px ठोस # 468bd0;
         सीमा-त्रिज्या: 50%;
         सामग्री: "";
         अपारदर्शिता: 0.5;
         -webkit-box-sizing: बॉर्डर-बॉक्स;
         -मोज़-बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
         box-sizing: बॉर्डर-बॉक्स;
         }
         .nizualisanelag ली: होवर: के बाद (
         एनीमेशन: 500ms आसानी से बाहर 0s उछाल में;
         अपारदर्शिता: 1;
         }

         @keyframes bounceIn (
         0% {
         अपारदर्शिता: 0;
         रूपांतर: scale3d (.3, .3, .3);
         }
         20% {
         परिवर्तन: scale3d (1.3, 1.3, 1.3);
         }
         40% {
         रूपांतर: scale3d (.9, .9, .9);
         }
         60% {
         अपारदर्शिता: 1;
         रूपांतर: स्केल 3 डी (1.03, 1.03, 1.03);
         }
         80% {
         रूपांतर: scale3d (; .97, .97, .97);
         }
         सेवा (
         अपारदर्शिता: 1;
         रूपांतर: scale3d (1, 1, 1);
         }
         }

         
         सुंदर एनीमेशन के साथ आता है।

         4 चौथा विकल्प:

         

         
         
         • साइट के लिए पहला तत्व
         
         
         • साइट के लिए दूसरा तत्व
         
         
         • साइट के लिए तीसरा तत्व
         
         
         • साइट के लिए चौथा तत्व
         
         
         • साइट के लिए पांचवां तत्व
         
         
         
         सीएसएस

         गद्दी: 0;
         सूची-शैली: कोई नहीं;
         }
         .कुदेज़ामुदीन ली ()
         गद्दी: 6 पीएक्स;
         }
         .कुदेज़ामुदीन ली: पहले (
         पैडिंग-राइट: 11 पीएक्स;
         फोंट की मोटाई: बोल्ड;
         रंग: # 4979a0;
         सामग्री: "\\ 2606";
         संक्रमण-अवधि: 0.4s;
         }
         .कुदेज़ामुदीन ली: होवर: इससे पहले (
         रंग: # 235e90;
         सामग्री: "\\ 2605";
         }

         
         पिछले संस्करणों के समान, केवल आइकन ही बदल दिया गया है।

         सामान्य तौर पर, यह सूचियों का एक छोटा चयन है, यह वेबमास्टर को पोर्टल पर एक सुंदर सूची देगा, जहां वह खुद इसे अधिक व्यवस्थित कर सकता है, जैसा कि वह इसे देखना चाहता है।

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

         तत्त्व

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

         टैग

         ब्लॉक तत्वों को संदर्भित करता है, इसलिए यह उपलब्ध सभी चौड़ाई को ऊपर ले जाएगा, और ऊंचाई का आकार सामग्री की मात्रा पर निर्भर करेगा।

         नंबर सूचियों के आइटम को टैग का उपयोग करके परिभाषित किया गया है

         • , जो पाठ के अतिरिक्त, अन्य HTML तत्वों (सूचियों, चित्रों, शीर्षकों, पैराग्राफों इत्यादि) को शामिल कर सकते हैं। डिफ़ॉल्ट रूप से, बुलेटेड सूचियों को वेब पेज पर एक छोटे काले घेरे से शुरू होने वाली सूची के रूप में प्रदर्शित किया जाता है। सूची आइटम प्रदर्शित करते समय ब्राउज़र बाईं ओर एक छोटा सा मार्जिन जोड़ते हैं।

           ध्यान दें:अगर करना है

           सीएसएस संपत्ति को लागू किया जाता है, फिर तत्व
           • इन गुणों को विरासत में मिला।

             सलाह:मार्कर प्रकार बदलने के लिए, सूची-शैली-प्रकार सीएसएस संपत्ति या सूची-शैली-छवि संपत्ति का उपयोग करें ताकि मार्कर को छवियों से बदला जा सके। क्रमांकित सूचियाँ बनाने के लिए टैग का उपयोग करें

             .

             वाक्य - विन्यास

             ...
             • ...
             ...

             अंत टैग

             आवश्यक है।

             गुण

             HTML5 में कॉम्पैक्ट डिप्रेक्टेड इंडेंट और लाइन रिक्ति को कम करता है। टाइप करें HTML5 सूची मार्कर का लुक सेट करता है।

             इस मद के लिए उपलब्ध है वैश्विक विशेषताएं तथा आयोजन.

             डिफ़ॉल्ट स्टाइल

             अधिकांश ब्राउज़र तत्व को प्रस्तुत करेंगे

             निम्नलिखित डिफ़ॉल्ट सीएसएस मूल्यों के साथ:

             उल (प्रदर्शन: ब्लॉक; सूची-शैली-प्रकार: डिस्क; मार्जिन-टॉप: 1em; मार्जिन-निचला: 1 विजेता; मार्जिन-बाएं: 0; मार्जिन-राइट: 0; गद्दी-बाएं: 40px;)

             HTML 4.01 और HTML5 के बीच अंतर

             एचटीएमएल 5 में कॉम्पैक्ट और प्रकार की विशेषताओं का समर्थन नहीं किया गया है।

             उपयोग उदाहरण:

             अनधिकृत HTML सूची:

             उदाहरण HTML:

             इसे स्वयं आज़माएं
             • कॉफ़ी
             • चाय
             • कोको

             विशेष विवरण

             विशिष्टता	स्थिति
             WHATWG HTML लिविंग स्टैंडर्ड (WHATWG)	जीवन स्तर
             HTML 4.01 (W3C)	सिफ़ारिश करना
             HTML5 (W3C)	सिफ़ारिश करना
             HTML 5.1 (W3C)	सिफ़ारिश करना

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

             इसे स्वयं परखें - उदाहरण

             सूची को 1 के अलावा अन्य संख्या से कैसे शुरू करें।