सूची शैली: सूची-शैली। HTML पृष्ठ पर किसी सूची की उपस्थिति को अनुकूलित करने के लिए CSS नियम। सूची शैली संपत्ति (प्रकार, छवि, स्थिति) सुंदर सूची डिज़ाइन के उदाहरण

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

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

सूची शैली - HTML कोड में सूची डिज़ाइन

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

अब हम आपके साथ जिस पर विचार करने जा रहे हैं उसका उपयोग एचटीएमएल एलआई तत्वों और उल और ओएल तत्वों (क्रमशः बुलेटेड और क्रमांकित सूचियां) दोनों के लिए किया जा सकता है। इन टैगों पर सूची-शैली लागू करने से क्या अंतर होगा?

दरअसल, आप यह पता लगा सकते हैं कि कोई संपत्ति विरासत में मिली है या नहीं, कैस्केडिंग स्टाइल शीट के विनिर्देशन अनुभाग में सत्यापनकर्ता वेबसाइट (प्रदान किए गए लिंक पर पढ़ें) पर। "विरासत में मिले" कॉलम में विरासत में मिले नियमों के विपरीत "हाँ" होगा:

चलो साथ - साथ शुरू करते हैं सूची-शैली-प्रकार, जो आपको अलग-अलग तत्वों के लिए अंकन का प्रकार निर्धारित करने की अनुमति देता है एचटीएमएल सूची. इस नियम के लिए निम्नलिखित मानों की अनुमति है:

1. कोई नहीं - बिल्कुल भी कोई अंकन नहीं होगा (सूची-शैली-प्रकार: कोई नहीं; इस आइटम पर लागू होता है और इसलिए इसमें कोई मार्कर नहीं है)
2. डिस्क - एक भरा हुआ वृत्त (सूची-शैली-प्रकार: डिस्क को अभी इस लाइन पर लागू किया गया था;)
3. वृत्त - एक मार्कर के रूप में एक वृत्त
4. वर्ग - एक मार्कर के रूप में एक वर्ग
5. दशमलव - अरबी अंक (सूची-शैली-प्रकार:दशमलव;)
6. लोअर-अल्फा - लोअर केस में
7. अपर-अल्फा - अपरकेस में लैटिन अक्षर
8. लोअर-रोमन - लोअर केस में रोमन अंक
9. अपर-रोमन - अपर केस में रोमन अंक

आप क्या सोचते हैं, ऊपर दी गई सूची उल या ओएल के किन तत्वों की मदद से बनाई गई थी? मुश्किल सवाल। यह पता चला है कि यह अब महत्वपूर्ण नहीं है, हालांकि इस विशेष मामले में मैंने ओएल का उपयोग किया था, लेकिन इसे उल में बदलने पर, उपस्थिति वही रहेगी, क्योंकि यह प्रत्येक तत्व के लिए स्वयं निर्धारित है सीएसएस मानसूची शैली प्रकार नियम।

वास्तव में, उल और ओएल केवल डिफ़ॉल्ट व्यवहार (उल अंक और ओएल संख्या) में भिन्न होते हैं। लेकिन अगर आप चाहें तो list-style-type से आसानी से एक प्रकार की सूची को दूसरे में बदल सकते हैं। संख्याओं या अक्षरों को लेबल करने के लिए उपयोग किया जाने वाला फ़ॉन्ट बिल्कुल वैसा ही है जैसा आपने LI टैग की सामग्री के लिए परिभाषित किया है। उदाहरण के लिए, सूची के लिए फ़ॉन्ट रंग बदलकर, हम बदल देंगे और मार्कर का रंग:

1. पाठ का रंग बदला (सूची-शैली-प्रकार: निचला-रोमन; रंग: लाल) और मार्कर का रंग बदला

आइए निम्नलिखित सीएसएस संपत्ति पर आगे बढ़ें - सूची-शैली-स्थिति. इसकी मदद से आप मार्कर से एरिया की पोजीशन (प्लेसमेंट) सेट कर सकते हैं। इसके केवल दो संभावित मान हैं:

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

आइये इसे एक उदाहरण से देखते हैं. सूची के पहले तत्व में, मैं विशेष रूप से list-style-position: inside लिखूंगा और हम देखेंगे कि इसका क्या परिणाम निकलता है:

1. यहां सब कुछ डिफॉल्ट है.
2. अंदर से मार्कर क्षेत्र का स्थान इस प्रकार दिखेगा। ध्यान दें कि इस तत्व में दूसरी पंक्ति और मार्कर समान स्तर पर हैं।
3. यहां सब कुछ डिफॉल्ट है.

सूची-शैली-छवि और पूर्वनिर्मित सीएसएस नियम

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

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

सूची-शैली-छवि: यूआरएल(https://website/images/list_star.png);

1. यहां सब कुछ डिफॉल्ट है.
2. किसी छवि को मार्कर के रूप में उपयोग करना कुछ ऐसा ही लग सकता है। यह स्पष्ट है कि आप इस उद्देश्य के लिए अधिक उपयुक्त छवि चुन सकते हैं।
3. उदाहरण के लिए, जैसे यहाँ.

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

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

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

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

मैं डिफ़ॉल्ट मान कहां देख सकता हूं? हाँ, सब कुछ एक ही स्थान पर है - W3C सत्यापनकर्ता के CSS विनिर्देश में "प्रारंभिक मूल्य" कॉलम में उन संपत्तियों के विपरीत जिनमें आप रुचि रखते हैं:

सूची-शैली प्रीफ़ैब में व्यक्तिगत गुणों के मानों को रिक्त स्थान द्वारा अलग किया जाता है। स्थान, जैसा कि पहले ही उल्लेख किया गया है, महत्वपूर्ण नहीं हैं:

व्यवहार में, यह इस तरह दिख सकता है:

सूची-शैली: ऊपरी-रोमन यूआरएल के अंदर (https://site/images/list_star.png);

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

सूची-शैली-प्रकार: कोई नहीं;

सूची-शैली:कोई नहीं;

आप सौभाग्यशाली हों! जल्द ही ब्लॉग पेज साइट पर मिलते हैं

आपकी रुचि हो सकती है

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

संक्षिप्त जानकारी

विवरण

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

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

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

बहस

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

• लोरेन इपसाम डलार सिट आमेट


• संभ्रांत अभिजात वर्ग


• सेड दीम नॉनमी निभ यूइस्मोड


• टिनसीडंट यूट लैक्रिट डोलोर मैग्ना एलिगुआम एराट वोलुटपैट। यूट वाइज एनिम एड मिनिम वेनियम, क्विस नॉस्ट्रुड एक्सरसाइज ट्युशन उलामकोर्पर ससिपिट लोबॉर्टिस निस्ल यूटी एलिक्विप एक्स ईए कमोडो कॉन्सक्वेट।

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

चावल। 1. सूची-शैली पैरामीटर लागू करना

किसी छवि का पता सेट करता है जो सूची मार्कर के रूप में कार्य करता है। यह संपत्ति विरासत में मिली है, इसलिए टोकन को पुनर्स्थापित करने के लिए व्यक्तिगत सूची आइटम के लिए none का मूल्य उपयोग किया जाता है।

संक्षिप्त जानकारी

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

सूची-शैली-छवि: कोई नहीं | यूआरएल(<адрес>)

वेब भाषा संदर्भ से सामग्री

प्रयुक्त मूल्य

यह प्रॉपर्टी करंट स्टाइल (केवल पढ़ने के लिए) को छोड़कर सभी ऑब्जेक्ट के लिए पढ़ी/लिखी जाती है। डिफ़ॉल्ट मान है कोई नहीं. कैस्केडिंग स्टाइल शीट्स (सीएसएस) विशेषता विरासत में मिली है।

टिप्पणी

संपत्ति सूची शैली छविजिसके लिए सभी तत्वों पर लागू होता है अंतरऔर प्रदर्शन:सामग्री सूचीबद्ध करें.

जब कोई छवि उपलब्ध होती है, तो यह सेट की गई मार्कर छवि को बदल देती है सूची शैली प्रकार.

संपत्ति के लिए सूची मार्कर छवि प्रदर्शित करने के लिए अंतरन्यूनतम पर सेट किया जाना चाहिए 30pt.

उदाहरण

निम्नलिखित उदाहरण संपत्ति के उपयोग को दर्शाते हैं सूची शैली छविऔर विशेषता सूची-शैली-छविसूची मार्कर छवि सेट करने के लिए.

पहला उदाहरण चयनकर्ता का उपयोग करता है उलऔर विशेषता सूची-शैली-छवि.

दूसरा उदाहरण संपत्ति का उपयोग करता है सूची शैली छविकोई घटना घटित होने पर मार्कर शैली बदलने के लिए मूषक के ऊपर से.