طراحی وب سایت داروخانه
طراحی وب سایت داروخانه
06/11/1395
طراحی وب سایت برای مدارس
طراحی وب سایت برای مدارس
07/11/1395
نمایش همه

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

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

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

این شمارشگر ها در طراحی سایت همانند یک متغیر عمل میکند. این مقدار متغیر قادر است بوسیله قوانین CSS اضافه شود. پارامتر های زیر را زمان استفاده کردن از شمارشگرها در Css استفاده کنیم :

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

counter-increment : مقدار شمارشگر را بیشتر میکند.

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

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

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

برای استفاده کردن از شمارشگر  CSS ، میبایست اول به وسیله counter-reset ساخته شود.  مثال زیر یک شمارشگر برای صفحه میسازد. و بعد از آن برای هر کدام از تگ H2 به عدد شمارشگر یکی اضافه می کند. و عبارت Section را به قبل از هر تگ H2 نسبت می دهد :

body {
counter-reset: section;
}

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

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

در شمارشگر های تو در تو، مثال بالا یک شمارشگر برای صفحه میسازد. و یک شمارشگر برای هر تگ 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) ” “;
}