কাউন্টার এবং তালিকা শৈলী

অনেক ধরনের বিষয়বস্তু একটি HTML তালিকা হিসেবে সবচেয়ে ভালোভাবে উপস্থাপন করা হয়। অর্ডারকৃত তালিকার বিষয়বস্তুর জন্য, যেমন রেসিপি ধাপ বা নিবন্ধের পাদটীকা, মার্কারে প্রায়শই তথ্যও থাকে। CSS একটি তালিকায় কাউন্টার নিয়ন্ত্রণ করার বিভিন্ন উপায় প্রদান করে।

শৈলী তালিকা

পূর্বনির্ধারিত তালিকা শৈলীর বিস্তৃত পরিসর রয়েছে যা সংখ্যা, বর্ণানুক্রমিক, রোমান সংখ্যা এবং অনেক আন্তর্জাতিক গণনা পদ্ধতি সমর্থন করে।

ব্রাউজার দ্বারা সমর্থিত শৈলী ছাড়াও, W3C 45টি লেখার সিস্টেমে 181টি অতিরিক্ত শৈলীর সমর্থন সহ রেডিমেড কাউন্টার স্টাইল প্রকাশ করেছে।

যদি এই বিকল্পগুলি আপনার প্রয়োজনের সাথে খাপ খায় না, তাহলে আপনি একটি কাস্টম @counter-style সংজ্ঞায়িত করতে পারেন। এটি আপনাকে কাস্টম প্রতীক, একটি উপসর্গ এবং প্রত্যয় এবং আরও অনেক কিছু নির্দিষ্ট করতে দেয়।

ডিফল্টরূপে, আইটেম চিহ্নিতকারী তালিকার outside থাকে, তালিকার সামনে অবস্থান করে এবং ডানদিকে সারিবদ্ধ থাকে। আপনি list-style-position: inside আইটেম চিহ্নিতকারীকে তালিকার ভিতরে অবস্থান করতে পারেন।

কাউন্টার

তালিকার শৈলীগুলি কীভাবে তালিকা আইটেম চিহ্নিতকারীগুলি প্রদর্শিত হবে তা নিয়ন্ত্রণ করে, কাউন্টারগুলি আপনাকে প্রদর্শিত মানগুলি নিয়ন্ত্রণ করতে দেয়। <li> তালিকা আইটেম উপাদানগুলির জন্য, ব্রাউজার list-item নামে একটি কাউন্টার তৈরি করে যা সম্মুখীন হওয়া প্রতিটি তালিকা আইটেমের জন্য 1 দ্বারা বৃদ্ধি করা হয়।

সিএসএস কাউন্টারগুলি একটি উপাদানের অনুরূপ counter-increment মান সেট রেন্ডার করা হয়েছে তার সংখ্যার একটি চলমান গণনা রাখে।

একটি নতুন কাউন্টার তৈরি করতে, একটি কাউন্টার নাম এবং ঐচ্ছিকভাবে, একটি প্রাথমিক মান সহ counter-reset ব্যবহার করুন। আপনি প্রায়শই এটিকে একটি অভিভাবক উপাদানে সেট করবেন যা গণনা করা হবে এমন সমস্ত উপাদান ধারণ করে।

তারপরে, আপনি গণনা করতে চান এমন প্রতিটি উপাদানে একটি counter-increment বৈশিষ্ট্য যোগ করুন।

অবশেষে, counter() ফাংশন ব্যবহার করে কাউন্টার মান প্রদর্শন করুন।

এই উদাহরণে, আমরা প্রতিটি ফুটনোটের জন্য লিঙ্ক পাঠ্য হিসাবে পাদটীকাগুলির চলমান গণনা প্রদর্শন করতে চাই। যেহেতু আমরা সম্পূর্ণ নথির জন্য একটি একক কাউন্টার চাই, তাই আমরা counter-reset: note , এবং প্রতিটি ফুটনোট লিঙ্কে বৃদ্ধি।

আপনি বিভিন্ন আইটেম গণনা একাধিক কাউন্টার থাকতে পারে. পাদটীকা উদাহরণে, আপনি যদি পাদটীকাটি যে বিভাগ এবং অনুচ্ছেদের মধ্যে রয়েছে তার সূচী প্রদর্শন করতে চান?

counter-reset ব্যবহার করে বডিতে বিভাগ গণনা তৈরি করা যেতে পারে এবং তারপর প্রতিটি <h2> উপাদানে বৃদ্ধি করা যেতে পারে। আমরা প্রতিটি বিভাগের জন্য অনুচ্ছেদ সংখ্যা পুনরায় সেট করতে চাই, তাই আমরা <h2> উপাদানগুলিতে counter-reset এবং <p> উপাদানগুলিতে বৃদ্ধি ব্যবহার করব।

পরিশেষে, আমরা content সম্পত্তিতে পাল্টা মানগুলিকে একত্রিত করি।

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

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

আপনি যখন একটি তালিকার ভিতরে একটি তালিকা নেস্ট করেন তখন কী ঘটে? list-item কাউন্টার প্রতিটি <ul> বা <ol> উপাদানের জন্য আরম্ভ করা হয়, এবং counter() ব্যবহার করে শুধুমাত্র অন্তর্নিহিত গণনার সংখ্যা প্রদান করে। আপনি যদি প্রতিটি নেস্টেড কাউন্টার থেকে গণনা দেখাতে চান তবে counters() ফাংশনটি ব্যবহার করুন, যা একটি কাউন্টারের নাম এবং একটি বিভাজক নেয়।

li::marker {
  content: counters(list-item, ".")
  }

বিপরীত কাউন্টার

ডিফল্টরূপে, কাউন্টারগুলি ( <ol> উপাদানগুলির অন্তর্নিহিত list-item কাউন্টার সহ) 0 থেকে শুরু হয় এবং প্রতিটি উপাদানের জন্য একটি দ্বারা গণনা করা হয়, যার অর্থ প্রথমটিকে 1 হিসাবে গণনা করা হবে৷ আপনি যদি 1 থেকে পিছনে গণনা করতে চান তবে কী হবে?

এটি করার জন্য, <ol> এ reversed বৈশিষ্ট্য যুক্ত করুন। আপনি যদি স্ট্যান্ডার্ড তালিকা শৈলী ব্যবহার করেন, মার্কারগুলি প্রত্যাশিত হিসাবে কাজ করবে। যাইহোক, যদি আপনি একটি কাস্টম কাউন্টার ব্যবহার করেন, তাহলে আপনাকে counter-increment একটি নেতিবাচক মান সেট করতে হবে এবং কাউন্টারের জন্য ম্যানুয়ালি প্রারম্ভিক মান গণনা করতে হবে।