X

X

X

CSS এ লিস্ট উপস্থাপণ


ওয়েব পেজে লিস্ট উপস্থাপণের নিয়ম

অর্ডারড লিস্ট
  1. Coffee
  2. Tea
  3. Coca Cola
আনঅর্ডারড লিস্ট
  • Coffee
  • Tea
  • Coca Cola

HTML List ও CSS List প্রপার্টিসমূহ

HTML এ দুই ধরণের লিস্ট রয়েছে। যেমন,

  • unordered lists (<ul>) – এই লিস্টগুলো শুধুমাত্র কিছু বিশেষ অক্ষর দিয়ে মার্ক করা হয়।
  • ordered lists (<ol>) – এই লিস্টগুলো ক্রমিক অক্ষর বা প্রতীক যেমন, সংখ্যা বা বর্ণমালা দিয়ে মার্ক করা হয়।

সিএসএস লিস্ট প্রপার্টিসমূহ ব্যবহার করে নিম্নোক্ত কার্যাবলী সম্পাদন করা যায়:

  • আইটেমগুলোকে বিভিন্ন প্রতীক দিয়ে মার্ক করা যায়।
  • লিস্ট আইটেমে ছবি ব্যবহার করা যায়।
  • তাছাড়া লিস্ট ও লিস্ট আইটেমগুলোর রং ও ব্যাকগ্রাউন্ড রং সেট করা যায়।

আইটেম মার্কারসমূহ

list-style-type property ব্যবহার করে বিভিন্ন লিস্ট আইটেমের মার্কার সেট করা হয়। নিচে প্রচলিত আইটেম মার্কারগুলো উদাহরণ দেওয়া হলো:

Code Example

<style>
ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


লক্ষ্যনীয়: অর্ডার্ড এবং আনঅর্ডারড লিস্টের প্রপার্টিসমূহ ভালোভাবে লক্ষ্য করুন।


নিচে ছবিকে কিভাবে লিস্ট আইটেমের মার্কার হিসেব ব্যবহার করা যায় তা দেখানো হলো

list-style-image property ব্যবহার করে ছবিকে লিস্ট আইটেমের মার্কার হিসেব ব্যবহার করতে হয়।


লিস্ট আইটেমের মার্কারের অবস্থান

লিস্ট আইটেমের মার্কারের অবস্থান কোথায় হবে তা list-style-position property ব্যবহার করে বর্ণনা করতে হয়।

Code Example

<style>
ul.a {
    list-style-position: outside;
}

ul.b {
    list-style-position: inside;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


ডিফল্ট সেটিংস দূরীকরণ

ডিফল্ট অবস্থায় প্রতিটি লিস্টের মার্কার হিসেবে কিছু প্রতীক স্বয়ংক্রিয়ভাবে উপস্থাপিত হয়। তাছাড়া এর ডিফর্ট মার্জিন ও প্যাডিং রয়েছে।

মার্কার বা বুলেট বাদ দেওয়ার জন্য list-style-type:none property ব্যবহার করা হয়। মার্জিন ও প্যাডিং দূর করার জন্য margin:0padding:0 প্রপার্টিসমূহ ব্যবহার করা হয়।

Code Example

<style>
ul.demo {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


সংক্ষেপে লিস্ট প্রপার্টিসমূহ ব্যবহারের নিয়ম

list-style property ব্যবহার করে এক লাইনেই সব লিস্ট প্রপার্টি ব্যবহার করা যায়। নিচের উদাহরণটি লক্ষ্য করুন:

Code Example

<style>
ul {
    list-style: square inside url("sqpurple.gif");
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


সংক্ষেপে লিস্ট প্রপার্টিসমূহ ব্যবহারের ক্ষেত্রে নিম্নোক্ত ক্রম অনুসরণ করতে হবে:

  • list-style-type
  • list-style-position
  • list-style-image

যদি কোনো প্রপার্টি উল্লেখ্য করা না হয়, তবে ওই প্রপার্টির ডিফল্ট মান ব্যবহৃত হবে।


রংবেরংয়ের লিস্ট

আপনি চাইলে লিস্টকে বিভিন্ন রংয়ে উপস্থাপণ করতে পারবেন। <ol> অথবা <ul> tag, এর মধ্যে যা কিছু যুক্ত করা হোক না কেনো তা পুরো লিস্টকে প্রভাবিত করবে:

Code Example

<style>
ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

Customized list with a red left border This example demonstrates how to create a list with a red left border.

Full-width bordered list This example demonstrates how to create a bordered list without bullets.

All the different list-item markers for lists This example demonstrates all the different list-item markers in CSS.


নিজে নিজে চেষ্টা করুণ!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »


CSS List Property সমূহ

প্রপার্টি বর্ণনা
list-style সংক্ষেপে সবগুলো প্রপার্টি একসাথে বর্ণনা করার জন্য ব্যবহৃত হয়।
list-style-image list-item marker এ ছবি সেট করার জন্য ব্যবহৃত হয়।
list-style-position list-item marker সমূহ লিস্টের ভেতরে নাকি বাইরে উপস্থাপিত হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
list-style-type list-item marker এর ধরণ বর্ণনা করার জন্য ব্যবহৃত হয়।