সিএসএস লিস্ট - CSS List


সিএসএস লিস্ট প্রপার্টির ব্যবহার করে কোন ছবিকে লিস্ট আইটেম মার্কার হিসেবে ব্যবহার করা যায়,কোন অর্ডারড বা আনঅর্ডারড লিস্টের মার্কার ছিনহ পরিবর্তন করা যায়। আরও বেস কিছু স্টাইল এর কাজ সিএসএস লিস্ট প্রপার্টি গুলো ব্যবহার করে করা যায়।

আনঅর্ডারড লিস্ট, <ul>

  • সূর্যমুখী
  • দোলনচাঁপা
  • হাসনাহেনা
  • কাঠগোলাপ
  • সূর্যমুখী
  • দোলনচাঁপা
  • হাসনাহেনা
  • কাঠগোলাপ

অর্ডারড লিস্ট, <ol>

  1. সূর্যমুখী
  2. দোলনচাঁপা
  3. হাসনাহেনা
  4. কাঠগোলাপ
  1. সূর্যমুখী
  2. দোলনচাঁপা
  3. হাসনাহেনা
  4. কাঠগোলাপ


list-style-type প্রপার্টি

ist-style-type প্রপার্টি ব্যবহার করে লিস্ট আইটেম মার্কার এর প্রকার অর্থাৎ লিস্ট আইটেম গুলো কি রকম দেখতে হবে তা নির্ধারণ করা যায়।


আনঅর্ডারড লিস্টে list style type ব্যবহার

নিচে সিএসএস list style type প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখানো হল, যেখানে আনঅর্ডারড লিস্টের জন্য সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

ul {
   list-style-type: square;
   }

কোড এডিটর



আনঅর্ডারড লিস্টের সাথে class ব্যবহার

নিচে সিএসএস list style type প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখানো হল, যেখানে আনঅর্ডারড লিস্টের সাথে class ব্যবহার করে সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

ul.circle {
   list-style-type: circle;
   }
   
ul.square {
   list-style-type: square;
   }
   
ul.dices  {
   list-style-type: dices;
   }

কোড এডিটর



আনঅর্ডারড লিস্টের সাথে id ব্যবহার

নিচে সিএসএস list style type প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখানো হল, যেখানে আনঅর্ডারড লিস্টের সাথে id ব্যবহার করে সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

ul#circle {
   list-style-type: circle;
   }
   
ul#square {
   list-style-type: square;
   }
   
ul#dices  {
   list-style-type: dices;
   }

কোড এডিটর



অর্ডারড লিস্টে list-style-type ব্যবহার

নিচে সিএসএস list style type প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখানো হল, যেখানে অর্ডারড লিস্টের জন্য সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

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

কোড এডিটর



অর্ডারড লিস্টের সাথে class ব্যবহার

নিচে সিএসএস list style type প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখানো হল, যেখানে অর্ডারড লিস্টের সাথে class ব্যবহার করে সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

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

ol.lower-greek {
   list-style-type: lower-greek;
   }

ol.katakana-iroha {
   list-style-type: katakana-iroha;
   }

কোড এডিটর



অর্ডারড লিস্টের সাথে id ব্যবহার

নিচে সিএসএস list style type প্রোপার্টি ব্যবহার করে একটি উদাহরন দেখানো হল, যেখানে অর্ডারড লিস্টের সাথে id ব্যবহার করে সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

ol#upper-roman {
   list-style-type: upper-roman;
   }

ol#lower-greek {
   list-style-type: lower-greek;
   }

ol#katakana-iroha {
   list-style-type: katakana-iroha;
   }

কোড এডিটর



list-style-position প্রোপার্টি

লিস্ট আইটেম এর বুলেট ছিনহ বা markar ছিনহ গুলোর অবস্থান নির্ধারণ করতে সিএসএস এর list-style-position প্রোপার্টি ব্যবহার করা হয়। অর্থাৎ বুলেট ছিনহ বা markar ছিনহ গুলো লেখার সাথে থাকবে না সবকিছুর বাইরে থাকবে, তা নির্ধারণ করা হয়।

list-style-position প্রোপার্টি এর পূর্ব-নির্ধারিত বা deafault মান হল outside.

নিচে একটি উদাহরন দেখুন, যেখানে list-style-position প্রোপার্টি ব্যবহার করে একটি আন-অর্ডারড ও অর্ডারড লিস্ট আইটেম গুলোর জন্য সিএসএস স্টাইল কোড লেখা হয়েছে।

উদাহরণ

ul {
   list-style-type: square;
   list-style-position: outside;
   }

ol {
   list-style-type: upper-roman;
   list-style-position: inside;
   }

কোড এডিটর



list-style-image প্রোপার্টি

কোন ছবিকে লিস্ট আইটেম গুলোর মার্কার হিসেবে ব্যবহার করার জন্য সিএসএস এর list-style-image প্রোপার্টি ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, যেখানে list-style-image প্রোপার্টি ব্যবহার করে একটি আন-অর্ডার লিস্ট আইটেম গুলোর মার্কার রুপে একটি ছবি কে নির্ধারণ করা হয়েছে।

উদাহরণ

ul {
   list-style-image: url('bullet.png');
   }

কোড এডিটর


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

যদি লিস্ট আইটেম মার্কার হিসেবে বাবহ্রিত ছবিটিকে সব ব্রাউজার এ সমানভাবে প্রদর্শন করতে চাই, তবে ক্রসব্রাউজার সমাধান ব্যবহার করতে হবে।


ক্রসব্রাউজার সমাধান

ইমেজ লিস্ট আইটেম মার্কারকে সব ব্রাউজার এ সমানভাবে প্রদর্শন করার জন্য নীচে একটি উদাহরণ দেয়া হল -

উদাহরণ

ul {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
   }
   
li {
   background-image: url(sqpurple.gif);
   background-repeat: no-repeat;
   background-position: 0px 5px;
   padding-left: 14px;
   }

কোড এডিটর


এই কোডগুলোর ব্যাখ্যা নীচে দেয়া হল -

আনঅর্ডার লিস্টের জন্য - এখানে লিস্ট আইটেম মার্কার সরানোর জন্য list-style-type এর মান none নির্ধারণ করা হয়েছে। ক্রস ব্রাউজার কম্পাটিবিলিটির জন্য সব দিকে মার্জিন এবং প্যাডিং 0px নির্ধারণ করা হয়েছে।

লিস্ট আইটেমের জন্য - background-image প্রপার্টি ব্যবহার করে লিস্টের জন্য ব্যাবহৃত ছবিটি প্রদর্শন করা হয়েছে এবং যাতে মাত্র একবার প্রদর্শন হয় তার জন্য background-repeat প্রপার্টি ব্যবহার করে তার মান বা value none নির্ধারণ করা হয়েছে। তারপর background-position প্রপার্টি ব্যবহার করে কোন নির্দিষ্ট স্থানে প্রদর্শনের জন্য তার মান নির্ধারণ করা হয়েছে। সর্বশেষে padding-left প্রপার্টি ব্যবহার করে টেক্সটকে লিস্টের সাথে নির্দিষ্ট স্থানে রাখা হয়েছে।


color প্রোপার্টি ব্যবহার

সিএসএস color প্রোপার্টি ব্যবহার করে লিস্ট আইটেম গুলোর লেখার এবং markar ছিনহের রং পরিবর্তন করা যায়।

নিছে একটি উদাহরন দেখুন, যেখানে সিএসএস color প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

ul {
   list-style-type: square;
   color: teal;
   }

ol {
   list-style-type: upper-roman;
   color: forestgreen;
   }

কোড এডিটর


সিএসএস এর color প্রোপার্টি সম্পর্কে জানতে, আমাদের সিএসএস রঙ - Css Colour টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।


ভিন্ন ভিন্ন রঙের লিস্ট

class অথবা id ব্যবহার করে ভিন্ন ভিন্ন রঙের লিস্ট আইটেম তৈরি করা যায়।

নিচে একটি উদাহরন দেখুন, যেখানে সিএসএস color প্রোপার্টি ও id ব্যবহার করে ভিন্ন ভিন্ন রঙের লিস্ট আইটেম তৈরি করা হয়েছে।

উদাহরণ

<style>
  ul {list-style-type: square;}
  ol {list-style-type: katakana-iroha;}
  #red {color:tomato;}
  #green {color:green;}
  #blue {color:blue;}
  #orange {color:orange;}
</style>

<ul>
  <li id="red">Red</li>
  <li id="green">Green</li>
  <li id="blue">Blue</li>
  <li id="orange">Orange</li>
</ul>

<ol>
  <li id="red">Red</li>
  <li id="green">Green</li>
  <li id="blue">Blue</li>
  <li id="orange">Orange</li>
</ol>

কোড এডিটর



শর্টহ্যান্ড প্রোপার্টি - list-style

কোড সংক্ষিপ্ত করে লেখার জন্য, সবগুলো লিস্ট প্রপার্টি একটি মাত্র সিএসএস লিস্ট প্রপার্টির মাধ্যমে প্রকাশ করা যায়। অর্থাৎ list style type, list style position এবং list style image এর জন্য আলাদা আলাদা ভাবে কোড না লিখে একবার মাত্র লিস্ট প্রপার্টি ব্যবহার করেই এই ৩ টি প্রোপার্টির মান নির্দিষ্ট করে দেয়া যায়। একে বলে সিএসএস শর্টহ্যান্ড প্রপার্টি। এই প্রোপার্টি গুলোর জন্য সিএসএস এর শর্টহ্যান্ড প্রোপার্টি হল list-style

লিস্ট এর জন্য সিএসএস এর শর্টহ্যান্ড প্রপার্টি ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

ul {
   list-style: square url("image.png");
   }

কোড এডিটর


এইচটিএমএল লিস্টকে সিএসএস স্টাইল কোড ব্যবহার করে স্টাইল করা সম্পর্কে Mozilla Developer থেকে আর জানতে Styling lists ওয়েব পেজটি ব্রাউজ করুন।


সকল লিস্ট প্রোপার্টি

প্রোপার্টিমানবর্ণনা
list-style-type
list-style-position
list-style-image
list-style