امروزه تعداد بسیار زیادی از وب سایت ها از برترین تکنولوژی های روز دنیا بهره می برند.
از این میان می توان به HTML5، CSS3 و jQuery اشاره کرد. این تکنولوژی ها برای آسان تر کردن کار طراحان و برنامه نویسان وب بوجود آمده اند.
همچنین افکتهای ظاهری این تکنولوژی ها بسیار جذاب بوده و باعث لذت بردن کاربر از دیدن چنین وب سایتهایی می شود.

بیوگرافی
بهنام بهرامی هستم متولد 4 دی ماه سال 1372
به مرور زمان تکمیل می‌شود.

تسلط کامل بر زبان‌های:
HTML5, CSS3, JavaScript, jQuery, Ajax, PHP, SQL, MySQL, MongoDB

تسلط کامل بر نرم افزارهای:
DreamWeaver, Flash, Photoshop
جستجوگر هوشمند و قدرتمند خبری چابک نیوز وبسایت شبکه اجتماعی کلبه‌ی شادی وبسایت طب سنتی بهار نارنج دانشگاه علوم پزشکی شیراز وبسایت شخصی

 

همه طراحان وب با سی اس اس و دستورات آن آشنا هستند. در نسخه های 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

{

 

با اعمال تغییر فوق، شماره ها از 2 شروع خواهند شد.

 

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

 

 }h2:before 

;counter-increment: number

; " ."(content:counter(number

{

 

 

این هم خروجی دستورات فوق:

 

 

استفاده از دستورات فوق بسیار ساده است و با توجه به اینکه در خانواده نسخه 2 سی اس اس قرار دارد، می توانیم با خیال راحت از آن ها استفاده کنیم.


در حقیقت، به کمک دستورات counter، محدودیت شماره گذاری خودکار که در انحصار لیست ها بود برداشته می شود.

مشتریان عزیز می‌توانند هزینه انجام پروژه‌های برنامه نویسی، پشتیبانی، تنظیمات سئو، تنظیمات امنیتی و ... را از طریق فرم زیر پرداخت نمایند.
نام و نام خانوادگی:
شماره موبایل: مثال: 09399130840
آدرس ایمیل: Ex) BBPSoft@Gmail.com
عنوان فاکتور: مثال: وبسایت شخصی ...
مبلغ فاکتور: تومان
برای ارتباط با من می توانید از فرم پیش رو و یا دیگر اطلاعاتی که در این قسمت قرار داده شده است استفاده نمایید.



همراه: 09399130840
ایمیل: BBPSoft@Gmail.com
نام:
آدرس ایمیل:
متن پیام:
تصویر امنیتی: Refresh