سی ایس ایس فہرست
- پچھلے صفحے سی ایس ایس لنک
- آئندہ صفحہ سی ایس ایس جدول
无序列表：
- कॉफी
- चाय
- कोका-कोला
- कॉफी
- चाय
- कोका-कोला
有序列表：
- कॉफी
- चाय
- कोका-कोला
- कॉफी
- चाय
- कोका-कोला
HTML 列表和 CSS 列表属性
在 HTML 中，列表主要有两种类型：
- 无序列表（
- ）- 列表项用的是项目符号标记
- 有序列表（
- ）- 列表项用的是数字或字母标记
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;
पैडिंग: 20पिक्सल;
}
ul {
पृष्ठभूमि: #3399ff;
पैडिंग: 20पिक्सल;
}
ol li {
पृष्ठभूमि: #ffe5e5;
पैडिंग: 5पिक्सल;
मार्ग-बाएँ: 35पिक्सल;
}
ul li {
पृष्ठभूमि: #cce5ff;
मार्ग: 5पिक्सल;
}
परिणाम:
- कॉफी
- चाय
- कोका-कोला
- कॉफी
- चाय
- कोका-कोला
और अधिक उदाहरण
- लाल बाएँ किनारा वाली अनुकूलित सूची
- इस उदाहरण में दिखाया गया है कि कैसे लाल बाएँ किनारा वाली सूची बनाई जाती है。
- पूरी स्क्रीन चौड़ाई की किनारा सूची
- یہ مثال، بغیر لیسٹ آئیٹم کی علامت والی فریم کی لیست کو پیدا کرنا دکھاتا ہے
- تمام لیست کی مختلف لیسٹ آئیٹم علامات
- یہ مثال، CSS میں تمام مختلف لیسٹ آئیٹم علامات کو دکھاتا ہے
تمام CSS لیست حصص
| حصہ | وصف |
|---|---|
| list-style | مختصر حصہ |
| list-style-image | لیسٹ آئیٹم کی علامت کے طور پر تصویر مقرر کرنا |
| list-style-position | لیسٹ آئیٹم کی علامت (لیسٹ آئیٹم) کی جگہ کو مقرر کرنا |
| list-style-type | لیسٹ آئیٹم کی علامت کی نوعیت کو مقرر کرنا |
- پچھلے صفحے سی ایس ایس لنک
- آئندہ صفحہ سی ایس ایس جدول
