তালিকা সম্পর্কিত CSS বৈশিষ্ট্যগুলি

Articles

এই প্রবন্ধটি তালিকা সম্পর্কিত CSS বৈশিষ্ট্যগুলিকে ব্যাখ্যা করে।

আপনি শিখতে পারবেন কীভাবে list-style প্রপার্টি এবং counter() ফাংশন ব্যবহার করবেন এবং লিখবেন।

YouTube Video

প্রিভিউর জন্য HTML

css-list.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

তালিকা সম্পর্কিত

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

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

list-style প্রপার্টিটি একটি CSS প্রপার্টি, যা তালিকার মার্কার (বুলেট) অথবা নম্বরগুলি <ul> এবং <ol> এর মতো HTML তালিকা উপাদানের জন্য নির্দিষ্ট স্টাইলের জন্য ব্যবহৃত হয়। এই প্রপার্টিটি আপনাকে তালিকার সামগ্রিক স্টাইল নিয়ন্ত্রণ করতে দেয়, যা তালিকার চেহারা কাস্টমাইজ করার জন্য উপযোগী করে তোলে।

এই উদাহরণে, নিম্নলিখিত স্টাইলগুলি প্রয়োগ করা হয়েছে।

ul: ফাঁকা বৃত্তের বুলেটগুলি ভিতরে প্রদর্শিত হয়।
ol: সংখ্যা রোমান অক্ষরে লেখা এবং সংখ্যা বাইরের দিকে প্রদর্শিত হয়।
custom-list ক্লাস: নির্দিষ্ট চিত্রটি বুলেট হিসাবে প্রদর্শিত হয়।

`list-style` গঠন

list-style নিম্নলিখিত তিনটি প্রপার্টির জন্য সংক্ষেপ:

list-style-type: তালিকার আইটেমের জন্য মার্কারের প্রকার (বুলেট বা নম্বর) নির্দিষ্ট করে।
list-style-position: মার্কারটি তালিকার আইটেমের ভিতরে (inside) অথবা বাইরে (outside) স্থাপিত হবে কিনা তা নির্দিষ্ট করে।
list-style-image: তালিকার মার্কার হিসাবে ব্যবহারের জন্য একটি চিত্র নির্দিষ্ট করে।

প্রাথমিক ব্যবহার

1ul {
2    list-style: square inside url('path/to/image.png');
3}

এই কোডটি নিম্নলিখিতভাবে কাজ করে:

list-style-type: square: মার্কারের প্রকার চারকোণা আকৃতিতে নির্ধারণ করে।
list-style-position: inside: মার্কারটি তালিকার আইটেমের ভেতরে প্রদর্শিত হয়।
list-style-image: url('path/to/image.png'): মার্কার হিসাবে একটি চিত্র ব্যবহার করে।

প্রত্যেক প্রপার্টির ব্যাখ্যা

`list-style-type`

list-style-type তালিকার জন্য চিহ্নের প্রকার নির্ধারণ করে। যে স্টাইলগুলো ব্যবহার করা যায় তা তালিকার প্রকারের উপর নির্ভর করে।

মানের উদাহরণ

 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}

none: কোনো চিহ্ন প্রদর্শিত হয় না।
disc (ডিফল্ট): একটি ছোট কালো বৃত্ত।
circle: একটি ছোট ফাঁকা বৃত্ত (রিং)।
square: একটি ছোট বর্গাকৃতি।
decimal: সংখ্যা সহ একটি তালিকা যেমন ১, ২, ৩, ...।
lower-alpha: ছোট হাতের বর্ণমালা যেমন a, b, c, ...।
upper-alpha: বড় হাতের বর্ণমালা যেমন A, B, C, ...।
lower-roman: ছোট হাতের রোমান সংখ্যা যেমন i, ii, iii, ...।
upper-roman: বড় হাতের রোমান সংখ্যা যেমন I, II, III, ...।

`list-style-position`

1ul {
2    list-style-position: inside;
3}

list-style-position প্রপার্টি নির্দিষ্ট করে যে চিহ্ন (বুলেট) তালিকার আইটেমের বাইরে নাকি ভিতরে স্থাপন করা হবে। list-style-position নিম্নলিখিত মানগুলো থাকতে পারে:।

outside: চিহ্নগুলো তালিকার আইটেমের বাইরে স্থাপন করা হয় এবং আইটেমটি চিহ্নের পর শুরু হয়। এটি ডিফল্ট মান।
inside: চিহ্নগুলো তালিকার আইটেমের ভেতরে স্থাপন করা হয় এবং পাঠ্যের অংশ হিসেবে প্রদর্শিত হয়।

`list-style-image`

1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image প্রপার্টি সেট করা হয় যখন একটি ছবি তালিকার চিহ্ন হিসেবে ব্যবহার করা হয়। ছবিটি url() ব্যবহার করে নির্ধারণ করা হয়, এবং যদি ছবিটি লোড না হয়, তবে list-style-type দ্বারা নির্ধারিত চিহ্নটি প্রদর্শিত হয়।

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

1ul {
2    list-style: square inside url('bullet.png');
3}

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

সারসংক্ষেপ

list-style একটি শর্টহ্যান্ড প্রপার্টি যেটি আপনাকে তালিকার চেহারা (চিহ্ন টাইপ, অবস্থান, কাস্টম ছবি) একসাথে নির্দিষ্ট করতে দেয়।
আপনি পৃথকভাবে list-style-type, list-style-position, এবং list-style-image সেট করতে পারেন।
আপনি লেআউট এবং ডিজাইন অনুযায়ী তালিকার মার্কারগুলি নমনীয়ভাবে কাস্টমাইজ করতে পারেন।

CSS কাউন্টার (`counter()`)

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

আপনি CSS কাউন্টার ব্যবহার করে তালিকার আইটেম বা নির্দিষ্ট উপাদানগুলিকে স্বয়ংক্রিয়ভাবে নম্বর প্রদান করতে পারেন।

কাউন্টার তৈরি এবং অ্যাকটিভ করা

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

আপনি counter-reset প্রপার্টি ব্যবহার করে একটি কাউন্টার তৈরি ও রিসেট করতে পারেন।

কাউন্টার বৃদ্ধি করা

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

আপনি counter-increment প্রপার্টি ব্যবহার করে কাউন্টার বাড়াতে পারেন এবং counter ফাংশনের মাধ্যমে কাউন্টারের মান প্রদর্শন করতে পারেন।

`counters()`

CSS-এ counters ফাংশন তালিকার আইটেম গুলো নম্বর বা প্যারাগ্রাফ সাজানোর মতো কাস্টম কাউন্টার ব্যবস্থাপনার জন্য খুবই কার্যকর। এই ফাংশন একটি স্ট্রিং ব্যবহার করে একাধিক কাউন্টারের মান যোগ করতে পারে এবং CSS কনটেন্টে তা প্রদর্শন করতে পারে। এখানে, আমরা counters ফাংশনের মৌলিক ব্যবহার থেকে কার্যকর প্রয়োগ উদাহরণগুলির বিস্তারিত ব্যাখ্যা করব।

`counter` এবং `counters` এর মধ্যে পার্থক্য

counter এবং counters উভয় ফাংশন কাউন্টার মান প্রদর্শনের জন্য ব্যবহৃত হয়, তবে তাদের মধ্যে নিম্নলিখিত পার্থক্য রয়েছে।

counter: একটি একক কাউন্টারের মান পুনরুদ্ধার করে।
counters: নির্দিষ্ট সেপারেটর সহ একাধিক কাউন্টারের মান একত্রিত করে এবং সেগুলি প্রদর্শন করে।

উদাহরণস্বরূপ, যদি আপনি নেস্টেড তালিকা আইটেমের সাথে কাউন্টার ব্যবহার করতে চান, তবে আপনি প্যারেন্ট এবং চাইল্ড কাউন্টার একত্রিত করে প্রদর্শনের জন্য counters ফাংশন ব্যবহার করতে পারেন।

`counters` ফাংশনের সিনট্যাক্স

counters(<counter-name>, <string>);

counters ফাংশন নিম্নলিখিত সিনট্যাক্স সহ ব্যবহৃত হয়।

<counter-name>: ব্যবহৃত কাউন্টারের নাম নির্ধারণ করে।
<string>: প্রতিটি কাউন্টারের মধ্যে স্থাপন করার জন্য স্ট্রিং নির্ধারণ করে (সাধারণত সেপারেটর যেমন . বা -)।

`counters` ফাংশন ব্যবহারের উদাহরণ

পরবর্তী, চলুন counters ফাংশন ব্যবহার করার একটি উদাহরণ দেখি।

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}

এই উদাহরণে, একটি দ্বি-স্তরের নেস্টেড তালিকার জন্য প্যারেন্ট এবং চাইল্ড কাউন্টারের মান একত্রিত করা হয়েছে।
- list-counter কাউন্টারটি সংজ্ঞায়িত করা হচ্ছে।
- counters ফাংশনটি প্যারেন্ট লিস্ট কাউন্টার এবং চাইল্ড লিস্ট কাউন্টার একত্রিত ও প্রদর্শন করার জন্য ব্যবহৃত হয়।

মাল্টি-লেভেল কাউন্টার ব্যবহার করে উন্নত উদাহরণ

counters ফাংশন ব্যবহার করে আপনি কাস্টম নাম্বারিং বা অনুচ্ছেদ নাম্বারিং এর মতো মাল্টি-লেভেল কাউন্টারগুলি নমনীয়ভাবে পরিচালনা করতে পারেন। উদাহরণস্বরূপ, এটি অধ্যায় এবং বিভাগ সহ ডকুমেন্ট তৈরি করার সময় উপকারী।

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

এই কোডে, অধ্যায় (h1), বিভাগ (h2), এবং উপ-বিভাগ (h3) এর জন্য কাউন্টারগুলি প্রতিটিতে রিসেট করা হয়, এবং প্রতিটি স্তর একত্রিত করতে counters ফাংশন ব্যবহার করা হয়।

সারসংক্ষেপ

counters ফাংশনটি অত্যন্ত উপকারী যখন আপনি একাধিক কাউন্টারকে স্তরক্রমিকভাবে কাস্টমাইজ এবং প্রদর্শন করতে চান। CSS কাউন্টার ব্যবহার করে আপনি তালিকা এবং শিরোনামের নাম্বারিং স্বাধীনভাবে কাস্টমাইজ করতে পারেন, যা ওয়েব পেজগুলিকে উন্নত তথ্যগত গঠন দেয়।

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

YouTube Video

বক্স মডেল সজ্জার সাথে সম্পর্কিত CSS প্রোপার্টিগুলি টেবিল সম্পর্কিত CSS প্রপার্টিজ

তালিকা সম্পর্কিত CSS বৈশিষ্ট্যগুলি

YouTube Video

প্রিভিউর জন্য HTML

তালিকা সম্পর্কিত

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

list-style গঠন

প্রাথমিক ব্যবহার

প্রত্যেক প্রপার্টির ব্যাখ্যা

list-style-type

মানের উদাহরণ

list-style-position

list-style-image

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

সারসংক্ষেপ

CSS কাউন্টার (counter())

কাউন্টার তৈরি এবং অ্যাকটিভ করা

কাউন্টার বৃদ্ধি করা

counters()

counter এবং counters এর মধ্যে পার্থক্য

counters ফাংশনের সিনট্যাক্স

counters ফাংশন ব্যবহারের উদাহরণ

মাল্টি-লেভেল কাউন্টার ব্যবহার করে উন্নত উদাহরণ

সারসংক্ষেপ

YouTube Video

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

`list-style` গঠন

`list-style-type`

`list-style-position`

`list-style-image`

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

CSS কাউন্টার (`counter()`)

`counters()`

`counter` এবং `counters` এর মধ্যে পার্থক্য

`counters` ফাংশনের সিনট্যাক্স

`counters` ফাংশন ব্যবহারের উদাহরণ