CSS ro'yxatlar

CSS ro'yxatlar


HTML ro'yxatlar va CSS ro'yxatlar propertilari

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:

O'zingni Sinab Ko'r
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:

O'zingni Sinab Ko'r
ul {
    list-style-image: url('sqpurple.gif');
}

Punkt markerlari joylashuvi

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

Namuna:

O'zingni Sinab Ko'r
ul {
    list-style-position: inside;
}

List - qisqartma propertisi

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

Namuna:

O'zingni Sinab Ko'r
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:

O'zingni Sinab Ko'r
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;
}

Natija:



Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017