1. Asosiy CSS xossalari

Oldingi darsda CSS sintaksisini o'rgandik. Endi eng ko'p ishlatiladigan xossalar bilan tanishamiz:

• color — matn rangi.
• background-color — fon rangi.
• text-align — matn joylashuvi (left, center, right).
• text-decoration — chiziq (underline, none, line-through).
• font-family — shrift turi (sans-serif, serif, monospace).

1h1 {
2  color: #1e40af;
3  background-color: #fef3c7;
4  text-align: center;
5  text-decoration: underline;
6  font-family: sans-serif;
7}

2. <div> — universal konteyner

<div> — bu «quti». Uning o'z ma'nosi yo'q, lekin elementlarni birga saqlash va ularga stil berish uchun juda qulay. Veb-saytlarning deyarli hamma joyida <div> ishlatiladi.

1<div class="karta">
2  <h2>Mahsulot</h2>
3  <p>Narxi: 150 000 so'm</p>
4</div>

1.karta {
2  background-color: #f3f4f6;
3  padding: 16px;
4  color: #111;
5}

3. Balandlik — height

height — elementning balandligi. px (piksel), % (foiz) yoki vh (oynaning balandligi) bilan beriladi.

1.quti {
2  height: 200px;      /* qat'iy balandlik */
3  min-height: 100px;  /* eng kam balandlik */
4  max-height: 500px;  /* eng katta balandlik */
5}

• height — aniq balandlik.
• min-height — element shu balandlikdan kichik bo'lmaydi.
• max-height — element shu balandlikdan katta bo'lmaydi.

4. Kenglik — width

Kenglik xuddi balandlik kabi ishlaydi. Lekin ko'proq ishlatiladi:

1.konteyner {
2  width: 80%;
3  max-width: 1200px;  /* katta ekranda cheklash */
4  min-width: 320px;   /* kichik ekranda cheklash */
5}

5. Chegara — border va border-radius

border — elementni atrofidagi chiziq. 3 qism: qalinlik, turi va rangi.

1.quti {
2  border: 2px solid #000;
3}
4
5/* Alohida yozish ham mumkin: */
6.karta {
7  border-width: 1px;
8  border-style: dashed;  /* solid, dashed, dotted, double */
9  border-color: #e5e7eb;
10}

border-radius — burchaklar

Burchaklarni yumshatish uchun border-radius ishlatiladi. Qiymat qancha katta bo'lsa, shuncha yumaloq bo'ladi. 50% — to'liq doira.

1.yumshoq { border-radius: 8px; }
2.yumaloq { border-radius: 50%; }
3.faqat-yuqori {
4  border-radius: 12px 12px 0 0; /* yuqori chap, yuqori o'ng, past o'ng, past chap */
5}

6. Outline — tashqi chiziq

outline — borderga o'xshaydi, lekin TASHQARIDA chiziladi va elementning o'lchamiga ta'sir qilmaydi. Ko'pincha focus holati uchun ishlatiladi (masalan, inputni bosganda).

1input:focus {
2  outline: 2px solid #3b82f6;
3  outline-offset: 2px;
4}