সিএসএস list-style-type প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| list-style-type | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা ও ব্যবহার
list-style-typeপ্রোপার্টির মাধ্যমে একটি লিস্টের লিস্ট আইটেম মার্কারের ধরণ নির্দিষ্ট করে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| dise | হ্যাঁ | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
list-style-type: value;
কিছু ভিন্ন প্রকৃতির লিস্ট স্টাইল নির্ধারণ করি:
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<p>আনঅর্ডাড লিস্টের উদাহরন:</p>
<ul class="a">
<li>কফি</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ul>
<ul class="b">
<li>কফি</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ul>
<p>অর্ডাড লিস্টের উদাহরন:</p>
<ol class="c">
<li>কফি</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="d">
<li>কফি</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.listStyleType="square"উদাহরণ
<!DOCTYPE html>
<html>
<head>
<p>list-item marker এর ধরন পরিবর্তনের জন্য "Try" বাটন ক্লিক করুন।</p>
<button onclick="myFunction()">Try</button>
<ul id="listStyle">
<li>ই-মেইল</li>
<li>টোবিয়াস</li>
<li>লিনাস</li>
</ul>
<script>
function myFunction() {
document.getElementById("listStyle").style.listStyleType = "square";
}
</script>
function myFunction() { document.getElementById("listStyle").style.listStylePosition = "inside";
}
</script>
</body>
</html>
ফলাফল
এই উদাহরণে সকল লিস্ট স্টাইল মার্কার প্রকাশ করা হলো:
উদাহরণঃ এর উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>
<ul class="a">
<li>Circle টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ul>
<ul class="b">
<li>Disc টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ul>
<ul class="c">
<li>Square টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ul>
<ol class="d">
<li>Armenian টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="e">
<li>Cjk-ideographic টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="f">
<li>Decimal টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="h">
<li>Georgian টাইপ</li>
<li>Tea</li>
<li>কোকা কোলা</li>
</ol>
<ol class="i">
<li>Hebrew টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="j">
<li>Hiragana টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="k">
<li>Hiragana-iroha টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="l">
<li>Katakana টাইপ</li>
<li>Tea</li>
<li>কোকা কোলা</li>
</ol>
<ol class="m">
<li>Katakana-iroha টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="n">
<li>Lower-alpha টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="o">
<li>Lower-greek টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="p">
<li>Lower-latin টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="q">
<li>Lower-roman টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="r">
<li>Upper-alpha টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="s">
<li>Upper-latin টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="t">
<li>Upper-roman টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="u">
<li>None টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
<ol class="v">
<li>inherit টাইপ</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ol>
</body>
</html>
ফলাফল
<ul> এবং <ol> এর ডিফল্ট বুলেট বাদ দিয়ে কিভাবে এইচটিএমএল এন্টিটি(•) বুলেট কালার যোগ করা হয় তা নিচের উদাহরণে দেয়া হলো:
উদাহরণঃ এর উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li:before {
content: "•"; /* দেখতে বুলেটের মত এরকম একটি কন্টেন্ট ব্যবহার করা হয়েছে */
padding-right: 8px;
color: blue;
}
</style>
</head>
<body>
<ul>
<li>কফি</li>
<li>চা</li>
<li>কোকা কোলা</li>
</ul>
</body>
</html>
ফলাফল
list-style-type প্রোপার্টির ভ্যালু-সমূহ
- disc - ডিফল্ট ভ্যালু।এই মার্কারটি ভরাট বৃত্ত হয়।
- armenian - এই মার্কারটি ঐতিহাসিক আর্মেনিয় সংখ্যায় হয়।
- circle - এই মার্কারটি বৃত্তাকার হয়।
- cjk-ideographic - এই মার্কারটি একটি প্লেইন চিত্রলিপি সংখ্যায় হয়।
- decimal - এই মার্কারটি সংখ্যায় হয়।
- decimal-leading-zero - এই মার্কারটি সংখ্যায় হয় এবং লিডিং নাম্বারটি হয় শুন্য(০)। (01, 02, 03, ইত্যাদি)
- georgian - এই মার্কারটি ঐতিহাসিক জর্জিয়ান সংখ্যায় হয়।
- hebrew - এই মার্কারটি ঐতিহাসিক হিব্রু সংখ্যায় হয়।
- hiragana - এই মার্কারটি ঐতিহাসিক হিরাগানা সংখ্যায় হয়।
- hiragana-iroha - এই মার্কারটি ঐতিহাসিক হিরাগানা ইরোহা সংখ্যায় হয়।
- katakana - এই মার্কারটি ঐতিহাসিক কাটাকানা সংখ্যায় হয়।
- katakana-iroha -এই মার্কারটি ঐতিহাসিক কাটাকানা ইরোহা সংখ্যায় হয়।
- lower-alpha - এই মার্কারটি ছোট হাতের ইংরেজি অক্ষরে হয়(a, b, c, d, e ইত্যাদি)।
- lower-greek - এই মার্কারটি ছোট হাতের গ্রীক বর্ণে হয়।
- lower-latin - এই মার্কারটি ছোট হাতের ল্যাটিন বর্ণে হয়(a, b, c, d, e ইত্যাদি)।
- lower-roman - এই মার্কারটি ছোট হাতের রোমান বর্ণে হয়(i, ii, iii, iv, v ইত্যাদি)।
- none - কোন মার্কারই প্রদর্শন হয় না।
- square - এই মার্কারটি বর্গাকার আকৃতির হয়।
- upper-alpha - এই মার্কারটি বড় হাতের ইংরেজি বর্ণ হয়(A, B, C, D, E ইত্যাদি)।
- upper-latin - এই মার্কারটি বড় হাতের ল্যাটিন বর্ণ হয়(A, B, C, D, E ইত্যাদি)।
- upper-roman - এই মার্কারটি বড় হাতের রোমান সংখ্যা হয়(I, II, III, IV, V ইত্যাদি)।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
list-style-type প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।