.ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺪﻨﺳ ﺭﺩ ﻥﺁ ﯼﺮﯿﮔﺭﺍﺮﻗ ﺱﺎﺳﺍ ﺮﺑ ﺍﺭ ﺍﻮﺘﺤﻣ ﺮﻫﺎﻇ ﺪﻨﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ ﺎﻫ ﻩ
.ﺩﺍﺩ ﺶﯾﺍﺰﻓﺍ (ﺪﻨﮐ ﯽﻣ ﯽﺑﺎﯾﺩﺭ ﺍﺭ ﺎﻬﻧﺁ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺕﺎﻌﻓﺩ ﺩﺍﺪﻌﺗ ﻪﮐ) CSS ﻦﯿﻧﺍﻮﻗ ﺎﺑ ﻥﺍ
:ﻢﯿﻨﮐ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺯ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺯﺍ CSS ﯼﺎﻫ ﻩﺪﻧﺭﺎﻤﺷ ﺎﺑ ﺭﺎﮐ ﯼﺍﺮﺑ
counter-resetﺪﻨﮐ ﯽﻣ ﺩﺪﺠﻣ ﻢﯿﻈﻨﺗ ﺎﯾ ﺩﺎﺠﯾﺍ ﻩﺪﻧﺭﺎﻤﺷ ﮏﯾ -
counter-incrementﺪﻫﺩ ﯽﻣ ﺶﯾﺍﺰﻓﺍ ﺍﺭ ﻩﺪﻧﺭﺎﻤﺷ ﺭﺍﺪﻘﻣ ﮏﯾ -
contentﺪﻨﮐ ﯽﻣ ﺝﺭﺩ ﺍﺭ ﻩﺪﺷ ﺪﯿﻟﻮﺗ ﯼﺍﻮﺘﺤﻣ -
counter() or counters() functionﺪﻨﮐ ﯽﻣ ﻪﻓﺎﺿﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﻩﺪﻧﺭﺎﻤﺷ ﺭﺍﺪﻘﻣ -
.ﺩﻮﺷ ﺩﺎﺠﯾﺍ counter-reset ﺎﺑ ﺪﯾﺎﺑ ﺍﺪﺘﺑﺍ ،CSS ﻩ
.ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ (ﻪﻧﺪﺑ ﺮﮕﺑﺎﺨﺘﻧﺍ ﺭﺩ) ﻪﺤﻔﺻ ﯼﺍﺮﺑ ﻩﺪﻧﺭﺎﻤﺷ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
:"ﯽﻋﺮﻓ ﺶﺨﺑ ﻩﺪﻧﺭﺎﻤﺷ ﺭﺍﺪﻘﻣ.ﺶﺨﺑ ﻩﺪﻧﺭﺎﻤﺷ ﺭﺍﺪﻘﻣ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ ﺖﺳﺍ ﺪﯾﺪﺟ ﺖﺴﯿﻟ ﮏﯾ ﺍﺮﯾﺯ ﺪﺷﺎﺑ ﺪﯿﻔﻣ ﻩﺪﺷ ﺺﺨﺸﻣ ﯼﺎﻫ ﺖﺴﯿﻟ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﺪﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ ﻩ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ .ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ after:: ﻭ before:: ﻪﺒﺷ ﺮﺻﺎﻨﻋ ﺎﺑ ﻩﺪﺷ ﺪﯿﻟﻮﺗ ﯼﺍﻮﺘﺤﻣ ﺝﺭﺩ ﯼﺍﺮﺑ ﺪﻫﺩ ﯽﻣ ﺶﯾﺍﺰﻓﺍ ﺍﺭ ﻩﺪﻧﺭﺎﻤﺷ ﺭﺍﺪﻘﻣ ﺪﻨﭼ ﺎﯾ ﮏﯾ ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺸﻧﺯﺎﺑ ﺎﯾ ﺩﺎﺠﯾﺍ ﺍﺭ ﻩﺪﻧﺭﺎﻤﺷ ﺪﻨﭼ ﺎﯾ ﮏﯾ ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ ﺍﺭ ﻩﺪﺷ ﯼﺭﺍﺬﮕﻣﺎﻧ ﻩﺪﻧﺭﺎﻤﺷ ﯽﻠﻌﻓ ﺭﺍﺪﻘﻣ ﻝﺎﺜﻣ
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) " ";
} <!DOCTYPE html>
<html>
<head>
<style>
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) " ";
}
</style>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>
ﻝﺎﺜﻣ
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} <!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
CSS ﻩﺪﻧﺭﺎﻤﺷ ﯼﺎﻫ ﯽﮔﮋﯾﻭ
content
counter-increment
counter-reset
counter()