সিএসএস কাউন্টার
সিএসএস কাউন্টার
সিএসএস কাউন্টার(counter) হলো সিএসএস কর্তৃক নিয়ন্ত্রিত ভ্যারিয়েবল। কোনো এলিমেন্ট একটি পেজের মধ্যে কতবার ব্যবহৃত হয়েছে তার উপর ভিত্তিকরে সিএসএস নিয়মের আওতায় কাউন্টার ভ্যারিয়েবলের ভ্যালুসমূহ বৃদ্ধি পায়।
ডকুমেন্টের কন্টেন্টের উপর ভিত্তিকরে কাউন্টারসমূহকে মানানসই অবস্থানে রাখতে পারবেন।
এক নজরে সিএসএস কাউন্টার প্রোপার্টিসমূহ
জেনারেটেড কন্টেন্ট ইনসার্ট(insert) করার জন্য ::before এবং ::after সুডো-এলিমেন্টের সাথে ব্যবহার করা হয়।
কাউন্টারের ভ্যালু এক বা তার অধিক বৃদ্ধি পায়।
এক বা তার অধিক কাউন্টার তৈরি বা রিসেট হয়।
সিএসএস কাউন্টার নিয়ে কাজ করার জন্য, আমরা আবারো সিএসএস কাউন্টার প্রোপার্টি এবং ফাংশনের কার্যাবলী নিম্নে সংক্ষেপে তুলে ধরলাম।
counter-reset- একটি কাউন্টার তৈরি বা রিসেট করে।counter-increment- কাউন্টারের ভ্যালু বৃদ্ধি করে।content- সৃষ্টিকৃত কন্টেন্ট ইনসার্ট করে।counter()অথবাcounters()ফাংশন - একটি এলিমেন্টে কাউন্টারের ভ্যালু যুক্ত করে।
সিএসএস কাউন্টার ব্যবহার করতে হলে প্রথমে অবশ্যই counter-reset প্রোপার্টি দিয়ে ইহা তৈরি করে নিতে হবে।
নিচের উদাহরণে body সিলেক্টরের মাধ্যমে একটি পেজকে সিলেক্ট করে এর মধ্যে counter-reset প্রোপার্টি ব্যবহার করে section নামের একটি কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।
তারপরে counter-increment প্রোপার্টি ব্যবহার করে প্রত্যেক <h1> এলিমেন্টের জন্য section এর ভ্যালু বৃদ্ধি করা হয়েছ।
content প্রপার্টির মাধ্যমে কাউন্টার(section) ভ্যারিয়েবলসহ এর বর্ধিত ভ্যালুকে প্র্যতেক <h1> এলিমেন্টের পূর্বে স্থান দেওয়া হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:blue;
counter-reset:part;
}
h2::before {
counter-increment:part;
content: "part " counter(part) ": ";
}
</style>
<title>সিএসএসের উদাহরণ</title>
</head>
<body>
<h1>সিএসএস কন্টেইনারের ব্যবহার:</h1>
<h2>এইচটিএমএল টিউটোরিয়াল</h2>
<h2>সিএসএস টিউটোরিয়াল</h2>
<h2>জাভাস্ক্রিপ্ট টিউটোরিয়াল</h2>
<p><b>নোট:</b>এই প্রোপার্টি টি IE8 সাপোর্ট করানোর জন্য !DOCTYPE নির্দিষ্ট করতে হবে।</p>
</body>
</html>
ফলাফল
নেস্টেড কাউন্টার
নিচের উদাহরণে body সিলেক্টরের মাধ্যমে পেজের জন্য section কাউন্টার ভ্যারিয়েবল তৈরি করে <h1> সিলেক্টরের মাধ্যমে section এর মধ্যে subsection কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
body { color:brown;
counter-reset:part;
}
h2 {
counter-reset: subpart;
}
h2::before {
counter-increment: part;
content: "part " counter(part) ". ";
}
h3::before {
counter-increment: subpart;
content: counter( subpart) "." counter( subpart) " ";
}
</style>
<title>সিএসএসের উদাহরণ</title>
</head>
<body>
<h2>এইচটিএমএল টিউটোরিয়াল:</h2>
<h3>এইচটিএমএল টিউটোরিয়াল</h3>
<h3>সিএসএস টিউটোরিয়াল</h3>
<h2>স্ক্রিপ্টিং টিউটোরিয়াল:</h2>
<h3>জাভাস্ক্রিপ্ট</h3>
<h3>ভিবিস্ক্রিপ্ট</h3>
<h2>এক্সএমএল টিউটোরিয়াল</h2>
<h3>এক্সএমএল</h3>
<h3>এক্সএসএল</h3>
<p><b>নোট:</b>এই প্রোপার্টি টি IE8 সাপোর্ট করানোর জন্য !DOCTYPE নির্দিষ্ট করতে হবে।</p>
</body>
</html>
ফলাফল
আউটলাইন লিস্ট তৈরির জন্য কাউন্টার যথাপোযুক্ত। কারণ কাউন্টারের নতুন ভ্যালু স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্টসমূহে যুক্ত হয়।
নেস্টেড কাউন্টারের বিভিন্ন লেভেলের মধ্যে একটি স্ট্রিং যুক্ত করার জন্য counters() এর পরিবর্তে counters() ফাংশন ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: part;
list-style-type: none;
}
li::before {
counter-increment: part;
content: counters(part,".") " ";
}
</style>
<title>সিএসএসের উদাহরণ</title>
</head>
<body>
<ol>
<li>আইটেম</li>
<li>আইটেম</li>
<ol>
<li>আইটেম</li>
<li>আইটেম</li>
<li>আইটেম</li>
<ol>
<li>আইটেম</li>
<li>আইটেম</li>
<li>আইটেম</li>
</ol>
</li>
<li>আইটেম</li>
</ol>
</li>
<li>আইটেম</li>
<li>আইটেম</li>
</ol>
<ol>
<li>আইটেম</li>
<li>আইটেম</li>
</ol>
<p><b>নোট:</b>এই প্রোপার্টি টি IE8 এ সাপোর্ট করানোর জন্য !DOCTYPE নির্দিষ্ট করতে হবে।</p>
</body>
</html>
ফলাফল