دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱
  • آبان

جلسه ۳۵ : شمارنده ها (Counters) در CSS

  • دسته‌بندی‌ها :
جلسه ۳۵ : شمارنده ها (Counters) در CSS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. تاکنون کار با انواع لیست ها (علامتدار و شمارشی) را بررسی کردیم و برای شماره گذاری آیتم ها تاکنون لیست های شماره گذاری را می شناختیم. اما این روش قابلیت های زیادی را در اختیار کاربران نمی گذرد و فقط یک شماره گذاری ساده را انجام می دهد. شمارنده ها (Counters) در CSS به شما این قابلیت های بیشتری برای شماره گذاری آیتم ها می دهند. با استفاده از شمارنده ها در CSS شما می توانید برای هر شماره آیتم یک عنوان نیز اضافه کرده و همچنین قالب شمارنده را تعریف کنید. برای آشنایی بیشتر با طرز کار Counters در CSS و چگونگی استفاده از آن در ادامه ی این بخش با ما همراه باشید.

      شمارنده ها در CSS

      در این آموزش ما شما را با شمارنده ی خودکار Counters در CSS و ویرایش فرمت آن آشنا خواهیم کرد.

      آشنایی با شمارنده ها در CSS

      شمارنده های Counters در CSS در واقع متغییرهایی هستند که در CSS تعریف و مدیریت می شوند.

      با استفاده از کدهای CSS می توان نحوه ی شماره گذاری و Style آن را تنظیم کرد.

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

      Counters در CSS همانند متغیرها عمل می کنند، مقادیر متغیرها می توانند با استفاده از قوانین CSS افزایش یابند.

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

      • counter-reset : یک شمارنده را ایجاد و یا ریست می کند.
      • counter-increment : مقدار شمارنده را افزایش می دهد.
      • content : درج محتوای تولید شده.
      • توابع counter() یا counters() : مقدار ایجاد شده توسط شمارنده را به یک عنصر اضافه می کند.

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

      در مثال زیر یک شمارنده در قسمت body صفحه وب تعریف می کنیم.

      سپس مقدار شمارنده را برای هر عنصر <h2> اضافه می کنیم و سپس  “:<Section <value of the counter” را در ابتدای هر عنصر <h2> اضافه می کنیم:

      مثال : شمارنده در CSS
      خودتان امتحان کنید »

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

      در مثال زیر یک شمارنده برای هر صفحه (section) و یک شمارنده برای هر عنصر <h1> اضافه می کنیم.

      شمارنده “section” برای هر عنصر <h1> با کد “:<Section <value of the counter” شمارش می شود.

      و شمارنده ی “subsection” نیز برای هر عنصر <h2> با کد “<value of the section counter>.<value of the subsection counter>” شمارش می شود:

      مثال : شمارنده ی های تودرتو
      خودتان امتحان کنید »

      یک شمارنده همچنین می تواند برای ایجاد لیست های outline نیز استفاده شود چراکه نمونه جدید شمارنده به طور خودکار در عناصر فرزند ایجاد می شود.

      ما از تابع counters() به منظور ایجاد یک رشته در سطوح مختلف شمارنده های تودرتو استفاده می کنیم.

      مثال : شمارنده ی های تودرتو-2
      خودتان امتحان کنید »

      کلام آخر

      با استفاده از ویژگی Counters در CSS می توانید یک شماره گذاری کامل و با جزئیات بیشتر برای محتوای خود ایجاد کنید، همچنین در مواردی که شما نیاز به شمارنده های تو در تو دارید، بکارگیری شمارنده ها در CSS بهترین گزینه است.

      QR:  جلسه ۳۵ : شمارنده ها (Counters) در CSS
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر