CSS3 da katta o'zgarishlarni tushunish
CSS2 va CSS3 o'rtasidagi eng katta farq CSS3-ni modul deb ataladigan turli bo'limlarga bo'linadi. Ushbu modullarning har biri W3C orqali maslahat jarayonining turli bosqichlarida yo'l ochib beradi. Ushbu jarayon brauzerda turli xil ishlab chiqaruvchilar tomonidan CSS3-ning turli xil qismlarini qabul qilish va joriy etishni ancha osonlashtirdi.
Agar siz bu jarayonni CSS2 bilan sodir bo'lgan narsalarga solishtirib ko'rsangiz, unda hamma narsa bitta Kaskadli stil uslubi varaqasi bilan birlashtirilgan hujjat sifatida taqdim etilsa, taklifni kichikroq, alohida bo'laklarga singdirishning afzalliklarini ko'rib chiqasiz. Modullarning har biri alohida ravishda ishlayotganligi sababli, CSS3 modullari uchun brauzerlarni qo'llab-quvvatlashning ancha keng doirasi mavjud.
Har qanday yangi va o'zgaruvchan spetsifikatsiya kabi bo'lgani kabi, sizning CSS3-sahifalaringizni imkon qadar ko'p brauzer va operatsion tizimlarda sinab ko'rishingiz kerak. Esda tutingki, har bir brauzerda aynan bir xil ko'rinadigan veb-sahifalarni yaratish emas, balki siz foydalanadigan har qanday uslublar, jumladan, CSS3 uslubi, ularni qo'llab-quvvatlaydigan brauzerlarda ajoyib ko'rinadi va eski brauzerlar Qilma.
Yangi CSS3 Selectors
CSS3 CSS-qoidalarini yangi CSS tanlovchilar bilan bir qatorda yangi kombinator bilan bir qatorda yangi yangi yolg'onchi elementlarni ham yozishingiz mumkin.
Uchta yangi attributor tanlash:
- Atribut boshlanishi aniq elementga mos keladi [foo ^ = "bar"] Bu elementda "bar" bilan boshlangan foo deb nomlangan atribut mavjud.
- Xususiyat tugashi aniq elementga mos keladi [foo $ = "bar"] Elementda "bar" bilan tugaydigan foo deb atalgan xususiyat mavjud.
- Attribut matni elementni o'z ichiga oladi [foo * = "bar"]. Elementda "bar" satrini o'z ichiga olgan foo deb ataladigan xususiyat mavjud.
16 ta yangi pseudo-sinflar:
- : root
- Hujjatning ildiz elementi. HTMLda bu har doim.
- : nth-child (n)
- Buni aniq bola elementlariga mos keladigan yoki o'zgaruvchan ma`lumotlarni olish uchun foydalaning.
- : nth-last-child (n)
- Oxirgi elementdan hisoblaydigan aniq elementlarni toping.
- : n-tipidagi (n)
- Hujjat daraxti oldida bir xil nomdagi birodarlar bilan tanishing.
- : nth-so'nggi-turi (n)
- Xuddi shu ismga ega bo'lgan birodarlar bilan tanishib oling.
- : oxirgi bola
- Ota-onaning so'nggi bolmas elementini toping.
- : birinchi turdagi
- Bu turdagi birinchi qardosh xodimni toping.
- : oxirgi turdagi
- Bu turdagi so'nggi birodarlik elementini toping.
- :faqat bola
- Ota-onasining yagona bolasi bo'lgan elementni toping.
- : faqat turdagi
- Uning turidagi yagona elementni toping.
- bo'sh
- Bolalar bo'lmagan elementni (matnli tugunlarni ham qo'shib) moslang.
- : Maqsad
- Ko'rsatilgan URIning maqsadi bo'lgan elementni tanlang.
- : yoqilgan
- Ob'ektni yoqilganda uni moslang.
- : o'chirib qo'yildi
- Element o'chirilgan bo'lsa, uni moslang.
- : tekshirildi
- Element tekshirilganda uning eşleştiği (radio tugmasi yoki tasdiqlash qutisi).
- : emas (lar)
- Element oddiy tanlovchilarga mos kelmasa, moslik.
Yangi kombinator:
- elementA ~ elementB
- Element elementi elementarA dan so'ng biron joyda harakatlansa, darhol emas.
Yangi xususiyatlar
CSS3 shuningdek, CSS-ning bir qator yangi xususiyatlarini taqdim etdi. Ushbu xususiyatlarning ko'pchiligi, ehtimol fotoshop kabi grafik dastur bilan yanada ko'proq bog'lash uchun ingl. Uslublar yaratish edi. Ulardan ba'zilari chegara radiusi yoki quti-soya kabi CSS3-ga kirishdan beri atrofida bo'lgan. Boshqalar, masalan, flexbox yoki hatto CSS Grid - CSS3 qo'shimchalari deb hisoblanadigan yangi uslublardir.
CSS3 da, qutidagi model o'zgarmadi. Lekin qutilaringizning orqa qismlarini va chegaralarini tarbiyalashga yordam beradigan yangi uslublar xususiyatlari mavjud.
Bir nechta fonda mages
Orqa fon tasvirini, fon-pozitsiyani va orqa fonni takrorlaydigan uslublardan foydalanib, qutidagi bir-birining ustiga tepasida joylashgan bir nechta fon tasvirini ko'rsatishingiz mumkin. Birinchi rasm foydalanuvchi uchun eng yaqin qatlam bo'lib, uning orqasida quyidagi ranglar bo'yalgan. Agar fon rangi bo'lsa, u barcha rasm qatlamlarining ostiga bo'yalgan.
Yangi fon uslubi xususiyatlari
CSS3-da yangi fon xususiyatlari mavjud.
- fon-klip
- Bu xususiyat fon tasvirining qanday qilib kesilishi kerakligini belgilaydi. Sukut chegaralangan chegara qutisidir, lekin uni to'ldirish qutisiga yoki kontent qutisiga o'zgartirishi mumkin.
- fon-kelib chiqishi
- Bu xususiyat fonning to'ldirish qutisiga, chegara qutisiga yoki kontent qutisiga joylar kerakligini aniqlaydi.
- fon-o'lchovi
- Bu xususiyat fon tasvirining hajmini ko'rsatishga imkon beradi. Ushbu sahifaga moslash uchun kichikroq tasvirlarni uzatishga imkon beradi.
Mavjud fon uslubi xususiyatlarining o'zgarishi
Mavjud fon uslubi xususiyatlariga bir nechta o'zgarishlar ham bor:
- fon-takrorlash
- Bu xususiyat uchun ikki yangi qiymat mavjud: makon va yumaloq. Kosmik kvadrat shaklida kesishmasdan kosmik tasvirni bir tekis qilib qo'yadi. Dumaloq fon rasmini qutichaga bir necha marta yopishtirishi uchun qayta ishlaydi.
- fon-biriktirma
- "Elementar" yangi qiymat qo'shiladi, shuning uchun fonda element elementning tarkibi bilan aylanadi.
- fon
- Fon shabloni xususiyati hajmi va kelib chiqishi xususiyatlariga qo'shiladi.
CSS3 Chegaraviy xususiyatlari
CSS3 chegaralarida biz foydalanadigan uslublar (qattiq, ikkilamchi, kesilgan va hokazo) yoki ular rasm bo'lishi mumkin. Bundan tashqari, CSS3 yuvarlatilgan burchaklar yaratish qobiliyatini keltiradi. Chegara rasmlari qiziqarli, chunki siz to'rtta chegaraning tasvirini yaratdingiz va so'ngra CSS-ga ushbu tasvirni chegaralaringizga qanday qo'llashni aytib berishingiz mumkin.
Yangi chegara uslubi xususiyatlari
CSS3-da yangi chegara xususiyatlari mavjud:
- chegara radiusi
- border-top-right-radius , pastki-pastki-o'ng radius , chegara-ostki-chap-radius , chegara-tepalik-chap radius
- Bu xususiyatlar chegaralaringizda yumaloq burchaklar yaratishga imkon beradi.
- border-image-source
- Belgilangan chegara stillari o'rniga ishlatiladigan rasm manba faylini bildiradi.
- border-image-slice
- Chegaraning tasvir chekkasidan ichki oqimlarni anglatadi
- border-image-width
- Chegara rasmingiz uchun kenglikning qiymatini belgilaydi.
- border-image-boshlanishi
- Chegaraning tasvir doirasi chegara qutisidan kattaroq miqdorni bildiradi.
- border-image-strech
- Chegara tasvirining tomonlari va o'rta qismlari qanday slanetsiz yoki kattalashtirilishi kerakligini belgilaydi.
- border-image
- Barcha chegara rasmlari xususiyatlari uchun qisqartma xususiyati.
Chegara va arxivga oid qo'shimcha CSS3 xususiyatlari
Agar quti tanaffusda tanaffuslar buzilgan bo'lsa, satrlar orasidagi tanaffuslar uchun ustunli tanaffuslar (inline elementlar uchun) quti-dekoratsiya-buzish xususiyati yangi qutilarning chegara va to'ldirish bilan qanday qilib o'ralganligini belgilaydi. Bu xususiyatni ishlatib, fonlarni bir nechta buzilgan qutilarga bo'linishi mumkin.
Shuningdek, quti elementlariga soyalarni qo'shish uchun ishlatilishi mumkin bo'lgan quti-soya xususiyati ham mavjud.
CSS3 bilan endi osonlikcha ko'p ustunli jadvallar yoki murakkab div teg tuzilmalari bo'lmagan veb-sahifani o'rnatishingiz mumkin. Siz shunchaki brauzerda tananing elementi qanchalik ustun bo'lishi va qanchalik keng bo'lishi kerakligini ayting. Bundan tashqari, ustunlar (qoidalar), ustun balandligi oralig'ida fon ranglarini qo'shishingiz mumkin va matningiz barcha ustunlar orqali avtomatik ravishda oqadi.
CSS3 ustunlari - ustunlar sonini va kengligini aniqlang
Sizning ustunlaringizning sonini va kengligini aniqlashga imkon beruvchi uchta yangi xususiyat mavjud:
- ustun kengligi
- Sizning ustunlaringiz kengligi belgilab beradi. Brauzer, keyinchalik matnni bo'sh joyga to'ldirish uchun matnni oqadi.
- ustunlar soni
- Sahifadagi ustunlar sonini belgilaydi. Brauzer, keyinchalik bo'sh joyga mos keladigan keng hajmli ustunlar yaratadi, faqat siz ko'rsatgan raqam.
- ustunlar
- Qisqartirish xususiyati yoki kenglik yoki sonni belgilashingiz mumkin (yoki ikkalasi ham, ammo kamdan-kam mantiqiy).
CSS3 Ustun bo'shliqlari va qoidalari
Bo'shliqlar va qoidalar bir xil multikolen stsenariyidagi ustunlar orasiga joylashtirilgan. Bo'shliqlar ustunlarni ajratib turadi, lekin qoidalar hech qanday joyni egallamaydi. Agar ustun qoidasi bu bo'shliqqa nisbatan kengroq bo'lsa, u qo'shni ustunlarni bir-biriga qo'shib qo'yadi. ustunlar va bo'shliqlar uchun beshta yangi xususiyat mavjud:
- ustun bo'shlig'i
- Ustunlar orasidagi bo'shliqlarning kengligini belgilaydi.
- ustun-qoida-rang
- Qoida rangini belgilaydi.
- ustun-qoid uslubi
- Qoidalarning uslubini belgilaydi (qattiq, nuqta, ikki tomonlama va h.k.).
- ustun-qoidalar-kenglik
- Qoida kengligini belgilaydi.
- ustun-qoidalar
- Bir vaqtning o'zida uch ustunli qoidalar xususiyatlarini belgilaydigan qisqartma xususiyati.
CSS3 ustunlari buzilgan, cho'zilgan ustunlar va to'ldirish ustunlari
Ustun tanaffuslari diskdagi mazmundagi tanaffuslarni aniqlash uchun ishlatiladigan CSS2 variantlaridan foydalanadi, lekin uchta yangi xususiyatlar: oldindan sinishi , orqa qismini buzish va ichki qismni buzish .
Jadvallar singari, ustun-span xususiyatiga ega ustunlar uchun elementlarni o'rnatishingiz mumkin. Bu sizga gazeta kabi bir nechta ustunni o'z ichiga olgan sarlavhalar yaratish imkonini beradi.
To'ldirish ustunlari har bir ustunda qancha mazmunda bo'lishini aniqlaydi. Muvozanatli ustunlar har bir ustunga bir xil miqdordagi kontentni qo'yishga harakat qiladilar, shuning uchun avtomatik ravishda ustun to'lib ketguncha tarkibni oqadi va keyin keyingi bo'limga o'tadi.
CSS2-dagi boshqa xususiyatlar CSS2-ga kiritilgan
CSS2-da mavjud bo'lmagan CSS3-da bir nechta qo'shimcha funktsiyalar mavjud:
- CSS Andoza joylashtirish moduli va CSS3 Grid joylashishni aniqlash moduli : CSS bilan panjaralar yaratish.
- CSS3 matn moduli : Matnni yozing va hatto CSS bilan ochiladigan ko'lanka hosil qiling.
- CSS3 Rangli modul : Endi shaffoflik bilan.
- Qutidagi modelga kiritilgan o'zgartirishlar : IE yorlig'i kabi ishlaydigan marquee xususiyatini o'z ichiga oladi.
- CSS3 foydalanuvchi interfeysi moduli : Sizga yangi kursorlar, xatti-harakatlarga javob berish, kerakli joylar va hatto o'lchamlarini o'zgartirish elementlari .
- Media so'rovlari : Media so'rovlari uslublar jadvalining qanday ishlatilishini aniqlashda sizga ko'proq moslashuvchanlikni beradi. Misol uchun, siz 20-dan katta ko'rish portiga ega bo'lgan qurilmalar uchun uslublar jadvalini belgilashingiz mumkin.
- CSS3 Ruby moduli : Hujjatlarni izohlash uchun matnli ruboiy ishlatadigan tillarni qo'llab-quvvatlaydi.
- CSS3 Paged Media moduli : diskda saqlangan muhit uchun (qog'oz, asetatlar, va hokazo) ko'proq yordam berish uchun.
- Yaratilgan tarkib : L ishlaydigan sarlavhalar va footerlar, dipnotlar va dasturiy jihatdan yaratilgan boshqa kontent, ayniqsa, paged media uchun.
- CSS3 Nutq moduli : Oval CSS-ga o`zgarishlar.