استفاده از CSS counters برای استایل المان های افزایشی مانند لیست li

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

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

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

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

5. 04

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

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

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

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

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

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

14. 11

15. 12

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

17. ‫سپاسگذارم‬