آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
شماره گذاری خودکار با سی اس اس ۲

شماره گذاری خودکار با سی اس اس 2
سلام. امروز قصد دارم یکی از ترفند های سی اس اس ۲ رو براتون بگم. در این آموزش یاد میگریم که چگونه با استفاده از سی اس اس یک شمارنده بسازیم و پست المان خاصی عدد قرار دهیم.
برای مثال شما میخواهید پشت تگ های H2 یک شمارنده قرار دهید:
۱٫ تیتر اول
——————————————
۲٫ تیتر دوم
——————————————
برای ساخت همچین شمارنده ای ابتدا باید کد زیر را به استایل خودمون اضافه کنیم تا ابتدای شمارنده رو معلوم کنیم (در اینجا از صفر شروع میشود) :

body {
	counter-reset: number;
}

حالا باید کد زیر را اضافه کنیم:

h2:before {
	counter-increment: number;
	content: counter(number) ". ";
}

همانطور که مشاهده می کنید به کمک پسوند before به قبل از تگ های h2 عبارتی را اضافه کرده ایم. ابتدا به کمک counter-increment به شمارنده ۱ عدد اضافه و سپس به کمک دستور content، محتوای تولید شده را قبل از تگ های h2 درج می کنیم.
خوب حالا برای مثال اگر بخواهیم شمارنده از ۲ شروع بشه باید مقدار اولیه رو ۱ قرار بدیم تا بعد از اضافه شدن یک واحد به آن به عدد ۲ برسیم:

body {
	counter-reset: number 1;
}
 

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

h2:before {
	counter-increment: number;
	content: counter(number, upper-roman) ". ";
}

امیدوارم کاربردی باشه براتون!

2 پاسخ به “شماره گذاری خودکار با سی اس اس ۲”

  1. ساجده می‌گه:

    وقتی از کارتون پیش نمایش نمیگذارید پنجاه درصد ارزش کارتونو ناپدید میکنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
طرح لایه باز دکمه خاموش روشن
طرح لایه باز مانیتور
تصویر زمینه October سال ۲۰۱۲
کاربرد و آموزش کار با گراواتار (Gravatar)
فایل لایه باز حباب های آب
طرح لایه باز ۵۴ آیکون آب و هوا