شمارشگر ها در CSS

شمارشگر های CSS ، متغیر هایی هستند که برای کدهایی از CSS استفاده می شوند که مقدار آنها می تواند توسط دستور های CSS افزایش یابد ( برای تعیین اینکه چند بار استفاده شده اند). شمارشگر ها می توانند به تنظیم ظاهر محتوا بر اساس محل قرارگیری آنها در سند ، کمک کنند.

 

 

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

شمارشگر های CSS مانند "متغیر ها" می باشند. مقادیر متغیر می توانند توسط دستور های CSS افزایش یابند.

برای کار با شمارشگر های CSS از صفت های زیر استفاده خواهیم کرد :


counter-reset - یک شمارشگر را ایجاد را دوباره راه اندازی می کند.
counter-increment - افزایش مقدار یک شمارشگر
content - ورود محتای تولید شده
counter() or counters() function - افزودن مقدار یک شمارشگر به یک عنصر


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

در مثال زیر ، شمارشگری برای صفحه (در سلکتور body) ، و سپس مقدار افزایشی شمارشگر برای هر عنصر <h2> ایجاد شده است. سپس Section <value of the counter به ابتدای هر عنصر <h2> اضافه شده است.

مثال :

شمارشگر ها
body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
مشاهده مثال

 

 

 

 

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

در مثال زیر ، یک شمارشگر برای صفحه ( section ) و یک شمارشگر دیگر برای هر عنصر <h1> ایجاد شده است ( subsection ). شمارشگر section هر عنصر h1 را که دارای <Section <value of the section counter باشد شماره گذاری می کند و شمارشگر subsection  هر عنصر h2 که دارای <value of the section counter>.<value of the subsection counter> باشد ، شماره گذاری می کند.

مثال :

شمارشگر های تو در تو
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 pseudo-elements برای افزودن محتوای محتوای تولیدی استفاده می شود.
counter-increment مقادیر شمارشگر را یک عدد یا بیشتر از یک ، افزایش می دهد.
counter-reset یک یا بیشتر از یک شمارشگر را ایجاد یا دوباره راه اندازی می کند.

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط