CSS3 da ro'yxatlar, CSS3 da giper murojaatlarni qo'llash, ochiluvchi ro'yxat menyu, turli xil o'lchamli tugmalar yaratish

CSS3 da ro'yxatlar CSS3 da giper murojaatlarni qo'llash ochiluvchi ro'yxat menyu turli xil o'lchamli tugmalar yaratish Rеja: 1. CSS da ro'yxatlar haqida umumiy ma'lumot. 2. - list-style-type; list-style-position; list-style-image; list-style- ro'yxat stillari. 3. Sahifadagi ro'yxatdan tanlash va ochiluvchi ro'yxatga misollar 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, II, IV, lower-roman- marker sifatida kichik rim raqamlari: i, ii, ii, 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, List ol list-style-type: decimal-leading-zero; Eric Contana Roy Kean Nemani Vidic 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 xohlagan rasmni qo'yishingiz mumkin bo'ladi. url kalit so'zidan keyin, rasm adresini yozasiz. 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) Sahifadagi ro'yxatdan tanlash. Select - elementi yordamida ro'yxatdan biror bo'limni tanlash imkoniyatini yaratadi. Odatda bu element yordamida ochiluvchi menyular tuziladi. Select tegi quyidagi parametrlarga ega: option - parametr yordamida menyuning bo'limlari hosil qilinadi. name - parametr yordamida elementning nomi beriladi. size - atributi esa ekranda hosil qilinadigan ...