CSS ro'yhatlar bilan ishlash

HTML da ro'yxatlarning ikkita asosiy turi bor

tartibsiz ro'yxat (<ul>) - ro'yxat puktlari nuqtalar bilan belgilanadi
tartibli ro'yxat (<ol>) - ro'yxat punktlari sonlar yoki harflar bilan belgilanadi
CSS ro'yxat propertilari quyidagi imkoniyatlarni beradi:

• Tartibli ro'yxat uchun markerni o'zgartirish
• 
  Tartibsiz ro'yxat uchun markerni o'zgartirish
• 
  Marker sifatida rasmdan foydalanish
• 
  Ro'yxatlar va ro'yxatlar punktlariga fon ranglarini berish
• 
  Ro'yxat punktlari markerlari
• 
  list-style-type propertisi punk markeri turini belgilaydi

Quyidagi misolda bir nechta punkt markerlari ko'rsatilgan:

Namuna:

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

Ba'zi qiymatlar tartibli, ba'zilari tartibsiz ro'yxatlar uchun ishlatiladi.

Marker sifatida rasmdan foydalanish.

list-style-image propertisi rasmni punkt markeri sifatida belgilaydi:

Namuna:

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

Punkt markerlari joylashuvi
list-style-position propertisi markerning kontent ichida yoki tawqarisida joylashshini belgilaydi:

Namuna:

ul {
    list-style-position: inside;
}

List - qisqartma propertisi
list-style propertisi qisqartma propertis hisoblanadi. U ro'xatning barcha propertilarini belgilash uchun ishlatiladi:

Namuna:

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

qisqartma properti ishlatilganda propertilar qiymatlari quyidagi ketma ketlikda beriladi:

Yuqoridagi propertilarning qiymatlari kiritilmagan bo'lsa default qiymati ishlatiladi.

Ro'yxatlarga rang berish
Ro'yxatlar chiroyliroq ko'rinishi uchun ularga rang berishimiz mumkin.

<ol> yoki <ul> teglariga qo'shilgan o'zgartirishlar butun ro'yxatga tasir qiladi, <li> tegiga qoshilgan o'zgartirishlar faqat ro'yxat punktlariga ta'sir qiladi:

Namuna:

ol {
    background: #ff9999;
    padding: 20px;
}

ul {
    background: #3399ff;
    padding: 20px;
}

ol li {
    background: #ffe5e5;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: #cce5ff;
    margin: 5px;
}