CSS misollari

CSS sintaksisi

CSS sintaksisi tushuntirilgan

CSS selektorlari

Element selektori id selektori Klass selektori (barcha elementlar uchun) Klass selektori (faqat <p> elementlari uchun) Ikkita klassga murojaat qiluvchi HTML element Universal selektor Selektorlarni guruhlash

CSS selektorlari tushuntirilgan

CSS qanday / qayerga

Tashqi CSS Ichki CSS Inline CSS Bir nechta stil jadvallari (style sheets) Kaskad tartibi (Cascading Order)

CSS qanday qo‘shilishi tushuntirilgan

CSS izohlari

Bir qatorli izoh Ko‘p qatorli izoh

CSS izohlari tushuntirilgan

CSS ranglari

Element fon rangini belgilash Matn rangini belgilash Chegara rangini belgilash Turli rang qiymatlarini belgilash RGB qiymatlarini belgilash HEX qiymatlarini belgilash HSL qiymatlarini belgilash

CSS ranglari tushuntirilgan

CSS fonlari

Sahifa fon rangini belgilash Turli elementlar fon rangini belgilash Rasmni sahifa foni sifatida belgilash Fon rasmini faqat gorizontal takrorlash Fon rasmini joylashtirish Qotirilgan (fixed) fon rasmi (bu rasm sahifaning qolgan qismi bilan birga siljimaydi) Barcha fon xossalari bitta deklaratsiyada Ilg‘or fon misoli

CSS background xossalari tushuntirilgan

CSS chegaralari

To‘rtta chegara kengligini belgilash Yuqori chegara kengligini belgilash Pastki chegara kengligini belgilash Chap chegara kengligini belgilash O‘ng chegara kengligini belgilash To‘rtta chegara uslubini belgilash Yuqori chegara uslubini belgilash Pastki chegara uslubini belgilash Chap chegara uslubini belgilash O‘ng chegara uslubini belgilash To‘rtta chegara rangini belgilash Yuqori chegara rangini belgilash Pastki chegara rangini belgilash Chap chegara rangini belgilash O‘ng chegara rangini belgilash Barcha chegara xossalari bitta deklaratsiyada Elementga yumaloq chegaralar qo‘shish Har bir tomonga turli chegaralar belgilash Yuqori chegara xossalarining hammasi bitta deklaratsiyada Barcha pastki chegara xossalari bitta deklaratsiyada Barcha chap chegara xossalari bitta deklaratsiyada Barcha o‘ng chegara xossalari bitta deklaratsiyada

CSS border xossalari tushuntirilgan

CSS marginlari

Elementning har bir tomoni uchun har xil margin belgilash Qisqartma margin xossasini to‘rt qiymat bilan ishlatish Qisqartma margin xossasini uch qiymat bilan ishlatish Qisqartma margin xossasini ikki qiymat bilan ishlatish Qisqartma margin xossasini bitta qiymat bilan ishlatish Elementni konteyner ichida markazlash uchun margin ni auto qilish Chap margin ota elementdan meros olishiga ruxsat berish Marginlarning birlashishi (margin collapse)

Margin xossalari tushuntirilgan

CSS ichki chekinish (padding)

Elementning har bir tomoni uchun har xil padding belgilash Qisqartma padding xossasini to‘rt qiymat bilan ishlatish Qisqartma padding xossasini uch qiymat bilan ishlatish Qisqartma padding xossasini ikki qiymat bilan ishlatish Qisqartma padding xossasini bitta qiymat bilan ishlatish Padding va element kengligi (box-sizing‘siz) Padding va element kengligi (box-sizing bilan) Elementning padding-left qiymatini belgilash Elementning padding-right qiymatini belgilash Elementning padding-top qiymatini belgilash Elementning padding-bottom qiymatini belgilash

CSS padding xossalari tushuntirilgan

CSS balandlik/kenglik

Element balandligi va kengligini belgilash Elementning max-width qiymatini belgilash Turli elementlar balandligi va kengligini belgilash Rasm balandligi va kengligini foiz yordamida belgilash Elementning min-width va max-width qiymatlarini belgilash Elementning min-height va max-height qiymatlarini belgilash

CSS height/width xossalari tushuntirilgan

CSS box modeli

Quti modelini namoyish qilish Umumiy kenglikni hisoblash

CSS box modeli tushuntirilgan

CSS kontur (outline)

Element atrofiga chiziq chizish (outline) Outline uslubini belgilash Outline rangini belgilash Outline kengligini belgilash Qisqartma outline xossasidan foydalanish Yumaloq burchakli outline outline-offset dan foydalanish Manfiy qiymat bilan outline-offset dan foydalanish

CSS outline xossalari tushuntirilgan

CSS matn

Turli elementlar matn rangini belgilash Turli elementlar matn rangi va fon rangini belgilash Matnni tekislash text-align: justify dan foydalanish text-align-last dan foydalanish Matn ichidagi rasmni vertikal tekislash Element matn yo‘nalishini belgilash text-decoration-line dan foydalanish text-decoration-color dan foydalanish text-decoration-style dan foydalanish text-decoration-thickness dan foydalanish text-decoration qisqartma xossasidan foydalanish text-decoration: none dan foydalanish text-transform dan foydalanish text-indent dan foydalanish letter-spacing dan foydalanish line-height dan foydalanish word-spacing dan foydalanish white-space dan foydalanish Element uchun matn soyasi qo‘shish Element uchun rangli matn soyasi qo‘shish Xira effektli rangli matn soyasi qo‘shish Oq matndagi matn soyasi Qizil neon yorug‘lik bilan matn soyasi Qizil va ko‘k neon yorug‘lik bilan matn soyasi Yana bir matn soyasi effekti

CSS matn xossalari tushuntirilgan

CSS shriftlari

Matn uchun turli shriftlar belgilash Zaxira shriftidan foydalanish font-style xossasidan foydalanish font-weight xossasidan foydalanish font-variant xossasini belgilash Shrift o‘lchamini px da belgilash Shrift o‘lchamini em da belgilash Shrift o‘lchamini rem da belgilash Shrift o‘lchamini vw da belgilash font qisqartma xossasidan foydalanish

Shrift xossalari tushuntirilgan

CSS ikonkalari

Font Awesome ikonkalari Bootstrap ikonkalari Google ikonkalari

CSS ikonkalari tushuntirilgan

CSS havolalari

Havolaga stil berish Havolaga holatiga qarab stil berish Havolaga text-decoration bilan stil berish Havolaga background-color bilan stil berish Havola tugma yaratish Chegarali havola tugma yaratish Havolalarga boshqa uslublar qo‘shish Kursorning turli turlari

CSS havola xossalari tushuntirilgan

CSS ro‘yxatlari

Ro‘yxatlardagi barcha turli ro‘yxat belgilari Rasmni ro‘yxat belgisi sifatida belgilash Ro‘yxat belgisining joylashuvini belgilash Ro‘yxatning standart sozlamalarini olib tashlash Barcha ro‘yxat xossalari bitta deklaratsiyada Ro‘yxatlarga ranglar bilan stil berish To‘liq kenglikdagi chegarali ro‘yxat

CSS ro‘yxat xossalari tushuntirilgan

CSS jadvallari

CSS jadval xossalari tushuntirilgan

CSS display

visibility:hidden dan foydalanish display:none dan foydalanish display:none va visibility: hidden o‘rtasidagi farq display xossasining barcha qiymatlari Blok darajasidagi elementni inline element sifatida ko‘rsatish Inline elementni blok darajasidagi element sifatida ko‘rsatish Yashirilgan elementni ko‘rsatish uchun CSS va JavaScript’dan foydalanish Ko‘rsatish va yashirish orasida almashish uchun CSS va JavaScript’dan foydalanish

CSS display xossalari tushuntirilgan

CSS joylashuvi

position: static dan foydalanish position: relative dan foydalanish position: fixed dan foydalanish position: absolute dan foydalanish position: sticky dan foydalanish Rasm ustidagi matnni joylashtirish (yuqori chap burchak) Rasm ustidagi matnni joylashtirish (yuqori o‘ng burchak) Rasm ustidagi matnni joylashtirish (pastki chap burchak) Rasm ustidagi matnni joylashtirish (pastki o‘ng burchak) Rasm ustidagi matnni joylashtirish (markazda) Joylashtirish va z-index dan foydalanish Taxlanish tartibini belgilash uchun z-index dan foydalanish z-index ishlatilmagan holat

CSS joylashtirish xossalari tushuntirilgan

CSS overflow

overflow xossasidan foydalanish overflow: visible dan foydalanish overflow: hidden dan foydalanish overflow: scroll dan foydalanish overflow: auto dan foydalanish overflow-x va overflow-y dan foydalanish.

CSS overflow xossalari tushuntirilgan

CSS suzuvchanlik (float)

float xossasining oddiy ishlatilishi Paragrafda o‘ngga suzuvchi, chegara va marginli rasm O‘ngga suzuvchi, izohli rasm Paragrafning birinchi harfini chapga suzdirish float ni o‘chirish (clear xossasi yordamida) float ni o‘chirish ("clearfix" hiylasi yordamida) Suzuvchi qutilar yaratish Yonma-yon rasmlar yaratish Teng balandlikdagi qutilar yaratish (flexbox bilan) Gorizontal menyu yaratish

CSS float xossalari tushuntirilgan

CSS inline-block

inline, inline-block va block o‘rtasidagi farqlarni ko‘rsatish Navigatsiya havolalari yaratish uchun inline-block dan foydalanish

CSS inline-block tushuntirilgan

CSS’da elementlarni tekislash

margin bilan markazga tekislash Matnni markazga tekislash Rasmni markazlash Flexbox bilan markazga tekislash Grid bilan markazga tekislash position bilan chap/o‘ngga tekislash float bilan chap/o‘ngga tekislash position bilan vertikal va gorizontal markazlash

CSS tekislash xossalari tushuntirilgan

CSS kombinatorlari

Avlod selektori (descendant) Bola element selektori (child) Keyingi qo‘shni element selektori (adjacent sibling) Keyingi barcha qo‘shni elementlar selektori (general sibling)

CSS kombinatorlari tushuntirilgan

CSS psevdo-klasslari

Havolalarni holatiga qarab turli ranglarda ko‘rsatish Giperhavolalarga boshqa uslublar qo‘shish div da :hover dan foydalanish :focus dan foydalanish Psevdo-klasslar va HTML klasslarini birlashtirish Tooltip ko‘rsatish uchun :hover dan foydalanish :first-child - birinchi bola bo‘lgan barcha p elementlariga stil berish :first-child - barcha p elementlaridagi birinchi em elementiga stil berish :first-child - barcha birinchi bola p elementlaridagi barcha em elementlariga stil berish :lang dan foydalanish

CSS psevdo-klasslari tushuntirilgan

CSS psevdo-elementlari

Matnda birinchi harfni maxsus qilish Matnda birinchi qatorni maxsus qilish Birinchi harf va birinchi qatorni maxsus qilish Element oldidan tarkib qo‘shish uchun :before dan foydalanish Element ortidan tarkib qo‘shish uchun :after dan foydalanish Ro‘yxat bandi markerlariga stil berish uchun :marker dan foydalanish Foydalanuvchi belgilagan matnga stil berish uchun :selection dan foydalanish Dialog oynasi ortidagi viewbox’ga stil berish uchun :backdrop dan foydalanish

CSS psevdo-elementlari tushuntirilgan

CSS shaffofligi

Shaffof rasmlar yaratish Shaffof rasmlar yaratish - sichqoncha ustiga kelgandagi effekt Shaffof rasmlar uchun teskari hover effekti opacity bilan shaffof qutilar opacity va RGBA fon rangi farqi Shaffof blokdagi matn

CSS rasm shaffofligi tushuntirilgan

CSS navigatsiya panellari

Vertikal navigatsiya paneli - to‘liq uslublangan Gorizontal navigatsiya paneli - to‘liq uslublangan Float yordamida gorizontal navigatsiya paneli Flex yordamida gorizontal navigatsiya paneli Vertikal navigatsiya paneli - to‘liq balandlikda va qotirilgan (fixed) Gorizontal navigatsiya paneli - yuqorida qotirilgan Yopishqoq (sticky) navigatsiya paneli Moslashuvchan yuqori navigatsiya Moslashuvchan yon navigatsiya

CSS navigatsiya panellari tushuntirilgan

CSS ochiluvchi menyulari

Ochiluvchi matn Ochiluvchi menyu O‘ngga tekislangan ochiluvchi menyu Ochiluvchi rasm Ochiluvchi menyuli navigatsiya paneli

CSS ochiluvchi menyulari tushuntirilgan

CSS rasm galereyasi

Rasm galereyasi Moslashuvchan rasm galereyasi

CSS rasm galereyasi tushuntirilgan

CSS rasm spraytlari (sprites)

Rasm sprayti Rasm sprayti - navigatsiya ro‘yxati Hover effektli rasm sprayti

CSS rasm spraytlari tushuntirilgan

CSS atribut selektorlari

target atributi mavjud bo‘lgan barcha <a> elementlarini tanlaydi target="_blank" atributi mavjud bo‘lgan barcha <a> elementlarini tanlaydi title atributi probel bilan ajratilgan so‘zlar ro‘yxatini o‘z ichiga olgan — va ulardan biri "flower" — barcha elementlarni tanlaydi class atribut qiymati "top" bilan boshlanadigan (butun so‘z bo‘lishi shart) barcha elementlarni tanlaydi class atribut qiymati "test" bilan boshlanadigan barcha elementlarni tanlaydi class atribut qiymati "test" bilan tugaydigan barcha elementlarni tanlaydi class atribut qiymati "te" ni o‘z ichiga olgan barcha elementlarni tanlaydi

CSS atribut selektorlari tushuntirilgan

CSS formalari

To‘liq kenglikdagi kiritish maydoni Ichki chekinishli (padding) kiritish maydoni Chegarali kiritish maydoni Faqat pastki chegarali kiritish maydoni Rangli kiritish maydonlari Fokusdagi kiritish maydonlari Fokusdagi kiritish maydonlari 2 Ikonka/rasmli input Animatsiyali qidiruv maydoni Textarea elementlarini uslublash Select menyularini uslublash Input tugmalarini uslublash Moslashuvchan forma

CSS formalari tushuntirilgan

CSS hisoblagichlari

Hisoblagich yaratish Hisoblagichni 1 ga kamaytirish Hisoblagichni 2 ga oshirish Ikkita hisoblagichdan foydalanish counters() funksiyasidan foydalanish

CSS hisoblagichlari tushuntirilgan

CSS veb-sayt maketi

Veb-sayt maketi - header (sarlavha qismi) Veb-sayt maketi - navigatsiya paneli Veb-sayt maketi - 3 ustundan 1 ustunga Veb-sayt maketi - oddiy footer Veb-sayt maketi - qotirilgan footer Moslashuvchan veb-sayt misoli

CSS veb-sayt maketi tushuntirilgan

CSS yumaloq burchaklari

Elementlarga yumaloq burchaklar qo‘shish Har bir burchakni alohida yumaloqlash Ellips burchaklar yaratish

CSS yumaloq burchaklari tushuntirilgan

CSS chegara rasmlari

round kalit so‘zi yordamida element atrofiga rasm chegara yaratish stretch kalit so‘zi yordamida element atrofiga rasm chegara yaratish Rasmli chegara - turli slice qiymatlari

CSS chegara rasmlari tushuntirilgan

CSS fonlari

Element uchun bir nechta fon rasmlari qo‘shish Fon rasmi o‘lchamini belgilash Fon rasmini "contain" va "cover" bilan masshtablash Bir nechta fon rasmlari o‘lchamini belgilash To‘liq o‘lchamdagi fon rasmi Hero fon rasmi Fon rasmining joylashuvini belgilash uchun background-origin dan foydalanish Fon rasmi bilan background-clip dan foydalanish Fon rangi bilan background-clip dan foydalanish

CSS fonlari tushuntirilgan

CSS ranglari

Turli RGBA ranglar Turli HSLA ranglar opacity bilan turli ranglar

CSS ranglari tushuntirilgan

CSS rang kalit so‘zlari

transparent kalit so‘zidan foydalanish currentcolor kalit so‘zidan foydalanish currentcolor kalit so‘zidan foydalanish currentcolor kalit so‘zidan foydalanish inherit kalit so‘zidan foydalanish

CSS rang kalit so‘zlari tushuntirilgan

CSS gradientlari

Chiziqli gradient - yuqoridan pastga Chiziqli gradient - pastdan yuqoriga Chiziqli gradient - chapdan o‘ngga Chiziqli gradient - diagonal Chiziqli gradient — ko‘rsatilgan burchak bilan Chiziqli gradient — bir nechta rang to‘xtashi bilan Chiziqli gradient - kamalak ranglari + matn Chiziqli gradient — shaffoflik bilan Chiziqli gradient - takrorlanuvchi chiziqli gradient Radial gradient - teng oraliqli rang to‘xtashlari Radial gradient — turli oraliqli rang to‘xtashlari Radial gradient — shaklni belgilash Radial gradient - turli o‘lcham kalit so‘zlari Radial gradient - takrorlanuvchi radial gradient Konik gradient - uch rang Konik gradient - besh rang Konik gradient — uch rang va darajalar Konik gradient - doiraviy diagramma Konik gradient - doiraviy diagramma 2 Konik gradient — from burchak bilan Konik gradient — markaz joylashuvi bilan Konik gradient - takrorlanuvchi konik gradient Konik gradient - takrorlanuvchi konik gradient 2

CSS gradientlari tushuntirilgan

CSS soya effektlari

Oddiy soya effekti Soyaga rang qo‘shish Soyaga xira (blur) effekti qo‘shish Qora soyali oq matn Qizil neon yorug‘lik soyasi Qizil va ko‘k neon yorug‘lik soyasi Qora, ko‘k va to‘q ko‘k soyali oq matn Matn atrofidagi chegara Elementga oddiy box-shadow qo‘shish box-shadow’ga rang qo‘shish box-shadow’ga rang va xira effekti qo‘shish box-shadow’ga rang, xira va tarqalish effekti qo‘shish box-shadow’da inset kalit so‘zidan foydalanish Element uchun bir nechta soya qo‘shish Qog‘ozga o‘xshash kartalar yaratish (matn) Qog‘ozga o‘xshash kartalar yaratish (polaroid rasmlar)

CSS soya effektlari tushuntirilgan

CSS matn effektlari

Yashirin, toshib ketgan kontent foydalanuvchiga qanday bildirilishini belgilash Element ustiga sichqoncha olib borilganda toshib ketgan kontentni qanday ko‘rsatish Uzun so‘zlarning uzilib keyingi qatorga o‘tishiga ruxsat berish Matn qatorlari gorizontal yoki vertikal joylashishini belgilash

CSS matn effektlari tushuntirilgan

CSS maxsus shriftlari

@font-face qoidasida "o‘z" shriftlaringizdan foydalanish @font-face qoidasida "o‘z" shriftlaringizdan foydalanish (qalin)

CSS maxsus shriftlari tushuntirilgan

CSS 2D transformatsiyalari

translate() - elementni joriy o‘rnidan siljitish rotate() - elementni soat mili yo‘nalishida aylantirish rotate() - elementni soat miliga teskari yo‘nalishda aylantirish scale() - elementni kattalashtirish scale() - elementni kichraytirish skewX() — elementni X o‘qi bo‘ylab qiyshaytiradi skewY() — elementni Y o‘qi bo‘ylab qiyshaytiradi skew() — elementni X va Y o‘qlari bo‘ylab qiyshaytiradi matrix() — elementni aylantirish, masshtablash, siljitish va qiyshaytirish

CSS 2D transformatsiyalari tushuntirilgan

CSS 3D transformatsiyalari

rotateX() - elementni X o‘qi atrofida berilgan darajaga burish rotateY() - elementni Y o‘qi atrofida berilgan darajaga burish rotateZ() - elementni Z o‘qi atrofida berilgan darajaga burish

CSS 3D transformatsiyalari tushuntirilgan

CSS o‘tishlar (transitions)

Transition - element kengligini o‘zgartirish Transition — element kengligi va balandligini o‘zgartirish O‘tish uchun turli tezlik egri chiziqlarini belgilash O‘tish effekti uchun kechikish belgilash O‘tish effektiga transformatsiya qo‘shish Barcha transition xossalarini bitta qisqa (shorthand) xossada belgilash

CSS o‘tishlari (transitions) tushuntirilgan

CSS animatsiyalari

Animatsiyani elementga bog‘lash Animatsiya - elementning background-color qiymatini o‘zgartirish Animatsiya — element fon rangi va joylashuvini o‘zgartirish Animatsiyani kechiktirish Animatsiyani to‘xtashidan oldin 3 marta o‘ynatish Animatsiyani abadiy o‘ynatish Animatsiyani teskari yo‘nalishda o‘ynatish Animatsiyani navbatma-navbat (alternate) sikllarda o‘ynatish Animatsiyalar uchun tezlik egri chiziqlari animation qisqartma xossasi

CSS animatsiyalari tushuntirilgan

CSS maslahat oynalari (tooltip)

O‘ng tomondagi tooltip Chap tomondagi tooltip Yuqoridagi tooltip Pastdagi tooltip Strelkali tooltip Animatsiyali tooltip

CSS tooltip’lari tushuntirilgan

CSS’da rasmlarni uslublash

CSS’da rasmlarni uslublash tushuntirilgan

CSS rasm modal oynasi

Moslashuvchan modal rasm galereyasi

CSS rasm modal oynasi tushuntirilgan

CSS’da rasmni markazlash

Rasmni margin: auto bilan gorizontal markazlash Rasmni display: flex bilan gorizontal markazlash Rasmni display: flex bilan vertikal ham, gorizontal ham markazlash Rasmni display: grid bilan vertikal ham, gorizontal ham markazlash

CSS’da rasmni markazlash tushuntirilgan

CSS rasm filtrlari

blur() filtri brightness() filtri contrast() filtri drop-shadow() filtri grayscale() filtri hue-rotate() filtri invert() filtri opacity() filtri saturate() filtri sepia() filtri

CSS rasm filtrlari tushuntirilgan

CSS rasm shakllari

Rasmni doira shaklida qirqish Rasmni doira shaklida qirqib, doira markazini o‘ngga joylashtirish Circle() va shape-outside Rasmni ellips shaklida qirqish Rasmni ellips shaklida qirqib, ellips markazini o‘ngga joylashtirish Ellipse() va shape-outside Rasmni ko‘pburchak shaklida qirqish

CSS rasm shakllari tushuntirilgan

CSS object-fit

object-fit: cover qiymatidan foydalanish object-fit: contain qiymatidan foydalanish object-fit: fill qiymatidan foydalanish object-fit: none qiymatidan foydalanish object-fit: scale-down qiymatidan foydalanish

CSS object-fit tushuntirilgan

CSS object-position

Rasmni ajoyib eski bino markazda bo‘lishi uchun joylashtirish Rasmni mashhur Eyfel minorasi markazda bo‘lishi uchun joylashtirish

CSS object-position tushuntirilgan

CSS niqoblash (masking)

mask-image xossasidan foydalanish mask-repeat xossasini yozmaslik Maska rasmining joylashuvini belgilash Chiziqli gradientli maska qatlami Chiziqli gradient va matnni niqoblash Radial gradientli maska qatlami (doira) Radial gradientli maska qatlami (ellips) Konus gradientli maska qatlami SVG maska qatlami (doira) SVG maska qatlami (ellips) SVG maska qatlami (uchburchak) SVG maska qatlami (yulduz) SVG maska qatlami (bir nechta doira)

CSS niqoblash (masking) tushuntirilgan

CSS tugmalari

Oddiy CSS tugmalari Tugma ranglari Tugma o‘lchamlari Yumaloq tugmalar Rangli tugma chegaralari Hover effektli tugmalar Soyali tugmalar Nofaol (disabled) tugmalar Tugma kengligi Tugmalar guruhi Chegarali tugmalar guruhi Animatsiyali tugma (hover effekti) Animatsiyali tugma (to‘lqin effekti) Animatsiyali tugma (bosilish effekti)

CSS tugmalari tushuntirilgan

CSS sahifalash

Oddiy sahifalash Faol klassli sahifalash O‘chirilgan klassli sahifalash Hover effektli sahifalash Hover paytida o‘tish effektli sahifalash Breadcrumb (navigatsiya zanjiri) sahifalash

CSS sahifalash tushuntirilgan

CSS ko‘p ustunli maket

Ko‘p ustunlar yaratish Ustunlar orasidagi bo‘shliqni belgilash Ustunlar orasidagi chiziq uslubini belgilash Ustunlar orasidagi chiziq kengligini belgilash Ustunlar orasidagi chiziq rangini belgilash Ustunlar orasidagi chiziq kengligi, uslubi va rangini belgilash Element nechta ustunni egallashi kerakligini belgilash Ustunlar uchun tavsiya etilgan optimal kenglikni belgilash

CSS ko‘p ustunli maket tushuntirilgan

CSS foydalanuvchi interfeysi

Foydalanuvchiga element kengligini o‘zgartirish imkonini berish Foydalanuvchiga element balandligini o‘zgartirish imkonini berish Foydalanuvchiga element kengligi va balandligini o‘zgartirish imkonini berish Outline bilan element chegarasi orasiga bo‘shliq qo‘shish

CSS foydalanuvchi interfeysi tushuntirilgan

CSS o‘zgaruvchilari

var() funksiyasidan foydalanish Global o‘zgaruvchini lokal o‘zgaruvchi bilan almashtirish Yangi lokal o‘zgaruvchi qo‘shish O‘zgaruvchini JavaScript bilan olish va o‘zgartirish Media so‘rovlarda o‘zgaruvchilarni o‘zgartirish

CSS o‘zgaruvchilari tushuntirilgan

CSS @property qoidasi

@property’dan oddiy foydalanish Maxsus xossani (custom property) qayta belgilash @property tur tekshiruvi va zaxira qiymati @property ning inherits qiymati (false) @property ning inherits qiymati (true) Gradientni animatsiya qilish uchun @property’dan foydalanish

CSS @property qoidasi tushuntirilgan

CSS box-sizing

box-sizing’siz elementlar kengligi box-sizing bilan elementlar kengligi Forma elementlari + box-sizing

CSS box-sizing tushuntirilgan

CSS media so‘rovlari

Ko‘rish oynasi 480px yoki undan keng bo‘lsa fon rangini lightgreen qilish Ko‘rish oynasi 480px yoki undan keng bo‘lsa sahifa chapiga suzadigan menyu ko‘rsatish

CSS media so‘rovlari tushuntirilgan

CSS media so‘rovlari - ko‘proq misollar

Ekran kengligiga qarab turli fon ranglarini belgilash Flexbox bilan moslashuvchan ustunlar Moslashuvchan navigatsiya menyusi Elementlarni media so‘rovlar bilan yashirish Moslashuvchan shrift o‘lchami Ekran yo‘nalishi landscape (albom) bo‘lsa, background-color ni o‘zgartirish Media so‘rov bilan foydalanuvchi sozlamalarini hurmat qilish Moslashuvchan rasm galereyasi Moslashuvchan veb-sayt

CSS media so‘rovlari misollari tushuntirilgan

CSS Flexbox

CSS Flexbox tushuntirilgan

CSS Flex elementlari

Flex elementlarning tartibini belgilash flex-grow xossasi flex-shrink xossasi flex-basis xossasi flex xossasi flex-basis xossasi align-self - center align-self — flex-start va flex-end

CSS Flex elementlari tushuntirilgan

Moslashuvchan CSS Flexbox

Moslashuvchan Flexbox Moslashuvchan Flexbox 2 Flexbox bilan moslashuvchan rasm galereyasi Flexbox bilan moslashuvchan veb-sayt yaratish

Moslashuvchan CSS Flexbox tushuntirilgan

CSS Grid bilan tanishuv

Grid maket Grid konteyner va grid elementlar

CSS Grid bilan tanishuv tushuntirilgan

CSS Grid konteyneri

Grid konteyner display: grid display: inline-grid

CSS Grid konteyneri tushuntirilgan

CSS Grid treklari

grid-template-columns: auto grid-template-columns: aralash qiymatlar grid-template-columns: fr birligi grid-template-columns: fr birligi 2 grid-template-columns: repeat() grid-template-columns: minmax() grid-template-rows xossasi

CSS Grid treklari tushuntirilgan

CSS Grid bo‘shliqlari (gaps)

column-gap xossasi row-gap xossasi gap xossasi - bitta qiymat gap xossasi - ikki qiymat

CSS Grid bo‘shliqlari tushuntirilgan

CSS Grid’da tekislash

justify-content: space-evenly justify-content: space-around justify-content: space-between justify-content: center justify-content: start justify-content: end align-content: center align-content: space-evenly align-content: space-around align-content: space-between align-content: start align-content: end place-content: center place-content: end space-between

CSS Grid’da tekislash tushuntirilgan

CSS Grid’da bir necha katakni egallovchi elementlar

Besh elementli grid maket grid-column-start va grid-column-end xossalari grid-column xossasi grid-row-start va grid-row-end xossalari grid-row xossasi

CSS Grid elementlari tushuntirilgan

CSS Grid elementlarini nomlash

Grid elementlarini nomlash uchun grid-area dan foydalanish 1 Grid elementlarini nomlash uchun grid-area dan foydalanish 2 Grid elementlarini nomlash uchun grid-area dan foydalanish 3 Grid elementlarini nomlash uchun grid-area dan foydalanish 4

CSS Grid elementlarini nomlash tushuntirilgan

CSS Grid elementlarini tekislash

justify-self xossasi align-self xossasi

CSS Grid elementlarini tekislash tushuntirilgan

CSS Grid elementlarini tartiblash

Grid elementlarining vizual tartibini belgilash

CSS Grid elementlarini tartiblash tushuntirilgan

CSS 12 ustunli grid maketi

Moslashuvchan 12 ustunli grid maket

CSS 12 ustunli grid maketi tushuntirilgan

CSS @supports qoidasi

@supports — flex uchun zaxira uslublash @supports — grid uchun zaxira uslublash

CSS @supports qoidasi tushuntirildi

CSS moslashuvchan veb-dizayn

Moslashuvchan grid ko‘rinishi Breakpointli moslashuvchan grid ko‘rinishi Odatiy breakpoint’lar Media so‘rovda ekran yo‘nalishi (orientation): portrait / landscape Turli ekran o‘lchamlarida elementlarni yashirish Turli ekran o‘lchamlarida shrift o‘lchamini o‘zgartirish Foydalanuvchi sozlamalarini hurmat qilish Moslashuvchan rasm: width xossasi Moslashuvchan rasm: max-width xossasi Moslashuvchan veb-sahifadagi moslashuvchan rasm Fon rasmi va background-size: contain Fon rasmi va background-size: 100% 100% Fon rasmi va background-size: cover Brauzer kengligiga qarab fon rasmini o‘zgartirish HTML picture elementi bilan fon rasmini o‘zgartirish Moslashuvchan video: width xossasi Moslashuvchan video: max-width xossasi Moslashuvchan veb-sahifadagi moslashuvchan video Moslashuvchan freymvork: W3.CSS Moslashuvchan freymvork: Bootstrap

CSS moslashuvchan veb-dizayn tushuntirilgan

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish