লিস্ট


ওয়েব পেজে তথ্য উপস্থাপনার একটি অন্যতম পদ্ধতি লিষ্ট । CSS দ্বারা দুই ধরণের লিস্ট তৈরি করা যায়।
যথাঃ-
i) অর্ডার লিস্ট
ii) আনঅর্ডার লিস্ট
এছাড়া লিস্টে যেকোন সিম্বলের পরিবর্তে ছোট আকারের ইমেজ ব্যবহার করা যায়।
=======================================
 অর্ডার লিস্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে, আন অর্ডার লিস্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে।



অর্ডার লিস্ট


অর্ডার লিস্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অর্ডার লিস্ট বেশ কয়েক ধরণের হতে পারে। যেমন এ্যালফাবেটিক, ডেসিমাল, রোমান ইত্যাদি।




<head>
<style>
.alphabet {
 list-style-type:lower-alpha;
}
.decimal {
 list-style-type:decimal;
}
.roman {
 list-style-type:lower-roman;
}
</style>
</head>

এ্যালফাবেটিক স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:upper-alpha; অথবা list-style-type:lower-alpha;
ডেসিমাল স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:decimal;
রোমান স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:upper-roman; অথবা list-style-type:lower-roman; ।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
.alphabet {
 list-style-type:lower-alpha;
}
.decimal {
 list-style-type:decimal;
}
.roman {
 list-style-type:lower-roman;
}
</style>
</head>
<body >
<h3>Alphabet Type list</h3>
 <ol class="alphabet">
 <li>Home</li>
 <li>About Us</li>
 <li>Contact Us</li>
 </ol>
<h3>Number Type list</h3>
 <ol class="decimal">
 <li>HTML</li>
 <li>CSS</li>
 <li>PHP</li>
 </ol>
<h3>Roman Number Type list</h3>
 <ol class="roman">
 <li>Pragaph</li>
 <li>Table</li>
 <li>List</li>
 </ol>
</body>
</html>



 আনঅর্ডার লিস্ট


আন অর্ডার লিস্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে, আন অর্ডার লিস্ট বেশ কয়েক ধরণের হতে পারে। যেমন ডিক্স স্টাইল, সার্কেল স্টাইল, স্কয়ার স্টাইল ইত্যাদি।

<head>
<style>
#disc {
 list-style-type:disc;
}
#circle {
 list-style-type:circle;
}
#square {
 list-style-type:square;
}
</style>
</head>

ডিক্স স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:disc;
সার্কেল স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:circle;
স্কয়ার স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:square; ।


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
#disc {
 list-style-type:disc;
}
#circle {
 list-style-type:circle;
}
#square {
 list-style-type:square;
}
</style>
</head>
<body >
<h4>Disc Type list</h4>
 <ul id="disc">
 <li>Home</li>
 <li>About Us</li>
 <li>Contact Us</li>
 </ul>
<h4>Circle Type list</h4>
 <ul id="circle">
 <li>HTML</li>
 <li>CSS</li>
 <li>PHP</li>
 </ul>
<h4>Square Type list</h4>
 <ul id="square">
 <li>Pragaph</li>
 <li>Table</li>
 <li>List</li>
 </ul>
</body>
</html>



লিস্টে ইমেজের ব্যবহার



লিস্টে যেকোন সিম্বলের পরিবর্তে ছোট আকারের ইমেজ ব্যবহার করা যায়।নেভিগেশন বারে লিস্টের ব্যবহার খুবই জনপ্রিয়। সাধারণত সাইডবার নেভিগেশনে ব্যবহৃত লিস্টে লিস্ট স্টাইল হিসেবে ইমেজের ব্যবহার বেশি দেখা যায়।লিস্ট স্টাইল হিসেবে ইমেজ ব্যবহারের জন্য Declaration করতে হবে list-style-image:url(box.png)।


<head>
<style>
ul{
 list-style-image:url("./icon/box.png");
}
</style>
</head>

এখানে box.png ইমেজটি icon folder এর ভিতরে রাখা হয়েছে।

উদাহরণ :--



<!DOCTYPE html>
<html>
<head>

<style>
ul{
 list-style-image:url("এখানে ইমেজের লিংক দেবেন।");
}
</style>
</head>
<body>
<h1>List Style Image</h1>
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 </ul>
</body>
</html>






আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন