�ݺ�ߣ

‫خدا‬ ‫نام‬ ‫به‬

C
‫استفاده‬‫از‬CSS counters‫برای‬‫لیس‬ ‫مانند‬ ‫افزایشی‬ ‫های‬ ‫املان‬ ‫استایل‬‫ت‬li
S S
C O U ETN R S
‫دهنده‬ ‫ارائه‬:‫زندی‬ ‫میثم‬
@meysamznd @meysamzandy

01
‫هدف‬‫ارائه‬ ‫این‬ ‫از‬:
‫آشنایی‬‫ویژگیهای‬ ‫از‬ ‫برخی‬ ‫با‬CSS Counters

03
‫بررسی‬CSS Counters
‫به‬ ‫دهی‬ ‫استایل‬ ‫طریق‬ ‫از‬Ordered List

05
CSS counters
‫املانهای‬ ‫از‬ ‫استفاده‬Pseudo - Elements
Ordering‫دلخواه‬ ‫استایل‬ ‫با‬ ‫پویا‬
‫مروگرها‬ ‫اکرث‬ ‫در‬ ‫پشتیبانی�Ĭ
‫واکنشگرا‬ ‫کامال‬(Responsive)

06
‫نکته‬:
CSS Counters
‫همی‬ ‫اساس‬ ‫بر‬ ‫و‬ ‫شده‬ ‫تولید‬ ‫شونده‬ ‫تکرار‬ ‫املانهای‬ ‫اساس‬ ‫بر‬‫ن‬
‫می‬ ‫گذاری‬ ‫استایل‬ ‫هم‬ ‫املانها‬‫شوند‬.
CSS Counters Syntax

08
‫ک‬ ‫توجه‬ ‫مثال‬ ‫این‬ ‫به‬ ‫لطفا‬‫نید‬:
CSS Counters Syntax

09
CSS Counters Syntax
‫کدهای‬CSS

‫مختلف‬ ‫مرورگرهای‬ ‫توسط‬ ‫پشتیبانی�Ĭ

10
‫از‬ ‫استفاده‬ ‫موارد‬ ‫و‬ ‫ها‬ ‫مثال‬
CSS Counters

13
*‫ایجاد‬ ‫برای‬ ‫خوبی‬ ‫بسیار‬ ‫حل‬ ‫راه‬Ordering‫با‬ ‫پویا‬‫استایل‬‫دلخواه‬
‫جمع‬‫بندی‬:‫از‬ ‫استفاده‬CSS Counters
*‫کردن‬ ‫مشخص‬Counter-Reset،Counter-Increment‫تعریف‬ ‫و‬
‫تابع‬Content ()
*‫در‬‫های‬‫املان‬Pseudo-Elements‫ها‬‫شامرنده‬‫بصورت‬Responsive‫عمل‬
‫کنند‬‫می‬‫که‬‫این‬‫ویژگی‬‫بوسیله‬‫دستور‬Content‫که‬‫تنها‬‫در‬Pseudo-Elements
‫در‬‫دسرتس‬‫است‬.

�ݺ�ߣ

CSS counters

More Related Content

CSS counters