سی اس اس [h=1]شماره گذاری خودکار به کمک سی اس اس[/h] همه طراحان وب با سی اس اس و دستورات آن آشنا هستند. در نسخه های 1 و 2 و 3 آن دستورات متنوعی وجود دارد. همانطور که می دانید به مرور زمان مرورگرها پشتیبانی بیشتری از دستورات سی اس اس داشته اند. امروزه با خیال راحت می توانیم از بسیاری از دستورات CSS3 استفاده کنیم. اما در این نوشته می خواهیم یکی از دستورات نسخه 2 سی اس اس را مرور کنیم. یکی از کاربردهای لیست ها و تگ ol شماره گذاری است. به کمک این تگ می توانیم آیتم های خود را به ترتیب شماره گذاری کنیم. در ادامه مطلب با دستوری از سی اس اس 2 آشنا خواهیم شد که به کمک آن می توانیم در کنار تمام تگ های صفحه (نه فقط ol) به صورت خودکار شماره قرار دهیم. همانطور که در تصویر فوق مشاهده می کنید، تگ های h2 به صورت خودکار شماره گذاری شده اند. برای این منظور از دو دستور counter-reset و counter-increment استفاده شده است. counter-reset برای تعریف ابتدای شماره گذاری و همانطور که از نام counter-increment پیدا است برای افزودن به عدد قبلی استفاده می شود. body { counter-reset: number; } h2:before { counter-increment: number; content: counter(number) ". "; } همانطور که مشاهده می کنید، در ابتدای صفحه شمارنده را ریست کردیم. سپس به کمک پسوند before به قبل از تگ های h2 عبارتی را اضافه کرده ایم. ابتدا به کمک counter-increment به شمارنده 1 عدد اضافه و سپس به کمک دستور content، محتوای تولید شده را قبل از تگ های h2 درج می کنیم. با تغییر مختصری در counter-reset، می توانیم مقدار پیش فرض برای شروع شماره گذاری را تغییر دهیم. body { counter-reset: number 1; } با اعمال تغییر فوق، شماره ها از 2 شروع خواهند شد. دستورات فوق شباهت بسیار زیادی به لیست ها دارند. به شکلی که حتی می توانیم نوع نمایش اعداد را هم تغییر دهیم: h2:before { counter-increment: number; content: counter(number, upper-roman) ". "; } این هم خروجی دستورات فوق: استفاده از دستورات فوق بسیار ساده است و با توجه به اینکه در خانواده نسخه 2 سی اس اس قرار دارد، می توانیم با خیال راحت از آن ها استفاده کنیم. در حقیقت، به کمک دستورات counter، محدودیت شماره گذاری خودکار که در انحصار لیست ها بود برداشته می شود. Hongkiat
