17. Ro’yhatlar va havolalar haqida

Ro’yhatlar haqida: LIST-STYLE

CSS stillar bilan ishlash tilida ham HTML gippermatn tiliga o‘xshab ro‘yxatlar tushunchasi mavjud. Ro‘yxatlar uchun uncha ko‘p stil xususiyatlari ajratilmagan, shu sababli maqolamiz qisqa bo‘ladi, lekin kerakli xususiyatlar bilan tanishamiz. Ro‘yxatlarni, CSS xususiyatlarini ishlatmasdan HTML gippermatn tilida ham hosil qilishingiz mumkin, lekin CSSdagidek chiroyli chiqmaydi, shuning uchun maslahat, ikkala hilni ham ko‘rib chiqing va ma’qulidan foydalaning. Ro‘yxatlar uchun quyidagi stil xususiyatlarini ishlatamiz:

- list-style-type;

- list-style-position;

- list-style-image;

- list-style.

Bu xususiyatlar universal bo‘lib, tartiblangan va tartiblanmagan ro‘yxatlar uchun ishlatilaveriladi. Bular orqali tartibli va tartibsiz ro‘yxatlar hosil qilish mumkin, keling ular bilan tanishib chiqamiz.

List-style-type - ro‘yxatlar uchun markerlarni aniqlashtirish uchun ishlatiladi, markerlar

raqam, harf, kvadrat, dumaloq va boshqa ko‘rinishlarda bo‘lishi mumkin. Markerlarni aniqlashtirish uchun quyidagi qiymatlar ishlatiladi:

- disk - marker sifatida bo‘yalgan doira;

- circle - marker sifatida bo‘yalmagan aylana;

- square- marker sifatida bo‘yalgan kvadrat.

- decimal - marker sifatida oddiy arab raqamlar: 1, 2, 3, 4, 5...

- decimal-leading-zero - marker sifatida oddiy arab raqamlar "0" bilan: 01, 02, 03, 04, 05...

- upper-roman - marker sifatida katta rim raqamlari: I, II, III, IV,...

- lower-roman - marker sifatida kichik rim raqamlari: i, ii, iii, iv,...

- upper-alpha - marker sifatida katta ingliz harflari: A, B, C, D,...

- lower-alpha - marker sifatida kichik ingliz harflari: a, b, c, d,... none - ro‘yxatni markersiz qilish.

YUqoridagilarga misol ko‘ramiz,

< html>

< head>

< title>List< /title>

< style>

ol {

list-style-type: decimal-leading- zero;

}

< /style>

< /head>

< body>

< ol>

< li>Eric Contana< /li>

< li>Roy Kean< /li>

< li>Nemani Vidic< /li>

< li>Wayne Rooney< /li>

< /ol>

< /body>

< /html>

01. Eric Contana

02. Roy Kean

03. Nemam Vidic

04. Wayne Rooney

List-style-position - bu stil xususiyati markerni joylashishini aniqlashtiradi, 2 xil qiymat qabul qilishi mumkin:
- outside - markerni ro‘yxat bloki tashqarisiga joylashtirish;

- inside - markerni ro‘yxat bloki ichiga joylashtirish.

Bu stil eskirgan bo‘lib, yangi brauzerlarda ishlamasligi mumkin.

List-style-image - ro‘yxatning eng qiziq xususiyati bo‘lib, markerga o‘zingiz hohlagan rasmni qo‘yishingiz mumkin bo‘ladi. "url" kalit so‘zidan keyin, rasm adresini yozasiz.

< html>

< head>

< title>List< /title>

< style>

ol {

list-style-image: url(rasm.png);

}

< /style>

< /head>

< body>

< ol>

< li>Alex Fergusion< /li>

< li>David Moyes< /li>

< li>Lui Van Gal< /li>

< /ol>

< /body>

< /html>

 
List-style - yuqoridagi ro‘yxatga oid barcha xususiyatlarni birlashtiruvchi xususiyat.

  ul {

  list-style-type:square;

  list-style-position: inside;

  list-style-image: url(rasm.png);

  }

Shu 5 qatorli kodni, "list-style" orqali quyidagicha qisqartirish mumkin.

  ul {list-style:square inside url(rasm.png) }

 

Havolalar(ccbMKa) bilan ishlash: LINK, ACTIVE, HOVER, VISITED

Biror bir saytga kirsangiz, u yerdagi havola(ccbmKa)ga sichqonchani oborsanigiz, bu havola o‘z ko‘rinishini o‘zgartirishini ko‘rgan bo‘lsangiz kerak, ya’ni tegiga chizadi yoki havola rangi o‘zgaradi vahakazo. Bular aynan CSS orqali amalga oshiriladi, to‘g‘riroq aytadigan bo‘lsak, psevdoklasslar bu ishni amalga oshirib beradi. Maqolamiz aynan havolalarga - psevdoklasslarga bag‘ishlanadi.

Havolalar uchun quyidagi 4 ta psevdoklass ishlatiladi:

1. link - havolaning doimiy ko‘rinishi;

2. active - havolaning aktiv holatdagi(bosilayotgandagi) ko‘rinishi;

3. visited - havolaga kirilgandagi holati;

4. hover - sichqoncha havolaga olib borilgandagi ko‘rinishi. Psevdoklasslar quyidagicha ishlatiladi:

A: psevdoklass nomi{...stil...}

Keling biror misol ko‘ramiz.

< html>

< head>

< title>Havola< /title>

< style>

a:link{color:red;}

a:active{color:black;}

a:hover{color:blue;}

a:visited{color:yellow;}

< /style>

< /head>

< body>

< a href="#1">Doimiy havola qizil rangda< /a>< /br>

< a href="#2">Kirilgan havola sariqda< /a>< /br>

< a href="#3">sichqoncha oborilgandagi havola ko’k< /a>< /br>

< a href="#4">Aktiv havola qora< /a>< /br>

< /body>

< /html>

 

Natijada hamma stil xususiyatlarini ishlatib chiqardim, ya’ni rang barang bo‘lishi uchun

Ranglardan tashqari boshqa attributlarni ham qo‘llash mumkin:

  a:link { color: blue ;

  }

  a:visited { color:gray;

  }

  a:hover { color:red ;

  text-decoration:none;

  font-weight:bold;

  }

  a:active {

     color:green;

     text-decoration:none;

     text-transform:uppercase;

    }

Agar, havolaning barcha holatlari bir xil bo‘lishini hohlasangiz, quyidagicha yozishingiz mumkin.

   a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}

YUqoridagi holatni psevdoklassiz ham amalga oshirish mumkin.

   a {color:black; text-decoration:none;}

Xullas, havolalarning tashqi ko‘rinishi CSS orqali boshqarilar ekan

---