HTML-এ, দুই ধরনের প্রধান লিস্ট আছে:
CSS লিস্ট প্রপার্টি আপনাকে যা করতে দেয়:
list-style-type প্রপার্টি লিস্ট আইটেম মার্কারের ধরন নির্ধারণ করে।
নিচের উদাহরণে কিছু উপলব্ধ লিস্ট আইটেম মার্কার দেখানো হয়েছে:
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;
}মনে রাখবেন: কিছু মান আনঅর্ডার্ড লিস্টের জন্য, এবং কিছু অর্ডার্ড লিস্টের জন্য।
list-style-image প্রপার্টি লিস্ট আইটেম মার্কার হিসেবে একটি ইমেজ নির্ধারণ করে:
ul {
list-style-image: url('cat.png');
}list-style-position প্রপার্টি লিস্ট-আইটেম মার্কারের (বুলেট পয়েন্ট)
অবস্থান নির্ধারণ করে।
"list-style-position: outside;" মানে বুলেট পয়েন্ট লিস্ট আইটেমের বাইরে থাকবে। একটি লিস্ট আইটেমের প্রতিটি লাইনের শুরু উল্লম্বভাবে সারিবদ্ধ থাকবে। এটি ডিফল্ট:
"list-style-position: inside;" মানে বুলেট পয়েন্ট লিস্ট আইটেমের ভেতরে থাকবে। এটি লিস্ট আইটেমের অংশ হওয়ায়, এটি টেক্সটের অংশ হয়ে যাবে এবং শুরুতে টেক্সট ঠেলে দেবে:
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}মার্কার/বুলেট সরাতে list-style-type:none প্রপার্টিও ব্যবহার করা যায়। মনে রাখবেন, লিস্টেরও ডিফল্ট margin এবং padding থাকে। এটি সরাতে, <ul> বা <ol>-এ margin:0 এবং padding:0 যোগ করুন:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}ডিফল্ট লিস্ট:
বুলেট, margin এবং padding সরান:
list-style প্রপার্টি একটি শর্টহ্যান্ড প্রপার্টি। এটি এক ঘোষণায় সব লিস্ট প্রপার্টি সেট করতে ব্যবহার করা হয়:
ul {
list-style: square inside url('cat.png');
}শর্টহ্যান্ড প্রপার্টি ব্যবহার করার সময়, প্রপার্টি মানগুলোর ক্রম হলো:
list-style-type (একটি list-style-image নির্ধারিত থাকলে, ইমেজটি কোনো কারণে প্রদর্শন না হলে এই প্রপার্টির মান প্রদর্শিত হবে)list-style-position (নির্ধারণ করে লিস্ট-আইটেম মার্কার কনটেন্ট প্রবাহের ভেতরে নাকি বাইরে প্রদর্শিত হবে)list-style-image (লিস্ট আইটেম মার্কার হিসেবে একটি ইমেজ নির্ধারণ করে)উপরের প্রপার্টি মানগুলোর কোনো একটি না থাকলে, সেই মিসিং প্রপার্টির ডিফল্ট মান (যদি থাকে) বসানো হবে।
লিস্টকে একটু বেশি আকর্ষণীয় দেখাতে আমরা রঙ দিয়েও স্টাইল করতে পারি।
<ol> বা <ul> ট্যাগে যা কিছু যোগ করা হয়, তা পুরো লিস্টকে প্রভাবিত করে, অন্যদিকে <li> ট্যাগে যোগ করা প্রপার্টি আলাদা আলাদা লিস্ট আইটেমকে প্রভাবিত করে:
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;
}| প্রপার্টি | বিবরণ |
|---|---|
| list-style | এক ঘোষণায় একটি লিস্টের সব প্রপার্টি সেট করে |
| list-style-image | লিস্ট-আইটেম মার্কার হিসেবে একটি ইমেজ নির্ধারণ করে |
| list-style-position | লিস্ট-আইটেম মার্কারের (বুলেট পয়েন্ট) অবস্থান নির্ধারণ করে |
| list-style-type | লিস্ট-আইটেম মার্কারের ধরন নির্ধারণ করে |