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 مزید کوئی پیش کیوائیلی کے ساتھ استعمال کریں، تاکہ پیدا کی گئی کوئی چیزی کو داخل کریں。
counter-increment ایک یا زیادہ سے کیسرتی کا مقادیر کا اضافہ کریں。
counter-reset ایک یا زیادہ سے کیسرتی کی تعمیر یا ری سیٹ کریں。