CSS

CSS — web sahifalarning tashqi ko‘rinishini boshqarish uchun ishlatiladigan uslublash tili. CSS inglizcha Cascading Style Sheets so‘zlarining qisqartmasi bo‘lib, HTML elementlariga rang, shrift, joylashuv, o‘lcham, masofa, animatsiya va boshqa vizual xususiyatlar berish uchun ishlatiladi.

HTML sahifa tuzilmasini belgilasa, CSS shu tuzilmaning qanday ko‘rinishini belgilaydi. Masalan, sarlavha rangi, tugma shakli, kartalar joylashuvi, sahifa foni va mobil ko‘rinish CSS orqali yaratiladi.

Vazifasi

CSS web sahifani chiroyli, tartibli va foydalanuvchiga qulay ko‘rinishda chiqarish uchun ishlatiladi.

CSS orqali quyidagilar boshqariladi:

• ranglar;
• shriftlar;
• matn o‘lchami;
• element o‘lchami;
• margin va padding;
• sahifa layouti;
• background;
• border;
• hover holatlari;
• animatsiyalar;
• responsive dizayn;
• grid va flex joylashuvlar.

Masalan, HTML’da yaratilgan oddiy tugmaga CSS orqali rang, radius, soya va bosilgandagi effekt berish mumkin.

CSS qanday ishlaydi?

Brauzer HTML hujjatni o‘qigandan keyin CSS qoidalarini ham yuklaydi. CSS qoidalari HTML elementlariga qo‘llanadi va brauzer sahifani shu ko‘rinishda chizadi.

Oddiy jarayon:

• brauzer HTML faylni yuklaydi;
• CSS fayl yoki style qoidalarini o‘qiydi;
• qaysi qoida qaysi elementga tegishli ekanini aniqlaydi;
• elementlarga rang, o‘lcham, joylashuv va boshqa uslublarni beradi;
• sahifa foydalanuvchiga tayyor ko‘rinishda chiqadi.

CSS qoidalari selector va deklaratsiyalardan tashkil topadi.

CSS qoidasi

CSS qoidasi odatda selector va style deklaratsiyalaridan iborat bo‘ladi.

Misol:

p { color: blue; font-size: 16px; }

Bu yerda:

• p — selector;
• color — xususiyat;
• blue — qiymat;
• font-size — xususiyat;
• 16px — qiymat.

Bu qoida sahifadagi barcha <p> elementlarining matn rangini ko‘k, shrift o‘lchamini esa 16 piksel qiladi.

Selector

Selector — CSS qoidasi qaysi HTML elementlariga qo‘llanishini bildiradi.

Keng ishlatiladigan selectorlar:

• p — barcha paragraf elementlari;
• .card — card classiga ega elementlar;
• #header — header ID’siga ega element;
• div p — div ichidagi paragraf;
• button:hover — tugma ustiga sichqoncha borgandagi holat;
• input[type="text"] — type qiymati text bo‘lgan inputlar.

Selector CSS’da elementlarni aniq tanlash uchun ishlatiladi.

Class

Class — HTML elementlarga umumiy nom berish va CSS orqali uslub berish uchun ishlatiladi.

Misol:

<div class="card">Mahsulot</div>

CSS’da:

.card { border: 1px solid #ddd; padding: 16px; }

Class bir nechta elementda ishlatilishi mumkin. Masalan, sahifadagi barcha mahsulot kartalariga bitta card classi berilishi mumkin.

ID

ID — HTML elementni yagona aniqlash uchun ishlatiladigan atribut. CSS’da ID # belgisi bilan tanlanadi.

Misol:

<header id="main-header">Header</header>

CSS’da:

#main-header { height: 80px; }

ID odatda sahifadagi bitta maxsus element uchun ishlatiladi. Bir xil ID’ni bir sahifada bir necha marta ishlatish to‘g‘ri hisoblanmaydi.

CSS ulash usullari

CSS HTML sahifaga bir nechta usulda ulanadi.

Asosiy ulash usullari:

• Inline CSS — style atributi orqali element ichida yoziladi;
• Internal CSS — HTML fayl ichidagi <style> tagida yoziladi;
• External CSS — alohida .css faylda yoziladi va HTML’ga ulanadi.

External CSS katta loyihalarda eng ko‘p ishlatiladi, chunki uslublarni alohida faylda tartibli saqlash imkonini beradi.

Color

CSS’da ranglar turli ko‘rinishda berilishi mumkin.

Rang yozish usullari:

• nom bilan: red, blue, black;
• HEX bilan: #ffffff;
• RGB bilan: rgb(255, 255, 255);
• RGBA bilan: rgba(0, 0, 0, 0.5);
• HSL bilan: hsl(0, 100%, 50%).

Ranglar matn, fon, border, soya va boshqa element ko‘rinishlarida ishlatiladi.

Font

CSS matn ko‘rinishini boshqaradi. Shrift turi, o‘lchami, qalinligi va qator balandligi CSS orqali belgilanadi.

Matn bilan ishlashda ko‘p ishlatiladigan xususiyatlar:

• font-family;
• font-size;
• font-weight;
• line-height;
• letter-spacing;
• text-align;
• text-decoration;
• text-transform.

Masalan, maqola matnining o‘qilishi qulay bo‘lishi uchun font-size va line-height to‘g‘ri tanlanadi.

Box model

Box model — HTML elementlarining sahifada joy egallash tartibini tushuntiradigan model. Har bir element quti sifatida qaraladi.

Box model qismlari:

• content — element ichidagi asosiy kontent;
• padding — kontent va border orasidagi ichki masofa;
• border — element chegarasi;
• margin — element tashqarisidagi masofa.

Masalan, karta ichidagi matn bilan karta cheti orasidagi bo‘shliq padding, kartalar orasidagi masofa esa margin orqali beriladi.

Margin

Margin — element tashqarisidagi bo‘sh joy. U elementlar orasidagi masofani belgilaydi.

Misol:

margin: 20px;

Margin quyidagi yo‘nalishlarda berilishi mumkin:

• margin-top;
• margin-right;
• margin-bottom;
• margin-left.

Margin sahifadagi elementlarni bir-biridan ajratish uchun ishlatiladi.

Padding

Padding — element ichidagi bo‘sh joy. U kontent va element chegarasi orasidagi masofani belgilaydi.

Misol:

padding: 16px;

Padding quyidagi joylarda ko‘p ishlatiladi:

• tugmalar;
• kartalar;
• inputlar;
• modal oynalar;
• sectionlar;
• menyu elementlari.

Padding element ichidagi kontentni siqilib qolishdan saqlaydi.

Border

Border — element atrofidagi chegara chizig‘i.

Misol:

border: 1px solid #ddd;

Border bilan bog‘liq xususiyatlar:

• border-width;
• border-style;
• border-color;
• border-radius.

border-radius element burchaklarini yumaloqlash uchun ishlatiladi.

Background

CSS’da element foni background xususiyatlari orqali belgilanadi.

Background orqali quyidagilar berilishi mumkin:

• fon rangi;
• fon rasmi;
• gradient;
• rasm takrorlanishi;
• rasm joylashuvi;
• rasm o‘lchami.

Misol:

background-color: #f5f5f5;

Background sahifa, section, karta, button va boshqa elementlarda ishlatiladi.

Display

Display — element sahifada qanday ko‘rinishda joylashishini bildiradi.

Keng ishlatiladigan display qiymatlari:

• block;
• inline;
• inline-block;
• flex;
• grid;
• none.

Masalan, display: none; elementni sahifadan yashiradi. display: flex; esa element ichidagi bolalarni flex layout asosida joylashtiradi.

Flexbox

Flexbox — elementlarni bir yo‘nalishda qulay joylashtirish uchun ishlatiladigan CSS layout tizimi.

Flexbox quyidagi holatlarda ishlatiladi:

• elementlarni yonma-yon joylashtirish;
• markazga tekislash;
• tugmalar qatorini tuzish;
• header layout yaratish;
• kartalarni tartiblash;
• responsive elementlar yaratish.

Keng ishlatiladigan flex xususiyatlari:

• display: flex;
• justify-content;
• align-items;
• gap;
• flex-direction;
• flex-wrap.

Grid

CSS Grid — sahifani ikki o‘lchamli qator va ustunlar asosida joylashtirish uchun ishlatiladi.

Grid quyidagi holatlarda qo‘llanadi:

• kartalar panjarasi;
• dashboard layout;
• galereya;
• mahsulotlar ro‘yxati;
• sahifa bo‘limlari;
• murakkab responsive layout.

Keng ishlatiladigan grid xususiyatlari:

• display: grid;
• grid-template-columns;
• grid-template-rows;
• gap;
• grid-column;
• grid-row.

Grid katta sahifa tuzilmalarini tartibli joylashtirishda qulay.

Position

Position — elementning sahifadagi joylashuv usulini belgilaydi.

Position qiymatlari:

• static — odatiy joylashuv;
• relative — o‘z joyiga nisbatan siljish;
• absolute — yaqin joylashgan positioned parentga nisbatan joylashish;
• fixed — viewportga nisbatan qotirilgan joylashuv;
• sticky — scroll holatiga qarab yopishib turish.

Masalan, yuqorida qotib turadigan navbar uchun position: sticky yoki fixed ishlatilishi mumkin.

Z-index

Z-index — elementlarning ustma-ust joylashish tartibini belgilaydi. Z-index yuqori bo‘lgan element pastroq qiymatga ega element ustida ko‘rinadi.

Z-index odatda quyidagi elementlarda ishlatiladi:

• modal oyna;
• dropdown;
• tooltip;
• fixed header;
• overlay;
• sidebar;
• popup.

Z-index faqat position bilan bog‘liq kontekstlarda to‘g‘ri ishlaydi.

Responsive dizayn

Responsive dizayn CSS yordamida sahifaning turli ekran o‘lchamlariga moslashishini ta’minlaydi.

Responsive dizaynda ishlatiladigan vositalar:

• media query;
• flexbox;
• grid;
• foizli o‘lchamlar;
• max-width;
• min-width;
• responsive font;
• responsive image;
• mobile-first yondashuv.

Masalan, desktopda uch ustunli karta layout mobil ekranda bitta ustun bo‘lib chiqishi mumkin.

Media query

Media query — ekran o‘lchami, qurilma turi yoki boshqa shartlarga qarab CSS qoidalarini qo‘llash imkonini beradi.

Misol:

@media (max-width: 768px) { .card { width: 100%; } }

Media query quyidagi holatlarda ishlatiladi:

• mobil dizayn;
• planshet dizayn;
• desktop dizayn;
• dark mode;
• print style;
• ekran kengligiga mos layout.

Media query responsive dizaynning asosiy vositalaridan biridir.

Animation

CSS animatsiyalar elementlar harakatini yaratish uchun ishlatiladi.

Animatsiyada quyidagilar ishlatiladi:

• transition;
• transform;
• animation;
• @keyframes;
• opacity;
• scale;
• rotate;
• translate.

Masalan, tugma ustiga sichqoncha borganda rangi o‘zgarishi transition orqali silliq ko‘rinadi.

Hover

Hover — foydalanuvchi sichqonchani element ustiga olib borgandagi holat. CSS’da :hover pseudo-class orqali yoziladi.

Misol:

button:hover { background-color: black; }

Hover quyidagi elementlarda ishlatiladi:

• tugmalar;
• havolalar;
• kartalar;
• menyular;
• ikonlar;
• rasmlar;
• dropdownlar.

Hover foydalanuvchi harakatiga vizual javob berishga yordam beradi.

CSS o‘lchov birliklari

CSS’da element o‘lchami turli birliklar orqali beriladi.

Keng ishlatiladigan birliklar:

• px — piksel;
• % — foiz;
• em — parent elementga nisbatan;
• rem — root font o‘lchamiga nisbatan;
• vh — viewport balandligi;
• vw — viewport kengligi;
• fr — grid ichidagi ulush.

Masalan, max-width: 1200px; sahifa kengligini cheklash uchun ishlatiladi.

CSS variable

CSS variable — CSS ichida qayta ishlatiladigan qiymatlarni saqlash uchun ishlatiladi.

Misol:

:root { --main-color: #2563eb; }

Keyin:

color: var(--main-color);

CSS variable quyidagi qiymatlarda ishlatilishi mumkin:

• ranglar;
• spacing;
• font o‘lchamlari;
• border radius;
• shadow;
• layout o‘lchamlari.

Variable dizayn tizimlarini boshqarishda foydali.

CSS frameworklar

CSS frameworklar tayyor classlar, componentlar va layout tizimlarini beradi.

Mashhur CSS frameworklar:

• Bootstrap;
• Tailwind CSS;
• Bulma;
• Foundation;
• Materialize;
• UIkit.

Bootstrap tayyor componentlarga asoslanadi. Tailwind CSS esa utility classlar orqali dizayn yaratish yondashuvini qo‘llaydi.

CSS va HTML

HTML sahifa tuzilmasini belgilaydi, CSS esa shu sahifaning ko‘rinishini boshqaradi.

Farqlar:

• HTML — kontent va tuzilma;
• CSS — dizayn va uslub;
• HTML sarlavha, matn, rasm va formani yaratadi;
• CSS rang, masofa, joylashuv va animatsiyani belgilaydi.

Masalan, HTML <button> elementi tugma yaratadi, CSS esa uning rangi, o‘lchami va shaklini o‘zgartiradi.

CSS va JavaScript

CSS sahifa ko‘rinishini boshqaradi, JavaScript esa sahifaga interaktivlik qo‘shadi.

JavaScript CSS bilan quyidagi tarzda ishlashi mumkin:

• class qo‘shish;
• class olib tashlash;
• inline style o‘zgartirish;
• dark mode yoqish;
• modal ochish;
• animatsiya holatini boshqarish;
• formadagi xatolik classini qo‘shish.

Masalan, foydalanuvchi menyu tugmasini bossa, JavaScript menyuga open classini qo‘shadi, CSS esa menyuni ko‘rsatadi.

Dasturlashdagi o‘rni

CSS frontend dasturlashning asosiy texnologiyalaridan biridir. Har qanday web sahifa yoki web ilova ko‘rinishi CSS orqali shakllanadi.

CSS quyidagi joylarda ishlatiladi:

• landing page;
• internet do‘kon;
• blog;
• admin panel;
• dashboard;
• portfolio;
• web ilova;
• mobilga mos sahifa;
• component dizayni;
• email template.

CSS HTML va JavaScript bilan birga web interfeyslarning asosini tashkil qiladi.

Bog‘liq tushunchalar

HTML, JavaScript, Frontend, Responsive dizayn, UI, UX, Browser, DOM, Tailwind CSS, Bootstrap, Flexbox, Grid