তালিকার পাশাপাশি ক্রমবিন্যস্ত করা হয়. CSS এর সাহায্যে, আপনি সেট তালিকা আইটেম চিহ্নিতকারী বা চিহ্নিতকারীদের জন্য একটি চিত্র সেট করতে পারেন। এর সাথে, CSS এর সাথে, আমরা তালিকা-আইটেম মার্কারগুলির জন্য অবস্থানও সেট করতে পারি।
আসুন এখন কিছু উদাহরণ দেখি -
লিস্ট-স্টাইল-টাইপ
লিস্ট-স্টাইল-টাইপ লিস্ট-আইটেম চিহ্নিতকারীর ধরন সেট করতে ব্যবহৃত হয়।
উদাহরণ
আসুন এখন একটি উদাহরণ দেখি যেখানে আমরা অর্ডার করা তালিকা (ol) −
ফর্ম্যাট করছি<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html> আউটপুট
তালিকা-শৈলী-চিত্র
তালিকা-শৈলী-চিত্র বৈশিষ্ট্যটি একটি চিত্রকে তালিকা-আইটেম চিহ্নিতকারী হিসাবে সেট করতে ব্যবহৃত হয়।
উদাহরণ
আসুন এখন একটি উদাহরণ দেখি -
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html> আউটপুট
তালিকা-শৈলী-অবস্থান
তালিকা-শৈলী-পজিশন বৈশিষ্ট্যটি তালিকা-আইটেম চিহ্নিতকারীর অবস্থান নির্ধারণ করতে ব্যবহৃত হয়।
উদাহরণ
আসুন এখন একটি উদাহরণ দেখি -
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-position: outside;
}
ul.demo2 {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html> আউটপুট
