CSS তালিকা
- পূর্ববর্তী পৃষ্ঠা CSS লিঙ্ক
- পরবর্তী পৃষ্ঠা CSS ট্যাবল
অবিন্যাসবদ্ধ তালিকা:
- কফি
- চা
- Coca Cola
- কফি
- চা
- Coca Cola
ক্রমিক তালিকা:
- কফি
- চা
- Coca Cola
- কফি
- চা
- Coca Cola
HTML তালিকা এবং CSS তালিকা প্রতিশব্দ
HTML এ, তালিকার দুইটি মূল ধরন রয়েছে:
- অবিন্যাসবদ্ধ তালিকা (ul) - তালিকার আইটেমগুলি তালিকাবদ্ধ ট্যাগ দিয়ে সূচিত হয়
- ক্রমিক তালিকা (ol) - তালিকার আইটেমগুলি সংখ্যা বা অক্ষর ট্যাগ দিয়ে সূচিত হয়
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('sqpurple.gif');
}
তালিকার আইটেম ট্যাগ (তালিকাবদ্ধ) এর স্থান নির্ধারণ
list-style-position এই প্রতিশব্দ তালিকার আইটেম ট্যাগ (তালিকাবদ্ধ) এর স্থান নির্ধারণ করে
"list-style-position: outside;" ইঙ্গিত করে যে তালিকার আইটেম স্ক্রোল বাইরে থাকবে।তালিকার প্রত্যেক সারিতের প্রথম কলাটি সমানভাবে উঁচু থাকবে।এটা ডিফল্ট:
- Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
- চা
- Coca-cola
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本：
- Coffee - 用烘焙过的咖啡豆制成的冲泡饮料
- চা
- Coca-cola
উদাহরণ
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
删除默认设置
list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在
- 或
- 中添加
margin:0 和 padding:0 ：
উদাহরণ
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
列表 - 简写属性
list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：
উদাহরণ
ul {
list-style: square inside url("sqpurple.gif");
}
在使用简写属性时，属性值的顺序为：
list-style-type（যদি list-style-image সংজ্ঞায়িত হয়, তবে ছবি দেখা যায় না হলে, এই অ্যাট্রিবিউটের মান দেখানো হবে）list-style-position（তালিকা আইটেম ট্যাগটি কনটেন্ট স্ট্রিমের ভিতর বা বাইরে দেখানো হবে কিনা তা নির্ধারণ করুন）list-style-image（ছবিটিকে তালিকা আইটেম ট্যাগ হিসাবে সংজ্ঞায়িত করুন）
যদি উপরোক্ত একটি অ্যাট্রিবিউটের মান অনুপস্থিত থাকে, তবে একটি ডিফল্ট মান যোগ করা হবে (যদি থাকে)。
তালিকার রঙ স্টাইল সেটিং সমূহ
আমরা আরও রঙ সেটিং ব্যবহার করতে পারি, যাতে তালিকা আরও আকর্ষণীয় হয়。
কোনও <ol> বা <ul> ট্যাগে যে কোনও স্টাইল যোগ করা হলে, তা সমগ্র তালিকা প্রভাবিত করবে, এবং <li> ট্যাগে যোগ করা হওয়া অভিযোগগুলি প্রত্যেক তালিকা আইটেমকে প্রভাবিত করবে:
উদাহরণ
ol {
ব্যবহারকৃত পটভূমি: #ff9999;
প্যাডিং: 20পিক্সেল;
}
ul {
ব্যবহারকৃত পটভূমি: #3399ff;
প্যাডিং: 20পিক্সেল;
}
ol li {
ব্যবহারকৃত পটভূমি: #ffe5e5;
প্যাডিং: 5পিক্সেল;
মার্গিন-বাম: 35পিক্সেল;
}
ul li {
ব্যবহারকৃত পটভূমি: #cce5ff;
মার্গিন: 5পিক্সেল;
}
ফলাফল:
- কফি
- চা
- Coca Cola
- কফি
- চা
- Coca Cola
আরও উদাহরণ
- লাল বাঁদিকের ফাঁকার অনন্য তালিকা
- এই উদাহরণটি লাল বাঁদিকের ফাঁকার তালিকা তৈরি করতে কিভাবে দেখায়。
- পূর্ণ সম্প্রসারিত পড়াশোনা সীমানা তালিকা
- এই ইনস্ট্যান্সটিতে প্রজেক্টিল নেই এবং সীমান্ত সহ তালিকা তৈরি করার পদ্ধতি দেখানো হয়
- সমস্ত তালিকার ভিন্ন আইটেম টাইপ
- এই ইনস্ট্যান্সটিতে CSS-এর সমস্ত ভিন্ন তালিকা আইটেম টাইপ দেখানো হয়
সমস্ত CSS তালিকা এট্রিবিউট
| এট্রিবিউট | বর্ণনা |
|---|---|
| list-style | সংক্ষিপ্ত এট্রিবিউট |
| list-style-image | তালিকার আইটেম টাইপ হিসাবে ইমেজ নির্দিষ্ট করে |
| list-style-position | তালিকার আইটেম (প্রজেক্টিল) স্থান নির্দিষ্ট করে |
| list-style-type | তালিকার আইটেম টাইপ নির্দিষ্ট করে |
- পূর্ববর্তী পৃষ্ঠা CSS লিঙ্ক
- পরবর্তী পৃষ্ঠা CSS ট্যাবল
