सीएसएस लिस्ट
- पिछला पृष्ठ सीएसएस लिंक
- अगला पृष्ठ सीएसएस टैबल
अनुक्रमित सूची:
- कॉफी
- चाय
- कोका-कोला
- कॉफी
- चाय
- कोका-कोला
अनुक्रमित सूची:
- कॉफी
- चाय
- कोका-कोला
- कॉफी
- चाय
- कोका-कोला
HTML सूची और CSS सूची गुण
HTML में सूची प्रायः दो प्रकार की होती हैं:
- अनुक्रमित सूची (ul) - सूचीबद्ध के लिए प्रक्रियालक चिह्नों का उपयोग किया जाता है
- अनुक्रमित सूची (ol) - सूचीबद्ध के लिए अंक या अक्षर चिह्नों का उपयोग किया जाता है
CSS सूची गुण आपको:
- अनुक्रमित सूची के लिए अलग-अलग सूचीबद्ध के चिह्न सेट करें
- अनुक्रमित सूची के लिए अलग-अलग सूचीबद्ध के चिह्न सेट करें
- सूचीबद्ध के चिह्न के रूप में चित्र सेट करें
- सूची और सूचीबद्ध के लिए पृष्ठभूमि रंग जोड़ें
विभिन्न सूचीबद्ध के चिह्न
list-style-type प्रयोगता इसका अर्थ है कि सूचीबद्ध के चिह्न के प्रकार को निर्दिष्ट करती है।
नीचे दिए गए उदाहरण में कुछ उपलब्ध सूचीबद्ध के चिह्न दिखाए गए हैं:
उदाहरण
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
टिप्पणी:कुछ मान सूचीबद्ध के लिए उपयोग की जाती हैं और कुछ मान सूचीबद्ध के लिए उपयोग की जाती हैं।
चित्र सूचीबद्ध के चिह्न के रूप में
list-style-image प्रयोगता इसका अर्थ है कि सूचीबद्ध के चिह्न के रूप में एक चित्र को निर्दिष्ट करती है:
उदाहरण
ul {
list-style-image: url('sqpurple.gif');
}
सूचीबद्ध के चिह्न को स्थापित करना
list-style-position प्रयोगता इसका अर्थ है कि सूचीबद्ध के चिह्न (प्रक्रियालक) का स्थान को निर्दिष्ट करती है।
"list-style-position: outside;" इसका अर्थ है कि सूचीबद्ध के बाहर प्रक्रियालक बिंदु होगा। सूचीबद्ध के प्रत्येक पंक्ति की शुरुआत ऊपरी तरफ लम्बवत् जुड़ी होगी। यह डिफ़ॉल्ट है:
- कॉफी - बैक्विंग किए गए कॉफी बीन के रूप में बनाया गया बुचारा
- चाय
- कोका-कोला
"list-style-position: inside;" इसके अर्थ है कि बुलेट प्रतीक सूची आइटम के अंदर होगा। यह कार्य सूची आइटम के एक हिस्से के रूप में होता है, इसलिए यह पाठ के एक हिस्से के रूप में होगा और पाठ के शुरू में बाहर खिंच जाएगा:
- कॉफी - बैक्विंग किए गए कॉफी बीन के रूप में बनाया गया बुचारा
- चाय
- कोका-कोला
उदाहरण
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
डिफ़ॉल्ट सेटिंग हटाएं
list-style-type:none गुण टैग/बुलेट को भी हटाने के लिए उपयोग किया जा सकता है। ध्यान दें कि सूची के पूर्ववर्ती और आधारभूत अनुक्रमांक और गुण भी हैं। इस सामग्री को हटाने के लिए <ul> या <ol> में जोड़ें मार्ग:0 और पैडिंग:0 :
उदाहरण
ul {
list-style-type: none;
मार्ग: 0;
पैडिंग: 0;
}
सूची - संक्षिप्त गुण
list-style गुण एक संक्षिप्त गुण है। यह एक ही विधान में सभी सूची गुणों को सेट करने के लिए उपयोग किया जाता है:
उदाहरण
ul {
list-style: square inside url("sqpurple.gif");
}
आबोहवा गुण का उपयोग करते समय, गुण के मूल्यों की क्रमवारी इस प्रकार है:
list-style-type（यदि list-style-image निर्दिष्ट किया गया है और चित्र दिखाने में कोई कारण से असमर्थ होता है, तो इस गुण के मूल्य दिखाया जाएगा）list-style-position（सूची आइटम टैग को सामग्री प्रवाह के अंदर या बाहर दिखाने के लिए निर्दिष्ट करें）list-style-image（चित्र को सूची आइटम टैग के रूप में निर्दिष्ट करें）
यदि उपरोक्त गुणों में से कोई भी गुण लागू नहीं होता, तो लागू नहीं होने वाले गुण का डिफ़ॉल्ट मूल्य (यदि मौजूद हो) लागू किया जाएगा。
सूची का रंग शैली सेट करें
हम यहाँ रंग के सेटिंग का उपयोग करके सूची शैली को अधिक मजेदार बना सकते हैं。
जो भी शैली चुना जाए <ol> या <ul> टैग में, वह पूरी सूची पर प्रभाव डालती है, जबकि <li> टैग में जो भी गुण जोड़ा जाए, वह विभिन्न सूची आइटम पर प्रभाव डालता है:
उदाहरण
ol {
पृष्ठभूमि: #ff9999;
पैडिंग: 20px;
}
ul {
पृष्ठभूमि: #3399ff;
पैडिंग: 20px;
}
ol li {
पृष्ठभूमि: #ffe5e5;
पैडिंग: 5px;
मार्ग-बाएँ: 35px;
}
ul li {
पृष्ठभूमि: #cce5ff;
मार्ग: 5px;
}
परिणाम:
- कॉफी
- चाय
- कोका-कोला
- कॉफी
- चाय
- कोका-कोला
और अधिक उदाहरण
- लाल बाएँ किनारा वाली कस्टम सूची
- इस उदाहरण में देखा जाता है कि कैसे लाल बाएँ किनारा वाली सूची बनाई जाती है。
- पूर्ण स्क्रीन चौड़ाई की किनारा सूची
- इस उदाहरण में बिना बिंदु के बॉर्डर सहित सूची को बनाने के तरीके को दिखाया गया है।
- सूची के सभी अलग-अलग सूची आइटम टैग
- इस उदाहरण में CSS में सभी अलग-अलग सूची आइटम टैगों को दिखाया गया है。
सभी CSS सूची अट्रिब्यूट
| अट्रिब्यूट | वर्णन |
|---|---|
| list-style | एकल अट्रिब्यूट |
| list-style-image | सूची आइटम के टैग के रूप में इमेज निर्दिष्ट करता है。 |
| list-style-position | सूची आइटम के टैग (बिंदु) का स्थान निर्धारित करता है。 |
| list-style-type | सूची आइटम के टैग किस्म को निर्धारित करता है。 |
- पिछला पृष्ठ सीएसएस लिंक
- अगला पृष्ठ सीएसएस टैबल
