گروه مقاله : CSS
تاريخ انتشار : 1395/07/19 - 13:45
كد :7184
شمارشگر
تاحالا شده مطلب آموزشی رو بخواهید در وبسایت قرار بدید و کلی لیست هم باید وارد میکردید و این لیست ها علاوه بر عدد یک توضیح هم داشت مثلا مرحله 1 ، مرحله 2 ، گام 1 ، گام 2 و غیره این کار رو میشه به صورت خود کار به متن اضافه کرد کد های css رو پایین می بینید.

شمارشگرها در Css

درج شماره های خودکار با شمارشگر Css

شمارشگر Css  مثل یک متغییر عمل می کند. مقدار متغییر می تواند توسط قوانید  Css اضافه شود. 

پارامتر های زیر را می توانیم در هنگام استفاده از شمارشگر Css  بکارببریم. 

counter-reset: یک شمارشگر ایجاد یا شمارشگر موجود را ریست می کند. 

counter-increment: مقدار شمارشگر را افزایش می دهد. 

content: محتوای ساخته شده را درج می کند. 

()counter: یا ()counters عملگر : عدد یک شمارشگر را به یک المان می دهد. 

برای استفاده از شمارشگر  CSS ، باید ابتدابه وسیله counter-reset ایجاد شود. 

مثال زیر یک شمارشگر برای صفحه ایجاد میکند. و سپس به ازای هر تگ H2 به عدد شمارشگر یکی اضافه می کند. و عبارت Section را به قبل از هر تگ H2 نسبت می دهد. 

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

 

شمارشگر تو در تو 

در مثال پیشرو ما یک شمارشگر برای صفحه ایجاد خواهیم کرد. و یک شمارشگر برای هر تگ H1 (زیر مجموعه )

مجموعه به ازای هر تگ H1 شمارش را انجام خواهد داد . و زیر مجموعه به ازای ار تگ H2 یک شمارش انجام خواهد داد باهم این مثال را ببینم 

 

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) " ";

}

نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*