W3.CSS ma’lumotnomasi

W3.CSS klasslari

Ushbu ma’lumotnomada W3.CSS tarkibidagi klasslar sanab o‘tilgan va har bir klass nima vazifa bajarishi ko‘rsatilgan.

Konteyner klasslari

Klass	Vazifasi
w3-container	Chap va o‘ng tomondan 16px ichki bo‘shliqqa (padding) ega HTML konteyner	Sinab ko‘ring
	Sarlavha qismi (header) sifatida ishlatiladi	Sinab ko‘ring
	Pastki qism (footer) sifatida ishlatiladi	Sinab ko‘ring
w3-panel	Chap va o‘ng tomondan 16px ichki bo‘shliqqa (padding), yuqori va pastdan 16px tashqi bo‘shliqqa (margin) ega HTML konteyner	Sinab ko‘ring
	Eslatmani ko‘rsatish uchun ishlatiladi	Sinab ko‘ring
	Iqtibosni ko‘rsatish uchun ishlatiladi	Sinab ko‘ring
w3-badge	Doira shaklidagi nishon	Sinab ko‘ring
w3-tag	To‘rtburchak shaklidagi teg	Sinab ko‘ring
w3-ul	Tartiblanmagan ro‘yxat	Sinab ko‘ring
w3-display-container	w3-display-klasslari uchun konteyner (konteyner ichidagi elementlarni joylashtirish imkonini beradi)	Sinab ko‘ring
w3-block	Istalgan element uchun to‘liq kenglikni belgilashda ishlatilishi mumkin bo‘lgan klass	Sinab ko‘ring
w3-code	Kod konteyneri	Sinab ko‘ring
w3-codespan	Qator ichidagi kod konteyneri (kod parchalari uchun)	Sinab ko‘ring
w3-content	Markazlashtirilgan, qat’iy o‘lchamli kontent uchun konteyner	Sinab ko‘ring
w3-auto	Markazlashtirilgan, moslashuvchan o‘lchamli kontent uchun konteyner	Sinab ko‘ring
w3-stretch	O‘ng va chap tashqi bo‘shliqlarni (margin) olib tashlaydigan klass (ayniqsa ichki bo‘shliqli qatorlarni (w3-row-padding) cho‘zish uchun foydali)	Sinab ko‘ring
w3-rtl	Matn yo‘nalishini o‘ngdan chapga (rtl) yoziladigan joylashuvga moslaydi	Sinab ko‘ring
w3-ltr	Matn yo‘nalishini chapdan o‘ngga (ltr) yoziladigan joylashuvga moslaydi	Sinab ko‘ring

Jadval klasslari

Klass	Vazifasi
w3-table	HTML jadval uchun konteyner	Sinab ko‘ring
w3-striped	Yo‘l-yo‘l jadval	Sinab ko‘ring
w3-border	Chegarali jadval	Sinab ko‘ring
w3-bordered	Chegara chiziqlari	Sinab ko‘ring
w3-centered	Markazlashtirilgan jadval	Sinab ko‘ring
w3-hoverable	Hover effektli jadval	Sinab ko‘ring
w3-responsive	Moslashuvchan jadval yaratadi	Sinab ko‘ring

Kartochka klasslari

Klass	Vazifasi
w3-card	w3-card-2 bilan bir xil	Sinab ko‘ring
w3-card-2	Istalgan HTML kontent uchun konteyner (2px chegarali soya)	Sinab ko‘ring
w3-card-4	Istalgan HTML kontent uchun konteyner (4px chegarali soya)	Sinab ko‘ring

Moslashuvchanlik klasslari

Klass	Vazifasi
w3-row	Egiluvchan (fluid) moslashuvchan kontentning bitta qatori uchun konteyner	Sinab ko‘ring
w3-row-padding	Barcha ustunlari standart ichki bo‘shliqqa (padding) ega qator	Sinab ko‘ring
w3-auto	Markazlashtirilgan, moslashuvchan o‘lchamli kontent uchun konteyner	Sinab ko‘ring
w3-stretch	O‘ng va chap tashqi bo‘shliqlarni (margin) olib tashlaydigan klass	Sinab ko‘ring
w3-half	Qator kengligining yarmini egallaydigan moslashuvchan ustun	Sinab ko‘ring
w3-third	Qator kengligining uchdan birini egallaydigan moslashuvchan ustun	Sinab ko‘ring
w3-twothird	Qator kengligining uchdan ikkisini egallaydigan moslashuvchan ustun	Sinab ko‘ring
w3-quarter	Qator kengligining to‘rtdan birini egallaydigan moslashuvchan ustun	Sinab ko‘ring
w3-threequarter	Qator kengligining to‘rtdan uchini egallaydigan moslashuvchan ustun	Sinab ko‘ring
w3-col	HTML kontent uchun moslashuvchan ustun konteyneri	Sinab ko‘ring
w3-rest	Ustun kengligining qolgan qismini egallaydi	Sinab ko‘ring

l1 - l12	Katta ekranlar uchun moslashuvchan o‘lchamlar	Sinab ko‘ring
m1 - m12	O‘rtacha ekranlar uchun moslashuvchan o‘lchamlar	Sinab ko‘ring
s1 - s12	Kichik ekranlar uchun moslashuvchan o‘lchamlar	Sinab ko‘ring

w3-hide-small	Kichik ekranlarda (601px dan kichik) kontentni yashiradi	Sinab ko‘ring
w3-hide-medium	O‘rtacha ekranlarda kontentni yashiradi	Sinab ko‘ring
w3-hide-large	Katta ekranlarda (992px dan katta) kontentni yashiradi	Sinab ko‘ring

w3-image	Moslashuvchan rasm	Sinab ko‘ring

w3-mobile	Istalgan elementga mobile-first (avval mobil qurilmalar uchun) moslashuvchanlik qo‘shadi. Mobil qurilmalarda elementlarni blok elementlar sifatida ko‘rsatadi.	Sinab ko‘ring

Flexbox klasslari

Klass	Vazifasi
w3-flex	Egiluvchan bir o‘lchamli joylashuvlar (layout) uchun Flexbox konteyner	Sinab ko‘ring

Grid klasslari

Klass	Vazifasi
w3-grid	Egiluvchan ikki o‘lchamli joylashuvlar (layout) uchun CSS Grid konteyner	Sinab ko‘ring

Joylashuv (layout) klasslari

Klass	Vazifasi
w3-cell-row	Joylashuv ustunlari (kataklar) uchun konteyner.	Sinab ko‘ring
w3-cell	Joylashuv ustuni (katak).	Sinab ko‘ring
w3-cell-top	Kontentni ustunning (katakning) yuqori qismiga tekislaydi.	Sinab ko‘ring
w3-cell-middle	Kontentni ustunning (katakning) vertikal o‘rtasiga tekislaydi.	Sinab ko‘ring
w3-cell-bottom	Kontentni ustunning (katakning) pastki qismiga tekislaydi.	Sinab ko‘ring

Panel (bar) klasslari — navigatsiya

Klass	Vazifasi
w3-bar	Gorizontal panel	Sinab ko‘ring
w3-bar-block	Vertikal panel	Sinab ko‘ring
w3-bar-item	Panel elementlari uchun umumiy uslubni ta’minlaydi	Sinab ko‘ring
w3-sidebar	Yon panel	Sinab ko‘ring
	Yon panel istalgan turdagi kontentni o‘z ichiga olishi mumkin	Sinab ko‘ring
	Asosiy kontent ustiga chiqib turadigan yon panel	Sinab ko‘ring
	Butun asosiy kontent ustiga chiqib turadigan yon panel	Sinab ko‘ring
	Asosiy kontentni o‘ngga suradigan yon panel	Sinab ko‘ring
	Ustki qatlam (overlay) fonli yon panel	Sinab ko‘ring
	O‘ng tomondagi yon panel	Sinab ko‘ring
w3-collapse	To‘liq avtomatik moslashuvchan yon navigatsiya yaratish uchun w3-sidebar bilan birga ishlatiladi. Bu klass ishlashi uchun sahifa kontenti "w3-main" klassi ichida bo‘lishi kerak	Sinab ko‘ring
w3-main	Moslashuvchan yon navigatsiya uchun w3-collapse klassidan foydalanilganda sahifa kontentini o‘z ichiga oladigan konteyner	Sinab ko‘ring
	O‘ng tomonda joylashgan to‘liq avtomatik moslashuvchan yon navigatsiya	Sinab ko‘ring

Ochiluvchi menyu klasslari

w3-dropdown-click	Bosilganda ochiladigan dropdown elementi	Sinab ko‘ring
w3-dropdown-hover	Hover’da ochiladigan dropdown elementi	Sinab ko‘ring
	Sichqoncha ustiga kelganda ochiladigan dropdown elementi (w3-bar ichida ishlatiladi)	Sinab ko‘ring
	Sichqoncha ustiga kelganda ochiladigan dropdown elementi (w3-bar-block ichida ishlatiladi)	Sinab ko‘ring
	Sichqoncha ustiga kelganda ochiladigan dropdown elementi (w3-sidebar ichida ishlatiladi)	Sinab ko‘ring

Tugma klasslari

Klass	Vazifasi
w3-button	Sichqoncha ustiga kelganda foni kulrang bo‘ladigan to‘rtburchak tugma	Sinab ko‘ring
w3-btn	Sichqoncha ustiga kelganda soya paydo bo‘ladigan to‘rtburchak tugma	Sinab ko‘ring
w3-circle	Doira shaklidagi tugma yaratish uchun ishlatilishi mumkin	Sinab ko‘ring
w3-ripple	To‘lqin (ripple) effektli to‘rtburchak tugma	Sinab ko‘ring
	To‘lqin (ripple) effektli, doira shaklidagi suzuvchi tugma	Sinab ko‘ring
w3-bar	Elementlarni (masalan, tugmalarni) gorizontal panelda guruhlash uchun ishlatilishi mumkin	Sinab ko‘ring
w3-block	w3-button tugmasini to‘liq kenglikda qilish uchun ishlatilishi mumkin bo‘lgan klass	Sinab ko‘ring
	To‘liq kenglikdagi w3-btn	Sinab ko‘ring
	To‘liq kenglikdagi, doira shaklidagi tugma	Sinab ko‘ring

Kiritish maydoni klasslari

Klass	Vazifasi
w3-input	Kiritish elementlari	Sinab ko‘ring
	Karta ko‘rinishidagi kiritish formasi	Sinab ko‘ring
	Kiritish elementlari (yuqoridagi yorliqlar)	Sinab ko‘ring
	Kiritish elementlari (pastdagi yorliqlar)	Sinab ko‘ring
w3-check	Checkbox turidagi kiritish elementi	Sinab ko‘ring
w3-radio	Radio turidagi kiritish elementi	Sinab ko‘ring
w3-select	Tanlash (select) elementi	Sinab ko‘ring
w3-animate-input	Kiritish maydoni kengligini animatsiya bilan 100% gacha kattalashtiradi	Sinab ko‘ring

Modal oyna klasslari

Klass	Vazifasi
w3-modal	Modal oyna konteyneri	Sinab ko‘ring
w3-modal-content	Qalqib chiquvchi modal element	Sinab ko‘ring
w3-tooltip	Tooltip elementi	Sinab ko‘ring
w3-text	Tooltip matni	Sinab ko‘ring

Animatsiya klasslari

Klass	Vazifasi
w3-animate-top	Elementni yuqoridan -300px dan 0px gacha animatsiya bilan siljitadi	Sinab ko‘ring
w3-animate-left	Elementni chapdan -300px dan 0px gacha animatsiya bilan siljitadi	Sinab ko‘ring
w3-animate-bottom	Elementni pastdan -300px dan 0px gacha animatsiya bilan siljitadi	Sinab ko‘ring
w3-animate-right	Elementni o‘ngdan -300px dan 0px gacha animatsiya bilan siljitadi	Sinab ko‘ring
w3-animate-opacity	Element shaffofligini 0 dan 1 gacha animatsiya qiladi	Sinab ko‘ring
w3-animate-zoom	Element o‘lchamini 0 dan 100% gacha animatsiya qiladi	Sinab ko‘ring
w3-animate-fading	Element shaffofligini (opacity) 0 dan 1 gacha va 1 dan 0 gacha animatsiya qiladi (asta paydo bo‘ladi VA yo‘qoladi)	Sinab ko‘ring
w3-spin	Ikonkani 360 gradusga aylantiradi	Sinab ko‘ring
	Istalgan elementni 360 gradusga aylantiradi	Sinab ko‘ring
w3-animate-input	Kiritish maydoni kengligini animatsiya bilan 100% gacha kattalashtiradi	Sinab ko‘ring

Shrift va matn klasslari

Klass	Vazifasi
w3-tiny	Shrift o‘lchamini 10 piksel qilib belgilaydi	Sinab ko‘ring
w3-small	Shrift o‘lchamini 12 piksel qilib belgilaydi	Sinab ko‘ring
w3-large	Shrift o‘lchamini 18 piksel qilib belgilaydi	Sinab ko‘ring
w3-xlarge	Shrift o‘lchamini 24 piksel qilib belgilaydi	Sinab ko‘ring
w3-xxlarge	Shrift o‘lchamini 32 piksel qilib belgilaydi	Sinab ko‘ring
w3-xxxlarge	Shrift o‘lchamini 48 piksel qilib belgilaydi	Sinab ko‘ring
w3-jumbo	Shrift o‘lchamini 64 piksel qilib belgilaydi	Sinab ko‘ring
w3-wide	Kengroq matnni belgilaydi	Sinab ko‘ring
w3-serif	Shriftni serif turiga o‘zgartiradi	Sinab ko‘ring
w3-sans-serif	Shriftni sans-serif turiga o‘zgartiradi	Sinab ko‘ring
w3-cursive	Shriftni cursive turiga o‘zgartiradi	Sinab ko‘ring
w3-monospace	Shriftni monospace turiga o‘zgartiradi	Sinab ko‘ring
w3-center	Matnni markazga tekislaydi	Sinab ko‘ring

5-versiyadagi yangiliklar

w3-rtl	Matn yo‘nalishini o‘ngdan chapga (rtl) yoziladigan joylashuvga moslaydi	Sinab ko‘ring
w3-ltr	Matn yo‘nalishini chapdan o‘ngga (ltr) yoziladigan joylashuvga moslaydi	Sinab ko‘ring
w3-text-center	Matnni markazga tekislaydi (w3-center bilan bir xil)	Sinab ko‘ring
w3-bold	Shriftni qalin ko‘rinishga o‘zgartiradi	Sinab ko‘ring
w3-text-bold	Shriftni qalin ko‘rinishga o‘zgartiradi (w3-bold bilan bir xil)	Sinab ko‘ring
w3-italic	Shriftni kursiv (italic) ko‘rinishga o‘zgartiradi	Sinab ko‘ring
w3-text-italic	Shriftni kursiv (italic) ko‘rinishga o‘zgartiradi (w3-italic bilan bir xil)	Sinab ko‘ring

Display klasslari

Klass	Vazifasi
w3-center	Markazlashtirilgan kontent	Sinab ko‘ring
w3-left	Elementni chapga suradi (float: left)	Sinab ko‘ring
w3-right	Elementni o‘ngga suradi (float: right)	Sinab ko‘ring
w3-left-align	Chapga tekislangan matn	Sinab ko‘ring
w3-right-align	O‘ngga tekislangan matn	Sinab ko‘ring
w3-justify	Ikki tomonga (o‘ng va chap chetga) tekislangan matn	Sinab ko‘ring
w3-block	Istalgan element uchun to‘liq kenglikni belgilashda ishlatilishi mumkin bo‘lgan klass	Sinab ko‘ring
w3-circle	Doira shaklidagi kontent	Sinab ko‘ring
w3-hide	Yashirilgan kontent (display:none)	Sinab ko‘ring
w3-show	Kontentni ko‘rsatadi (display:block)	Sinab ko‘ring
w3-show-block	w3-show klassining muqobil nomi (display:block)	Sinab ko‘ring
w3-show-inline-block	Kontentni inline-block sifatida ko‘rsatadi (display:inline-block)	Sinab ko‘ring
w3-top	Sahifaning yuqori qismiga mahkamlangan kontent	Sinab ko‘ring
w3-bottom	Sahifaning pastki qismiga mahkamlangan kontent	Sinab ko‘ring
w3-display-container	w3-display-klasslari uchun konteyner (position: relative)	Sinab ko‘ring
w3-display-topleft	Kontentni w3-display-container ning yuqori chap burchagida ko‘rsatadi	Sinab ko‘ring
w3-display-topright	Kontentni w3-display-container ning yuqori o‘ng burchagida ko‘rsatadi	Sinab ko‘ring
w3-display-bottomleft	Kontentni w3-display-container ning pastki chap burchagida ko‘rsatadi	Sinab ko‘ring
w3-display-bottomright	Kontentni w3-display-container ning pastki o‘ng burchagida ko‘rsatadi	Sinab ko‘ring
w3-display-left	Kontentni w3-display-container ning chap tomonida (chap o‘rtada) ko‘rsatadi	Sinab ko‘ring
w3-display-right	Kontentni w3-display-container ning o‘ng tomonida (o‘ng o‘rtada) ko‘rsatadi	Sinab ko‘ring
w3-display-middle	Kontentni w3-display-container ning o‘rtasida (markazida) ko‘rsatadi	Sinab ko‘ring
w3-display-topmiddle	Kontentni w3-display-container ning yuqori o‘rta qismida ko‘rsatadi	Sinab ko‘ring
w3-display-bottommiddle	Kontentni w3-display-container ning pastki o‘rta qismida ko‘rsatadi	Sinab ko‘ring
w3-display-position	Kontentni w3-display-container ichida belgilangan joyda ko‘rsatadi	Sinab ko‘ring
w3-display-hover	w3-display-container ichidagi kontentni sichqoncha ustiga kelganda ko‘rsatadi	Sinab ko‘ring

Effekt klasslari

Klass	Vazifasi
w3-opacity	Elementga shaffoflik qo‘shadi (opacity: 0.6)	Sinab ko‘ring
	Matnga shaffoflik qo‘shadi	Sinab ko‘ring
w3-opacity-off	Shaffoflikni o‘chiradi (opacity: 1)	Sinab ko‘ring
w3-opacity-min	Elementga shaffoflik qo‘shadi (opacity: 0.75)	Sinab ko‘ring
w3-opacity-max	Elementga shaffoflik qo‘shadi (opacity: 0.25)	Sinab ko‘ring
w3-grayscale-min	Elementga kulrang tus (grayscale) effektini qo‘shadi (grayscale: 50%)	Sinab ko‘ring
w3-grayscale	Elementga kulrang tus (grayscale) effektini qo‘shadi (grayscale: 75%)	Sinab ko‘ring
w3-grayscale-max	Elementga kulrang tus (grayscale) effektini qo‘shadi (grayscale: 100%)	Sinab ko‘ring
w3-sepia-min	Elementga sepiya effektini qo‘shadi (sepia: 50%)	Sinab ko‘ring
w3-sepia	Elementga sepiya effektini qo‘shadi (sepia: 75%)	Sinab ko‘ring
w3-sepia-max	Elementga sepiya effektini qo‘shadi (sepia: 100%)	Sinab ko‘ring
w3-overlay	Ustki qatlam (overlay) effektini yaratadi	Sinab ko‘ring

Fon rangi klasslari

Red

w3-red

Pink

w3-pink

Purple

w3-purple

Deep Purple

w3-deep-purple

Indigo

w3-indigo

Cobalt

w3-cobalt

Blue

w3-blue

Light Blue

w3-light-blue

Cyan

w3-cyan

Aqua

w3-aqua

Teal

w3-teal

Emerald

w3-emerald

Green

w3-green

Light Green

w3-light-green

Lime

w3-lime

Khaki

w3-khaki

Yellow

w3-yellow

Amber

w3-amber

Orange

w3-orange

Deep Orange

w3-deep-orange

Blue Gray

w3-blue-gray

Olive

w3-olive

Taupe

w3-taupe

Sienna

w3-sienna

Brown

w3-brown

Crimson

w3-crimson

Sand

w3-sand

White

w3-white

Paper

w3-paper

Light Gray

w3-light-gray

Gray

w3-gray

Dark Gray

w3-dark-gray

Asphalt

w3-asphalt

Black

w3-black

Pale Red

w3-pale-red

Pale Yellow

w3-pale-yellow

Pale Green

w3-pale-green

Pale Blue

w3-pale-blue

XAVF

Qizil rang ko‘pincha xavfli yoki salbiy vaziyatni bildiradi.

w3-danger

OGOHLANTIRISH

To‘q sariq rang ko‘pincha e’tibor talab qilishi mumkin bo‘lgan ogohlantirishni bildiradi.

w3-warning

MUVAFFAQIYAT

Yashil rang ko‘pincha muvaffaqiyatli yoki ijobiy holatni bildiradi.

w3-success

Ma’lumot

Ko‘k rang ko‘pincha neytral, axborot xarakteridagi o‘zgarish yoki harakatni bildiradi.

w3-info

Eslatma

Sariq rang ko‘pincha bildirishnomalar uchun ishlatiladi.

w3-danger, w3-warning, w3-success, w3-info va w3-note — W3.CSS 5.0 versiyasida qo‘shilgan yangi klasslar.

w3-note

Transparent

w3-transparent

Hover rang klasslari

Yuqoridagi ranglardan hover klasslari sifatida ham foydalanish mumkin:

Klass	Vazifasi
w3-hover-white	Hover rangi: oq	Sinab ko‘ring
w3-hover-black	Hover rangi: qora	Sinab ko‘ring
w3-hover-red	Hover rangi: qizil	Sinab ko‘ring
w3-hover-blue	Hover rangi: ko‘k	Sinab ko‘ring
w3-hover-green	Hover rangi: yashil	Sinab ko‘ring
w3-hover-aqua	Hover rangi: och moviy (aqua)	Sinab ko‘ring
w3-hover-orange	Hover rangi: to‘q sariq	Sinab ko‘ring
w3-hover-grey	Hover rangi: kulrang	Sinab ko‘ring
w3-hover-pale-green	Hover rangi: rangpar yashil (pale green)	Sinab ko‘ring

Matn rangi klasslari

Klass	Vazifasi
w3-text-red	Matn rangi: qizil	Sinab ko‘ring
w3-text-green	Matn rangi: yashil	Sinab ko‘ring
w3-text-blue	Matn rangi: ko‘k	Sinab ko‘ring
w3-text-yellow	Matn rangi: sariq	Sinab ko‘ring
w3-text-light-grey	Matn rangi: och kulrang	Sinab ko‘ring
w3-text-grey	Matn rangi: kulrang	Sinab ko‘ring
w3-text-dark-grey	Matn rangi: to‘q kulrang	Sinab ko‘ring
w3-text-black	Matn rangi: qora	Sinab ko‘ring
w3-text-white	Matn rangi: oq	Sinab ko‘ring
w3-text-pink	Matn rangi: pushti	Sinab ko‘ring
w3-text-purple	Matn rangi: binafsha	Sinab ko‘ring
w3-text-teal	Matn rangi: ko‘kimtir yashil (teal)	Sinab ko‘ring
w3-text-light-green	Matn rangi: och yashil	Sinab ko‘ring
w3-text-lime	Matn rangi: sarg‘ish yashil (lime)	Sinab ko‘ring
w3-text-deep-purple	Matn rangi: to‘q binafsha	Sinab ko‘ring
w3-text-indigo	Matn rangi: to‘q ko‘k (indigo)	Sinab ko‘ring
w3-text-light-blue	Matn rangi: och ko‘k	Sinab ko‘ring
w3-text-blue-grey	Matn rangi: ko‘kish kulrang	Sinab ko‘ring
w3-text-cyan	Matn rangi: moviy (cyan)	Sinab ko‘ring
w3-text-aqua	Matn rangi: och moviy (aqua)	Sinab ko‘ring
w3-text-amber	Matn rangi: qahrabo rang (amber)	Sinab ko‘ring
w3-text-orange	Matn rangi: to‘q sariq	Sinab ko‘ring
w3-text-deep-orange	Matn rangi: qizg‘ish to‘q sariq (deep orange)	Sinab ko‘ring
w3-text-sand	Matn rangi: qum rang (sand)	Sinab ko‘ring
w3-text-khaki	Matn rangi: xaki	Sinab ko‘ring
w3-text-brown	Matn rangi: jigarrang	Sinab ko‘ring

Hover matn klasslari

Yuqoridagi matn klasslaridan hover klasslari sifatida ham foydalanish mumkin:

Klass	Vazifasi
w3-hover-text-red	Hover matn rangi: qizil	Sinab ko‘ring
w3-hover-text-green	Hover matn rangi: yashil	Sinab ko‘ring
w3-hover-text-blue	Hover matn rangi: ko‘k	Sinab ko‘ring
w3-hover-text-yellow	Hover matn rangi: sariq	Sinab ko‘ring

Boshqa hover klasslari

Klass	Vazifasi
w3-hover-border-color	Hover chegara rangi	Sinab ko‘ring
w3-hover-opacity	Sichqoncha ustiga kelganda elementga shaffoflik qo‘shadi (opacity: 0.6)	Sinab ko‘ring
w3-hover-opacity-off	Sichqoncha ustiga kelganda elementdagi shaffoflikni olib tashlaydi (100% opacity)	Sinab ko‘ring
w3-hover-shadow	Sichqoncha ustiga kelganda elementga soya qo‘shadi	Sinab ko‘ring
w3-hover-grayscale	Elementga oq-qora (100% grayscale) effektini qo‘shadi	Sinab ko‘ring
w3-hover-sepia	Sichqoncha ustiga kelganda elementga sepiya effektini qo‘shadi	Sinab ko‘ring
w3-hover-none	Elementdan hover effektlarini olib tashlaydi	Sinab ko‘ring

Round klasslari

Klass	Vazifasi
w3-round	Burchaklari 4px ga yumaloqlangan element (border-radius)	Sinab ko‘ring
w3-round-small	Burchaklari 2px ga yumaloqlangan element (border-radius)	Sinab ko‘ring
w3-round-medium	Burchaklari 4px ga yumaloqlangan element (border-radius)	Sinab ko‘ring
w3-round-large	Burchaklari 8px ga yumaloqlangan element (border-radius)	Sinab ko‘ring
w3-round-xlarge	Burchaklari 16px ga yumaloqlangan element (border-radius)	Sinab ko‘ring
w3-round-xxlarge	Burchaklari 32px ga yumaloqlangan element (border-radius)	Sinab ko‘ring

Ichki bo‘shliq (padding) klasslari

Klass	Vazifasi
w3-padding-small	Yuqori va pastdan 4px, chap va o‘ngdan 8px ichki bo‘shliq (padding).	Sinab ko‘ring
w3-padding	Yuqori va pastdan 8px, chap va o‘ngdan 16px ichki bo‘shliq (padding).	Sinab ko‘ring
w3-padding-large	Yuqori va pastdan 12px, chap va o‘ngdan 24px ichki bo‘shliq (padding).	Sinab ko‘ring
w3-padding-16	Yuqori va pastdan 16px ichki bo‘shliq	Sinab ko‘ring
w3-padding-24	Yuqori va pastdan 24px ichki bo‘shliq	Sinab ko‘ring
w3-padding-32	Yuqori va pastdan 32px ichki bo‘shliq	Sinab ko‘ring
w3-padding-48	Yuqori va pastdan 48px ichki bo‘shliq	Sinab ko‘ring
w3-padding-64	Yuqori va pastdan 64px ichki bo‘shliq	Sinab ko‘ring
w3-padding-top-64	Yuqoridan 64px ichki bo‘shliq	Sinab ko‘ring
w3-padding-top-48	Yuqoridan 48px ichki bo‘shliq	Sinab ko‘ring
w3-padding-top-32	Yuqoridan 32px ichki bo‘shliq	Sinab ko‘ring
w3-padding-top-24	Yuqoridan 24px ichki bo‘shliq	Sinab ko‘ring

Margin klasslari

Klass	Vazifasi
w3-margin	Elementga 16px tashqi bo‘shliq (margin) qo‘shadi	Sinab ko‘ring
w3-margin-top	Elementga yuqoridan 16px tashqi bo‘shliq qo‘shadi	Sinab ko‘ring
w3-margin-right	Elementga o‘ngdan 16px tashqi bo‘shliq qo‘shadi	Sinab ko‘ring
w3-margin-bottom	Elementga pastdan 16px tashqi bo‘shliq qo‘shadi	Sinab ko‘ring
w3-margin-left	Elementga chapdan 16px tashqi bo‘shliq qo‘shadi	Sinab ko‘ring
w3-section	Elementga yuqori va pastdan 16px tashqi bo‘shliq qo‘shadi	Sinab ko‘ring

Chegara klasslari

Klass	Vazifasi
w3-border	Chegaralar (yuqori, o‘ng, pastki, chap)	Sinab ko‘ring
w3-border-top	Yuqori chegara	Sinab ko‘ring
w3-border-right	O‘ng chegara	Sinab ko‘ring
w3-border-bottom	Pastki chegara	Sinab ko‘ring
w3-border-left	Chap chegara	Sinab ko‘ring
w3-border-0	Barcha chegaralarni olib tashlaydi	Sinab ko‘ring
w3-border-color	Belgilangan barcha chegaralarni ko‘rsatilgan rangda (masalan, qizil va h.k.) aks ettiradi	Sinab ko‘ring
w3-bottombar	Elementga qalin pastki chegara (chiziq) qo‘shadi	Sinab ko‘ring
w3-leftbar	Elementga qalin chap chegara (chiziq) qo‘shadi	Sinab ko‘ring
w3-rightbar	Elementga qalin o‘ng chegara (chiziq) qo‘shadi	Sinab ko‘ring
w3-topbar	Elementga qalin yuqori chegara (chiziq) qo‘shadi	Sinab ko‘ring
w3-hover-border-color	Sichqoncha ustiga kelganda o‘zgaradigan chegara rangi	Sinab ko‘ring

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish