सीएसएस सूचियां
अव्यवस्थित सूचियाँ:
- कॉफ़ी
- चाय
- कोक
- कॉफ़ी
- चाय
- कोक
आदेशित सूचियाँ:
- कॉफ़ी
- चाय
- कोक
- कॉफ़ी
- चाय
- कोक
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संपत्ति सूची-आइटम मार्कर (बुलेट पॉइंट) की स्थिति निर्दिष्ट करती है ।
"सूची-शैली-स्थिति: बाहर;" इसका मतलब है कि बुलेट पॉइंट सूची आइटम के बाहर होंगे। सूची आइटम की प्रत्येक पंक्ति की शुरुआत लंबवत रूप से संरेखित की जाएगी। यह डिफ़ॉल्ट है:
- कॉफ़ी - भुनी हुई कॉफ़ी बीन्स से बना एक पीसा पेय...
- चाय
- कोक
"सूची-शैली-स्थिति: अंदर;" इसका मतलब है कि बुलेट पॉइंट सूची आइटम के अंदर होंगे। चूंकि यह सूची आइटम का हिस्सा है, यह टेक्स्ट का हिस्सा होगा और शुरुआत में टेक्स्ट को पुश करेगा:
- कॉफ़ी - भुनी हुई कॉफ़ी बीन्स से बना एक पीसा पेय...
- चाय
- कोक
उदाहरण
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
डिफ़ॉल्ट सेटिंग्स हटाएं
संपत्ति का list-style-type:noneउपयोग मार्करों/गोलियों को हटाने के लिए भी किया जा सकता है। ध्यान दें कि सूची में डिफ़ॉल्ट मार्जिन और पैडिंग भी है। इसे हटाने के लिए <ul> या <ol> में margin:0और जोड़ें:padding:0
उदाहरण
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
सूची - आशुलिपि संपत्ति
संपत्ति एक list-styleआशुलिपि संपत्ति है। इसका उपयोग सभी सूची गुणों को एक घोषणा में सेट करने के लिए किया जाता है:
उदाहरण
ul
{
list-style: square inside url("sqpurple.gif");
}
आशुलिपि संपत्ति का उपयोग करते समय, संपत्ति के मूल्यों का क्रम है:
list-style-type(यदि एक सूची-शैली-छवि निर्दिष्ट है, तो इस संपत्ति का मूल्य प्रदर्शित किया जाएगा यदि किसी कारण से छवि प्रदर्शित नहीं की जा सकती है)list-style-position(यह निर्दिष्ट करता है कि सूची-आइटम मार्कर सामग्री प्रवाह के अंदर या बाहर दिखाई देने चाहिए या नहीं)list-style-image(छवि को सूची आइटम मार्कर के रूप में निर्दिष्ट करता है)
यदि उपरोक्त संपत्ति मूल्यों में से कोई एक गायब है, तो लापता संपत्ति के लिए डिफ़ॉल्ट मान डाला जाएगा, यदि कोई हो।
रंगों के साथ स्टाइलिंग सूची
हम सूचियों को रंगों के साथ स्टाइल भी कर सकते हैं, ताकि उन्हें थोड़ा और दिलचस्प बनाया जा सके।
<ol> या <ul> टैग में जोड़ा गया कुछ भी पूरी सूची को प्रभावित करता है, जबकि <li> टैग में जोड़े गए गुण व्यक्तिगत सूची आइटम को प्रभावित करेंगे:
उदाहरण
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}
परिणाम:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
और ज्यादा उदाहरण
यह उदाहरण दर्शाता है कि लाल बाएँ बॉर्डर वाली सूची कैसे बनाई जाती है।
यह उदाहरण दर्शाता है कि बिना बुलेट के बॉर्डर वाली सूची कैसे बनाई जाती है।
यह उदाहरण सीएसएस में सभी अलग-अलग सूची-आइटम मार्करों को प्रदर्शित करता है।
सभी सीएसएस सूची गुण
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |