Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

CSS ro‘yxatlar

ULASHISH

CSS ro‘yxatlarni uslublash

HTMLda ro‘yxatlarning ikkita asosiy turi mavjud:

  • <ul> — tartibsiz ro‘yxatlar (ro‘yxat elementlari nuqtalar bilan belgilanadi)
  • <ol> — tartiblangan ro‘yxatlar (ro‘yxat elementlari raqamlar yoki harflar bilan belgilanadi)

CSS HTML ro‘yxatlarini ushlab kelish uchun quyidagi xossalarga ega:

CSS ro‘yxat elementlari markerlarini uslublash

CSS list-style-type xossasi ro‘yxatdagi belgi turini belgilaydi.

Quyidagi misol mavjud ro‘yxat belgilaridan ba’zilarini ko‘rsatadi:

Misol

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}
O‘zingiz sinab ko‘ring »

Eslatma: Ba’zi qiymatlar tartibsiz ro‘yxatlar uchun, ba’zilari tartibli ro‘yxatlar uchun.

CSS ro‘yxat belgisini rasm bilan almashtirish

CSS list-style-image xossasi ro‘yxat belgisini rasm bilan almashtirish uchun ishlatiladi.

Eslatma: Qo‘shimcha ravishda har doim list-style-type xossasini ham ko‘rsatib qo‘ying. Bu xossa rasm qandaydir sabab bilan mavjud bo‘lmasa ishlatiladi.

Misol

Ro‘yxat belgilarini rasm bilan almashtirish:

ul {
  list-style-image: url('sqpurple.gif');
  list-style-type: square;
}
O‘zingiz sinab ko‘ring »

CSS ro‘yxat belgilarining joylashuvini belgilash

CSS list-style-position xossasi ro‘yxat belgilarining (nuqtalar) joylashuvini belgilaydi.

list-style-position: outside; — nuqtalar ro‘yxat elementidan tashqarida bo‘lishini anglatadi. Ro‘yxat elementining har bir qatori boshlanishi vertikal tekislanadi. Bu standart:

  • Coffee
  • Tea
  • Coca-cola

list-style-position: inside; — nuqtalar ro‘yxat elementi ichida bo‘lishini anglatadi. Ro‘yxat elementi bir qismi bo‘lgani uchun, matn bir qismi bo‘ladi va matnni boshidan suradi:

  • Coffee
  • Tea
  • Coca-cola

Misol

Ro‘yxat belgilarining joylashuvini belgilash:

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
O‘zingiz sinab ko‘ring »

CSS ro‘yxat markerlarini olib tashlash

list-style-type:none; xossasi ro‘yxat belgilarini olib tashlash uchun ishlatiladi.

Eslatma: Ro‘yxatda standart margin va padding mavjud. Buni olib tashlash uchun <ul> yoki <ol> elementiga margin:0 va padding:0 qo‘shing:

Misol

Ro‘yxat belgilarini olib tashlash:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
O‘zingiz sinab ko‘ring »

CSS list-style qisqartma xossasi

list-style xossasi qisqartma xossadir. U barcha ro‘yxat xossalarini bitta deklaratsiyada belgilash uchun ishlatiladi.

Qisqartma xossasidan foydalanganda xossa qiymatlari tartibi quyidagicha:

Agar yuqoridagi xossa qiymatlaridan biri yetishmasa, yetishmayotgan xossaning standart qiymati kiritiladi.

Misol

list-style qisqartma xossasidan foydalanish:

ul {
  list-style: square inside url("sqpurple.gif");
}
O‘zingiz sinab ko‘ring »

CSS ro‘yxatni ranglar bilan uslublash

Ro‘yxatlarni qiziqarliroq ko‘rsatish uchun ularni ranglar, marginlar va paddinglar bilan ham ushlab kelishimiz mumkin.

<ol> yoki <ul> tegiga qo‘shilgan hamma narsa butun ro‘yxatga ta’sir qiladi, <li> tegiga qo‘shilgan xossalar esa alohida ro‘yxat elementlariga ta’sir qiladi:

Misol

Ro‘yxatlarni ranglar, marginlar va paddinglar bilan ushlab kelish:

ol {
  background: salmon;
  padding: 20px;
}

ol li {
  background: mistyrose;
  color: darkred;
  padding: 10px;
  margin-left: 20px;
}

ul {
  background: powderblue;
  padding: 20px;
}

ul li {
  background: mistyrose;
  color: darkblue;
  margin: 5px;
}

Natija:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola
O‘zingiz sinab ko‘ring »

Ko‘proq misollar

Qizil chap chegarali moslashtirilgan ro‘yxat
Ushbu misol qizil chap chegarali ro‘yxatni qanday yaratishni ko‘rsatadi.

Full-width bordered list
Ushbu misol markerlarsiz chegaralangan to‘liq kenglikdagi ro‘yxat yaratishni ko‘rsatadi.

Ro‘yxatlar uchun barcha turli ro‘yxat belgilari
Ushbu misol CSS’dagi barcha turli ro‘yxat elementi belgilarini ko‘rsatadi.

CSS List xossalari

Xususiyat Tavsif
list-style Bitta deklaratsiyada ro‘yxatning barcha xususiyatlarini o‘rnatadi
list-style-image Tasvirni ro‘yxat elementi belgisi sifatida belgilaydi
list-style-position Ro‘yxat elementi markerlarining (nuqtalarining) joylashuvini belgilaydi
list-style-type Ro‘yxat elementi markerining turini belgilaydi

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish