list-style-type
Misol
Bir nechta turli ro‘yxat uslublarini o‘rnating:
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;}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
list-style-type ro‘yxatdagi ro‘yxat elementi markerining turini belgilaydi.
| Standart qiymat: | disc |
|---|---|
| Meros qilinadi: | ha |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS1 |
| JavaScript sintaksisi: | object.style.listStyleType="square" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| list-style-type | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Eslatma: Edge 18, Opera 12 va ulardan oldingi versiyalar quyidagi qiymatlarni qo‘llab-quvvatlamaydi: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana va katakana-iroha.
CSS sintaksisi
list-style-type: value;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| disc | Standart qiymat. Marker — to‘ldirilgan doira | Demo ❯ |
| armenian | Marker — an’anaviy arman raqamlash tizimi | Demo ❯ |
| circle | Marker — doira | Demo ❯ |
| cjk-ideographic | Marker — oddiy ieroglif raqamlar | Demo ❯ |
| decimal | Marker — son | Demo ❯ |
| decimal-leading-zero | Marker — boshida nollar bo‘lgan son (01, 02, 03 va h.k.) | Demo ❯ |
| georgian | Marker — an’anaviy gruzin raqamlash tizimi | Demo ❯ |
| hebrew | Marker — an’anaviy ibroniy raqamlash tizimi | Demo ❯ |
| hiragana | Marker — an’anaviy hiragana raqamlash tizimi | Demo ❯ |
| hiragana-iroha | Marker — an’anaviy hiragana iroha raqamlash tizimi | Demo ❯ |
| katakana | Marker — an’anaviy katakana raqamlash tizimi | Demo ❯ |
| katakana-iroha | Marker — an’anaviy katakana iroha raqamlash tizimi | Demo ❯ |
| lower-alpha | Marker — kichik alifbo harflari (a, b, c, d, e va h.k.) | Demo ❯ |
| lower-greek | Marker — kichik yunon harflari | Demo ❯ |
| lower-latin | Marker — kichik lotin harflari (a, b, c, d, e va h.k.) | Demo ❯ |
| lower-roman | Marker — kichik rim raqamlari (i, ii, iii, iv, v va h.k.) | Demo ❯ |
| none | Marker ko‘rsatilmaydi | Demo ❯ |
| square | Marker — kvadrat | Demo ❯ |
| upper-alpha | Marker — katta alifbo harflari (A, B, C, D, E va h.k.) | Demo ❯ |
| upper-greek | Marker — katta yunon harflari | Demo ❯ |
| upper-latin | Marker — katta lotin harflari (A, B, C, D, E va h.k.) | Demo ❯ |
| upper-roman | Marker — katta rim raqamlari (I, II, III, IV, V va h.k.) | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Bu misol barcha turli ro‘yxat elementi markerlarini namoyish etadi:
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-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}
O‘zingiz sinab ko‘ring »
Misol
<ul> yoki <ol> ning standart marker belgilarini olib tashlab, ularga o‘xshash HTML belgisini (•) qo‘shish orqali marker belgilariga rang berish:
ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS ro‘yxatlar
CSS ma’lumotnomasi: list-style xususiyati
HTML DOM ma’lumotnomasi: listStyleType xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!