সিএসএস কাউন্টার - Css Counter



সিএসএস কাউন্টার বা counter হলো সিএসএস কর্তৃক নিয়ন্ত্রিত ভ্যারিয়েবল। কোনো এলিমেন্ট একটি পেজের মধ্যে কতবার ব্যবহৃত হয়েছে তার উপর ভিত্তি করে সিএসএস নিয়মের আওতায় কাউন্টার ভ্যারিয়েবলের মানসমূহ বৃদ্ধি পায়।
ডকুমেন্টের কন্টেন্টের উপর নির্ভর করে কাউন্টারগুলোকে মানানসই অবস্থানে রাখা যায়।


কাউন্টার ব্যবহার করা

সিএসএস কাউন্টার বা counter হলো সিএসএস কর্তৃক নিয়ন্ত্রিত ভ্যারিয়েবল। সিএসএস কাউন্টার এর যে সকল প্রোপার্টি ব্যবহার করব তাদের নাম এবং তাদের কার্যাবলী সংক্ষেপে নিচে দেখুন।

counter-reset - একটি কাউন্টার তৈরি বা রিসেট করে।
counter-increment - কাউন্টারের ভ্যালু বৃদ্ধি করে।
content - সৃষ্টিকৃত কন্টেন্ট ইনসার্ট করে।
counter() অথবা counters() ফাংশন - একটি এলিমেন্টে কাউন্টারের ভ্যালু যুক্ত করে।

সিএসএস কাউন্টার ব্যবহার করতে হলে প্রথমে অবশ্যই counter-reset প্রোপার্টি দিয়ে ইহা তৈরি করে নিতে হবে।
নিচের উদাহরণে body সিলেক্টরের মাধ্যমে একটি পেজকে সিলেক্ট করে এর মধ্যে counter-reset প্রোপার্টি ব্যবহার করে section নামের একটি কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে। তারপরে counter-increment প্রোপার্টি ব্যবহার করে প্রত্যেক <h1> এলিমেন্টের জন্য section এর মান বৃদ্ধি করা হয়েছ।

content প্রপার্টির মাধ্যমে কাউন্টার(section) ভ্যারিয়েবলসহ এর বর্ধিত মানকে প্র্যতেক <h1> এলিমেন্টের পূর্বে স্থান দেওয়া হয়েছে।

উদাহরণ

body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}




নেস্টেড কাউন্টার

নিচের উদাহরণে body সিলেক্টরের মাধ্যমে পেজের জন্য section কাউন্টার ভ্যারিয়েবল তৈরি করে <h1> সিলেক্টরের মাধ্যমে section এর মধ্যে subsection কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।

উদাহরণ

body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}


আউটলাইন লিস্ট তৈরির জন্য কাউন্টার একটি ভাল পদ্ধতি। কারণ কাউন্টারের নতুন মান স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্টসমূহে যুক্ত হয়।
নেস্টেড কাউন্টারের বিভিন্ন লেভেলের মধ্যে একটি স্ট্রিং যুক্ত করার জন্য counters() এর পরিবর্তে counters() ফাংশন ব্যবহার করা হয়।

উদাহরণ

ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}




সকল কাউন্টার প্রপার্টি

প্রপার্টি বর্ণনা
content জেনারেটেড কন্টেন্ট ইনসার্ট(insert) করার জন্য ::before এবং ::after সুডো-এলিমেন্টের সাথে ব্যবহার করা হয়।
counter-increment কাউন্টারের ভ্যালু এক বা তার অধিক বৃদ্ধি পায়।
counter-reset এক বা তার অধিক কাউন্টার তৈরি বা রিসেট হয়।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.