در این قسمت از فیلم آموزش CSS به آموزش Counter یا شمارنده پرداخته ایم . با استفاده از شمارنده می توانیم به هر تگی که خواستیم شمارشگر اضافه کنیم .
Counter ( شمارنده ) در CSS
یکی از ویژگی های شمارنده ، Counter-reset است که برای تعریف کردن شمارنده استفاده می شوند و همین طور برای این که شمارنده از کدام عدد شروع شود هم از این ویژگی استفاده می شود .
ویژگی بعدی Counter-increment است که تعیین می کند شمارنده چندتا چندتا کم شود و یا زیاد شود .
نکته مهم این است که برای نمایش شمارنده باید از شبه کلاس Before:: استفاده کنیم و در داخل Content از تابع ()Counter استفاده کنیم .
Counter-reset
گفتیم که برای تعریف کردن شمارنده از این ویژگی استفاده می کنیم و همین طور برای تعیین عدد شروع شمارنده استفاده می شود . شما می توانید هر چندتا که شمارنده می خواید تعریف کنید و برای هر کدام اسمی را انتخاب کنید .
برای تعیین شماره آغاز کننده شمارنده همانند سورس کد زیر عمل کنید :
counter-reset: div; counter-reset: web30ty 5; counter-reset: heading -2;
همان طور که می بینید بعد از ویژگی Counter-reset اسم div را برای آن انتخاب کرده ایم حالا چون عددی کنار آن قرار نداده ایم به صورت پیش فرض شمارنده از عدد 1 شروع می شود .
در سطر دوم کنار اسم شمارنده عدد 5 را قرار دادیم . این یعنی شمارنده باید از عدد 5 شروع شود .
در سطر سوم هم عدد 2- را نوشته ایم و این یعنی شمارنده باید از عدد 2- شروع شود .
Counter-increment
این ویژگی تعیین می کند که شمارنده چندتا چندتا زیاد شود و یا کم شود :
div{
counter-increment:div;
}
یعنی وقتی که تگ div دیدی یدونه یدونه به شمارنده اضافه کن . وقتی که فقط اسم شمارنده نوشته شود به صورت پیش فرض یدونه یدونه به شمارنده اضافه می کند .
h1{
counter-increment:heading 2;
}
کد بالا یعنی هر جا تگ h1 دوتا به شمارنده اضافه کن چون کنار اسم شمارنده از عدد 2 استفاده کرده ایم و این یعنی دوتا دوتا به شمارنده اضافه شود .
h2{
counter-increment: web30ty -3;
}
کد بالا یعنی از شمارنده سه تا سه تا کم کن چون از عدد 3- استفاده کرده ایم پس هر وقت تگ h2 رو دید سه واحد از شمارنده کم می کند .
تابع ()Counter
از این تابع باید در شبه کلاس before:: استفاده شود چون می خواهیم شمارنده قبل از عناصر نمایش داده شود . این تابع دوتا مقدار می گیرد اولی نام شمارنده و دومی استایل شمارنده ( یعنی به شکلی نمایش داده شود ) .
این تابع را باید در داخل Content بنویسیم و اگر مقدار دوم تابع را ننویسید به صورت پیش فرض از عدد صحیح را نمایش می دهد .
div::before{
content: counter(div);
}
مقادیری که تابع استایل می پذیرد به صورت زیر است :
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
مثال :
کد HTML :
<!doctype html> <html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div > لوگوی وب سیتی </div> <div > لوگوی وب سیتی </div> <div > لوگوی وب سیتی </div> <div > لوگوی وب سیتی </div> <h2> CSS فیلم آموزش </h2> <h2> CSS فیلم آموزش </h2> <h2> CSS فیلم آموزش </h2> <h2> CSS فیلم آموزش </h2> </body> </html>
کد CSS :
body{
counter-reset: div;
counter-reset: heading 5;
}
div{
counter-increment:div;
}
div::before{
content: counter(div , decimal-leading-zero );
}
h2{
counter-increment:heading -3;
}
h2::before{
content: counter(heading);
width:40px;
height:40px;
display:inline-block;
text-align:center;
background:green;
line-height:39px;
border-radius: 100%;
border: 2px solid orange;
color:#fff;
}
اگر کدها را اجرا کنید می بینید که به شمارنده های تگ h2 یکم استایل دادم و شما می تونید خیلی استایل های زیباتری هم درست کنید .
شمارنده تو در تو
برای نوشتن شمارنده ها به صورت تو در تو از تابع ()Counters استفاده می کنیم در تابع ()Counters بعد از نوشتن اسم شمارنده باید از جدا کننده استفاده کنید . ( در فیلم آموزشی توضیح داده شده است )
شمارنده تو در تو را به عنوان تمرین می تونید خودتون بنویسید .
ممنون مفید بود
عااااااااااااااالی بود ممنون
عالی بود مرسی از اموزش خوبتون