सीएसएस काउंटर
- पिछला पृष्ठ सीएसएस फॉर्म
- अगला पृष्ठ सीएसएस वेबसाइट लेआउट
पिज़ा
हैमबरगर
हॉटडॉग्स
CSS गणनाकारक CSS द्वारा रखे गए "वेरियेबल" हैं जिनके मूल्य को CSS नियमों के द्वारा बढ़ाया जा सकता है (उनके इस्तेमाल की बारंबारता को ट्रैक करने के लिए)।
गणनाकारक आपको दस्तावेज़ में सामग्री के स्थान के अनुसार उसके आकार को समायोजित करने के लिए उपयोगी हैं।
साथ गणनाकारक संख्या
CSS गणनाकारक "वेरियेबल" जैसे हैं। वेरियेबल के मूल्य को CSS नियमों के द्वारा बढ़ाया जा सकता है (उनके इस्तेमाल की बारंबारता को ट्रैक करने के लिए)।
यदि आप CSS गणनाकारकों का इस्तेमाल करना चाहते हैं, तो हम नीचे के इस गुणों का इस्तेमाल करेंगे:
counter-reset- गणनाकारक को बनाएं या पुनर्सेट करेंcounter-increment- गणनाकारक मूल्य को बढ़ाएंcontent- उत्पन्न गणनाकारक जोड़ेंcounter()याcounters()फ़ंक्शन - गणनाकारक के मूल्य को एलिमेंट में जोड़ें
यदि आप CSS गणनाकारकों का इस्तेमाल करना चाहते हैं, तो पहले आपको counter-reset इसे बनाएं।
नीचे का उदाहरण पृष्ठ (बॉडी चोइसर में) के लिए एक गणनाकारक बनाता है, फिर हर <h2> एलिमेंट के लिए गणनाकारक मूल्य को बढ़ाता है और हर <h2> एलिमेंट के शुरूआत में "Section <value of the counter>:" जोड़ता है:
उदाहरण
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
निहित गणनाकारक
नीचे का उदाहरण पृष्ठ (section) के लिए एक गणनाकारक बनाता है, हर <h1> एलिमेंट (subsection) के लिए एक गणनाकारक बनाता है।
"section" गणनाकारक हर <h1> एलिमेंट के लिए गिनती करता है, साथ ही "Section" और section गणनाकारक के मूल्य को लिखता है, "subsection" गणनाकारक हर <h2> एलिमेंट के लिए गिनती करता है, साथ ही section गणनाकारक के मूल्य और subsection गणनाकारक के मूल्य को लिखता है:
उदाहरण
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
कंटर एक सारांश सूची बनाने के लिए भी बहुत उपयोगी हैं क्योंकि उपएलिमेंटों में कंटर का नया उदाहरण स्वचालित रूप से बनता है। यहाँ, हम इसे इस्तेमाल करते हैं, counters() फ़ंक्शन विभिन्न स्तर के निहित गणनाकारकों के बीच एक स्ट्रिंग दाने के लिए उपयोगी होता है:
उदाहरण
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
CSS काउंटर अट्रिब्यूट
| अट्रिब्यूट | वर्णन |
|---|---|
| content | इस्तेमाल करते हुए ::before और ::after सबसेट एलिमेंट, उत्पन्न सामग्री को जोड़ने के लिए |
| counter-increment | एक या अधिक गणनाकारक के मान को बढ़ाना |
| counter-reset | एक या अधिक गणनाकारक को बनाना या पुनर्निर्धारित करना |
- पिछला पृष्ठ सीएसएस फॉर्म
- अगला पृष्ठ सीएसएस वेबसाइट लेआउट
