CSS Ro'yxatlar

CSS Ro'yxatlar

Tartibsiz ro'yxatlar:

• Apple
• Google
• Netflix
• Amazon
• Facebook

Tartiblangan ro'yxatlar:

1. Facebook
2. Apple
3. Amazon
4. Netflix
5. Google

HTML Ro'yxatlar va CSS Ro'yxat Xususiyatlari

HTMLda ikkita asosiy turdagi ro'yxatlar mavjud:

• Tartibsiz ro'yxatlar (<ul>) - elementlar nuqtalar (bullets) bilan belgilanadi
• Tartiblangan ro'yxatlar (<ol>) - elementlar raqamlar yoki harflar bilan belgilanadi

CSS ro'yxat xususiyatlari quyidagilarni amalga oshiradi:

• Tartiblangan ro'yxatlar uchun turli element belgilari o'rnatish
• Tartibsiz ro'yxatlar uchun turli element belgilari o'rnatish
• Rasmni element belgisi sifatida o'rnatish
• Ro'yxatlar va ro'yxat elementlariga fon ranglarini qo'shish

Turli Element Belgilari

list-style-type xususiyati ro'yxat elementi belgisi turini belgilaydi.

Quyidagi misol mavjud bo'lgan turli belgilarning namunasini ko'rsatadi:

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;
}

Eslatma: Ba'zi qiymatlar tartibsiz ro'yxatlar uchun, ba'zilari esa Tartiblangan ro'yxatlar uchun mo'ljallangan.

Rasmdan Element Belgisi Sifatida Foydalanish

list-style-image xususiyati rasmdan ro'yxat elementi belgisi sifatida foydalanishni belgilaydi:

ul {
  list-style-image: url('sqpurple.gif');
}

Ro'yxat Belgilarining Joylashuvi

list-style-position xususiyati ro'yxat element belgilari (nuqtalar)ning joylashuvini belgilaydi.

• list-style-position: outside; - belgilar ro'yxat elementi tashqarisida bo'ladi. Har bir qator vertikal tarzda tekislanadi. Bu standartdir:

  • Kofe - Qovurilgan qahva donalaridan tayyorlangan ichimlik...
  • Choy
  • Kola

• list-style-position: inside; - belgilar ro'yxat elementi ichida bo'ladi. Bu element qismidir va matn boshiga suriladi:

  • Kofe - Qovurilgan qahva donalaridan tayyorlangan ichimlik...
  • Choy
  • Kola

Misol:

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

Standart Sozlamalarni O'chirish

list-style-type: none xususiyati yordamida belgilari/nuqtalar o'chirilishi mumkin. E'tibor bering, ro'yxat shuningdek, standart margin va paddingga ega. Buni o'chirish uchun <ul> yoki <ol> ga margin: 0 va padding: 0 qo'shing:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Ro'yxat - Qisqartirilgan Xususiyat

list-style qisqartirilgan xususiyat hisoblanadi. Bu barcha ro'yxat xususiyatlarini bitta bayonotda belgilash uchun ishlatiladi:

ul {
  list-style: square inside url('sqpurple.gif');
}

Qisqartirilgan xususiyatdan foydalanganda, qiymatlarning ketma-ketligi quyidagicha bo'ladi:

1. list-style-type (agar list-style-image ko'rsatilgan bo'lsa, bu xususiyat qiymati tasvir ko'rsatilmaganida ko'rsatiladi)
2. list-style-position (belgilar tarkib oqimining ichida yoki tashqarisida ko'rinishi kerakligini belgilaydi)
3. list-style-image (rasmdan ro'yxat elementi belgisi sifatida foydalanishni belgilaydi)

Agar yuqoridagi qiymatlarning biri yo'q bo'lsa, yo'q qiymat uchun standart qiymat qo'shiladi.

Ranglar bilan Ro'yxatlarni Stilash

Ro'yxatlar ranglar bilan ham stilanadi, bu ularni biroz qiziqarliroq ko'rinishga keltiradi.

<ol> yoki <ul> tegi bilan qo'shilgan xususiyatlar butun ro'yxatga ta'sir qiladi, <li> tegi bilan qo'shilgan xususiyatlar esa har bir ro'yxat elementiga ta'sir qiladi:

ol {
  background: #ff9999;
  padding: 20px;
}
 
ul {
  background: #3399ff;
  padding: 20px;
}
 
ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}
 
ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}

Natija:

• Kofe
• Choy
• Kola
• Kofe
• Choy
• Kola

Qo'shimcha Misollar

Qizil Chap Chegara Bilan Ro'yxat

Ushbu misol qizil chap chegara bilan ro'yxat yaratishni ko'rsatadi.

To'liq Kenglikdagi Chegarali Ro'yxat

Ushbu misol belgilarisiz to'liq kenglikdagi chegarali ro'yxat yaratishni ko'rsatadi.

CSS-dagi Barcha Turli Ro'yxat Belgilari

Ushbu misol CSSda mavjud bo'lgan barcha turli ro'yxat belgilarini ko'rsatadi.

Mashq Qiling

Mashq:

Tartibsiz ro'yxatlar uchun "square" ro'yxat stilini o'rnating.

<style>
  ul {
    list-style-type: square;
  }
</style>
 
<body>
  <ul>
    <li>Kofe</li>
    <li>Choy</li>
    <li>Kola</li>
  </ul>
</body>

Barcha CSS Ro'yxat Xususiyatlari