شمارش با CSS را یاد بگیرید

سایت ترجمه رایت می
سفارش آنلاین ترجمه مقالات و متون تخصصی با خیال راحت
سفارش آنلاین ترجمه مقالات و متون تخصصی با خیال راحت
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
خدمات کاشت مو در تهران
انجام بهترین خدمات کاشت مو به روش های جدید و تضمینی در کلینیک طب فروغ سحر
انجام بهترین خدمات کاشت مو به روش های جدید و تضمینی در کلینیک طب فروغ سحر
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
خرید جای بروشور دیواری و رومیزی
اعزام دانشجو رایگان
پرسش و پاسخ در مورد اعزام دانشجو ، تحصیل رایگان
پرسش و پاسخ در مورد اعزام دانشجو ، تحصیل رایگان
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
خودکار تبلیغاتی
خودکار تبلیغاتی فلزی | خودکار تبلیغاتی پلاستیکی | تحویل فوری
خودتان را اینجا معرفی کنید
خودکار تبلیغاتی فلزی | خودکار تبلیغاتی پلاستیکی | تحویل فوری
دمو :
یاد گرفتن شمارش با CSS مبحث جذابی است که با خواندن یک مقاله آموزشی مناسب میتوانید به راحتی به آن مسلط شوید. شمارنده های CSS با شمارش خودکارشان میتوانند بسیار مفید باشند، برای مثال زمانی که میخواهید تعدادی عکس پشت هم در صفحه ی خود به نمایش بگذارید و با شمارنده های CSS شماره ی هر عکس را قبل از آن اضافه میکنید.در مثال زیر میخواهیم گام به گام شمارش را انجام دهیم، برای مثال ابتدا یک سری دستورات از ساخت پنکیک مینویسیم، سپس با استفاده از سرچ در CSS شروع هر پاراگراف را پیدا میکنیم و سپس عدد را قبل از آن اضافه میکنیم.
کد HTML
<section>
<p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
<p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
<p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
<p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>
در این مثال هر پاراگراف یک مرحله از دستورات پخت پنکیک میباشد و هدف ما این است که مراحل پشت هم را به صورت داینامیک با استفاده از CSS شماره گذاری کنیم و تنها با 3 خط کد این کار را انجام میدهیم.
کد CSS
شمارنده های CSS از خاصیت counter-increment استفاده میکنند، این خاصیت تقریبا در CSS 2.1 به وجود آمد، برای شروع باید ابتدا مقدار counter را به 0 تغییر دهیم و در واقع آن را رستارت کنیم، ما میخواهیم این شمارشگر را هنگام بالا آمدن صفحه به وجود بیاوریم پس بهتر است که آن را در تگ body تعریف کنیم.
body {
counter-reset: steps;
}
خط کد بالا مقدار 0 و یک نام به شمارشگر میدهد، دادن نام به شمارشگر باعث میشود در ادامه بتوانیم به راحتی آن را صدا بزنیم و حتی از چندین شمارشگر با نام های مختلف استفاده کنیم.مرحله بعدی استفاده از :before که یک pseudo element میباشد است. با این کار تمام پاراگراف ها را میگیریم و شمارنده هایمان را به ابتدای آنها اضافه میکنیم. برای این کار باید ابتدا از counter-increment استفاده کنیم و سپس content را برای آن مشخص کنیم، میتوانیم تنها از اعداد استفاده کنیم یا حتی یک نوشته را append یا prepend کنیم. در این مثال متن “Step” را قبل از شمارنده prepend کردیم.
p:before {
counter-increment: steps;
content: "Step " counter(steps) ": ";
}
ما باید content ای که تعریف کردیم را کمی بزرگتر از بقیه متن ها جلوه دهیم، به همین منظور به آن فونت سایز بزرگتری میدهیم و همچنین آن را Bold میکنیم.
p {
color: #242424;
font-family: arial, sans-serif;
font-size: 16px;
line-height: 20px;
}
p:before {
counter-increment: steps;
content: "Step " counter(steps) ": ";
font-weight: bold;
font-size: 18px;
}
نظرات و سوالات کاربران
هم اکنون شما اولین دیدگاه را ارسال کنید.