CSS matn bezagi: text-decoration, text-transform, text-shadow va gradient matn

Qisqacha: Havola tagidagi chiziqning qalinligi, matndan masofasi va rangini text-decoration-* va text-underline-offset boshqaradi. text-transform: uppercase matnni katta harflarda ko'rsatadi, HTML'da esa matn oddiy yoziladi; text-shadow soya, -webkit-text-stroke kontur beradi. Gradient matn — background-clip: text va shaffof rang; u Baseline emas, shuning uchun zaxira rang kerak.

Bu darsda

• Havola chizig'ini qalinligi, masofasi va rangi bilan sozlaysiz, text-decoration tuzoqlarini bilasiz.
• text-transform ni ishlatasiz va nega HTML'da katta harf yozmaslikni tushuntirasiz.
• text-shadow va -webkit-text-stroke bilan sarlavhani bezaysiz, kontrastni saqlab.
• Gradient matn yozasiz va u ishlamaydigan brauzer uchun zaxira qoldirasiz.
• initial-letter, hanging-punctuation va font-style: oblique holatini bilasiz.

Oldin bilishingiz kerak: Shrift asoslari, Gradientlar, Fonlar, Qator balandligi va harf oralig'i.

1. Nega bu kerak?

«Bahor» saytining bosh sahifasi. Paragraf ichida "menyu" havolasi bor. Brauzer uning tagiga ingichka chiziq chizgan va chiziq "y" harfining dumini kesib o'tadi. Aksiya e'lonida eski narx chizilgan, lekin chiziq matn rangida, sezilmaydi. Sarlavha esa rasmli fon ustida o'qilmaydi.

Bularning hammasi — matnning o'zini emas, uning bezagini o'zgartirish. Xuddi do'ppiga naqsh tikishga o'xshaydi: do'ppi o'sha, lekin ko'rinishi boshqa. Bu darsda matn bezagining besh vositasini ko'ramiz: chiziqlar, registr (katta-kichik harf), soya, kontur va gradient.

2. text-decoration — matn chiziqlari

2.1 To'rt qism

text-decoration — matn tagidagi, ustidagi yoki ustidan o'tadigan chiziq. U qisqa yozuv, ichida to'rt qism bor:

Brauzer havolaga text-decoration: underline beradi. Meros darsida text-decoration: none bilan chiziqni olib tashlagan edik. Endi uni o'chirmasdan, chiroyli qilamiz.

2.2 Chiziqni sozlash: qalinlik, masofa va dumlar

Yana ikki xususiyat bor, ular qisqa yozuvga kirmaydi:

• text-underline-offset — tag chizig'i matndan qancha pastda. em da yozing — shrift bilan birga o'sadi.
• text-decoration-skip-ink — chiziq "g", "y", "q" kabi harflarning dumiga yetganda uziladi (auto, boshlang'ich) yoki ustidan o'tadi (none).

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 1.5rem;
    margin: 0.5rem 0;
  }
  a { color: #2f6b3a; }
  .dumsiz { text-decoration-skip-ink: none; }
  .sozlangan {
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.2em;
    text-decoration-color: #b4461a;
  }
</style>
<p><a href="menyu/">Bugungi menyu: go'sht, yog'</a></p>
<p><a class="dumsiz" href="menyu/">Bugungi menyu: go'sht, yog'</a></p>
<p><a class="sozlangan" href="menyu/">Bugungi menyu: go'sht,
  yog'</a></p>

Nimaga qarang:

• Birinchi havolada chiziq "g" va "y" dumlariga yetganda uzilgan — bu skip-ink: auto, brauzerning odatiy xulqi.
• Ikkinchisida (none) chiziq dumlarni kesib o'tadi. Harflar o'qilishi qiyinlashadi — shuning uchun auto ni o'zgartirmang.
• Uchinchisida chiziq qalinroq, pastroq va qizg'ish. Matn va chiziq orasida bo'shliq bor — "y" dumi chiziqqa deyarli tegmaydi.

text-decoration-color: #b4461a havola matni emas, faqat chiziq rangini o'zgartirdi. Havola rangi yashil qoldi.

2.3 Tuzoq 1: qisqa yozuv qalinlikni tiklaydi

CSS nima darsidagi qisqa yozuv tuzog'ini eslang. text-decoration ham xuddi shunday:

a {
  text-decoration-thickness: 3px;
  text-decoration: underline; /* ❌ qalinlik auto ga qaytdi */
}

Chrome'da DevTools → Computed'da tekshirdik: qalinlik auto. Qisqa yozuv o'zi ichiga olgan to'rt qismning hammasini qayta yozdi. text-underline-offset esa qisqa yozuvga kirmaydi — u saqlanib qoldi. Tuzatish: avval qisqa yozuv, keyin to'liq yozuvlar.

Qalinlikni qisqa yozuvning o'zida ham yozish mumkin: text-decoration: underline 2px. Lekin Baseline ma'lumotlariga ko'ra, qisqa yozuv ichidagi qalinlik Safari'da faqat yaqinda (2025-yil dekabrdan) ishlay boshladi. Alohida text-decoration-thickness esa ancha oldindan hamma brauzerda bor. Shuning uchun qalinlikni alohida qatorda yozing.

2.4 Tuzoq 2: bola chiziqni o'chira olmaydi

text-decoration meros bo'lmaydi, lekin tarqaladi: ota chizgan chiziq bolalarning ustidan ham o'tadi. Bola text-decoration: none desa ham, otaning chizig'i qoladi:

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 1.5rem;
    margin: 0.5rem 0;
  }
  a { color: #2f6b3a; }
  a span {
    color: #b4461a;
    text-decoration: none;
  }
  p + p a span { display: inline-block; }
</style>
<p><a href="menyu/">❌ Menyu <span>(yangi)</span> sahifasi</a></p>
<p><a href="menyu/">✅ Menyu <span>(yangi)</span> sahifasi</a></p>

Nimaga qarang: birinchi qatorda "(yangi)" ning tagida baribir chiziq bor — u a ning chizig'i. Ikkinchisida span ga display: inline-block berilgan: chiziq unga tarqalmadi. Chrome'da tekshirdik. display darsidagi inline-block — o'z ichki "dunyosi" bor quti, otaning chizig'i unga kirmaydi.

2.5 Eski narx: line-through

Urg'u va ahamiyat teglari darsida eski narxni s tegi bilan yozgan edik: "endi to'g'ri emas, lekin ko'rinib tursin". Brauzer s ga line-through beradi. Chiziq rangini ajratamiz:

<style>
  .aksiya {
    font-family: system-ui, sans-serif;
    font-size: 1.5rem;
    color: #1f2a24;
  }
  .aksiya s {
    color: #5b6660;
    text-decoration-color: #b4461a;
    text-decoration-thickness: 2px;
  }
  .narx { color: #b4461a; font-weight: 700; }
</style>
<p class="aksiya">Osh: <s>40 000 so'm</s>
  <span class="narx">35 000 so'm</span></p>

Nimaga qarang: eski narx kulrang, uning ustidagi chiziq esa qalin va qizg'ish — ko'z darhol "bu narx bekor" deb o'qiydi. Yangi narx yonida qalin va yorqin.

wavy (to'lqinli) chiziq imlo xatosini eslatadi — text-decoration: underline wavy #b4461a bilan "bu so'zda xato bor" ko'rinishini berish mumkin. overline (ustidan chiziq) juda kam kerak bo'ladi.

Diqqat: Havola bo'lmagan matnning tagiga chiziq chizmang. Foydalanuvchi uni havola deb bosadi va hech narsa bo'lmaydi. Aksincha, matn ichidagi havolalardan chiziqni olib tashlamang. WCAG 1.4.1 mezoni havolani faqat rang bilan ajratmaslikni talab qiladi: rangni ajratmaydigan odam chiziqni ko'radi. Menyu kabi joylashuvidan havola ekani aniq bo'lgan joyda esa chiziqsiz ham bo'ladi.

Tekshirib ko'ring: a { text-underline-offset: 0.2em; text-decoration: underline dotted; } — masofa saqlanadimi?

3. text-transform — katta va kichik harflar

3.1 Uch qiymat

text-transform — matnni HTML'ga tegmasdan katta yoki kichik harflarda ko'rsatadi:

• uppercase — hammasi KATTA;
• lowercase — hammasi kichik;
• capitalize — har so'zning birinchi harfi katta;
• none — o'zgarishsiz.

Qator balandligi darsida yangi taom yorlig'ida uppercase ni ishlatgan edik. Endi uni to'liq ko'ramiz — o'zbekcha matnning ikki o'ziga xos joyi bilan:

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 1.25rem;
    margin: 0.5rem 0;
  }
  .katta { text-transform: uppercase; }
  .bosh { text-transform: capitalize; }
</style>
<p class="katta">ish vaqti: g'isht tandir, o'zbek oshi</p>
<p class="bosh">choyxona bog'i va o'zbek oshi</p>
<p class="katta" lang="tr">ish vaqti: ichimliklar</p>

Nimaga qarang:

• Birinchi qator: "ISH VAQTI: G'ISHT TANDIR, O'ZBEK OSHI". "i" oddiy "I" ga aylandi, apostrofli harflar ham to'g'ri.
• Ikkinchi qator: "Bog'i", "O'zbek" — apostrofdan keyingi harf katta bo'lib ketmadi. Chrome'da tekshirdik. Lekin "va" ham "Va" bo'ldi: capitalize so'zlarni farqlamaydi, shuning uchun u sarlavhadan ko'ra ism va nomlar ro'yxatiga mos.
• Uchinchi qator lang="tr": "İSH VAQTİ: İCHİMLİKLAR" — i ustida nuqta qoldi. Turk (va ozarbayjon) tilida "i" ning katta shakli — "İ". Brauzer tilga qarab harf tanlaydi.

Uchinchi qator — lang nega muhimligining yana bir isboti. O'zbekcha sahifada lang="uz" bo'lsa, katta "I" oddiy chiqadi. Tilni turkcha deb belgilab qo'ysangiz, butun sayt "İ" bilan yoziladi.

3.2 Nega HTML'da katta harf yozmaymiz

Kontent accessibility'si darsida qoida bergan edik: katta harf ko'rinishi kerak bo'lsa, matnni oddiy yozing va ko'rinishni CSS bilan o'zgartiring. Nega?

Birinchi sabab — ma'no va ko'rinish ajraladi. "AKSIYA" HTML'da katta harf bilan yozilsa, bu matnning bir qismi bo'lib qoladi. Ertaga dizayner katta harflardan voz kechadi — siz 40 sahifani qo'lda qayta yozasiz. CSS'da esa bitta qatorni o'chirasiz. Qidiruv tizimi, o'qish rejimi va tarjimon ham matnni asl ko'rinishida oladi.

Ikkinchi sabab — o'qish qiyinligi. Katta harfli uzun matnni o'qish qiyin: so'zlarning "shakli" yo'qoladi, hamma harf bir xil balandlikda. MDN ogohlantiradi: bu ayniqsa disleksiyasi bor o'quvchilarga og'ir. Shuning uchun uppercase — faqat qisqa yorliq, tugma yoki kichik sarlavhaga.

Ekran o'quvchi haqida — halol fakt. O'sha darsda "ba'zi ekran o'quvchilar katta harfli qisqa so'zni harfma-harf o'qishi mumkin" degan edik. text-transform bu xavfni to'liq yo'qotmaydi. Chrome'da tekshirdik: brauzer ekran o'quvchiga uzatadigan matnda (accessibility daraxtida) ham so'z katta harflarda — "YANGI TAOM". Matnni belgilab nusxa olsangiz ham, Chrome katta harflarni nusxalaydi. Demak, katta harfli bezakni qisqa va kam ishlating — bu ikkinchi sababni yana bir bor kuchaytiradi.

Maslahat: Katta harfli yorliqqa letter-spacing: 0.05em qo'shing (Qator balandligi). Bosh harflar zich turadi, ozgina oraliq ularni yengillashtiradi.

Tekshirib ko'ring: Menyu sarlavhasi "Issiq taomlar" HTML'da shunday yozilgan. Dizayner uni "ISSIQ TAOMLAR" ko'rinishida xohlaydi. Nima qilasiz?

4. text-shadow — matn soyasi

4.1 Sintaksis

Chegara va soyalar darsidagi box-shadow ni eslang. text-shadow xuddi shunday, lekin qutiga emas, harflarning o'ziga soya beradi:

h1 {
  /* x, y, xiralik, rang */
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.4);
}

• Birinchi son — o'ngga siljish, ikkinchisi — pastga.
• Uchinchisi — xiralik (blur); 0 bo'lsa, soya aniq chegarali.
• box-shadow dan farqi: spread (kengaytirish) va inset yo'q.
• Vergul bilan bir necha soya berish mumkin — birinchisi eng ustida.

4.2 Qachon kerak: rasm ustidagi matn

Soyaning eng foydali ishi — rang-barang fon ustidagi matnni ajratish. «Bahor» bosh sahifasining yuqori qismi, Gradientlar darsidagi fon bilan:

<style>
  header {
    font-family: system-ui, sans-serif;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #2f6b3a, #b4461a);
    color: #fffaf0;
  }
  h1 {
    margin: 0 0 1rem;
    font-size: 2.25rem;
  }
  h1 + h1 {
    text-shadow: 0 2px 6px rgb(0 0 0 / 0.5);
  }
</style>
<header>
  <h1>Choyxona «Bahor»</h1>
  <h1>Choyxona «Bahor»</h1>
</header>

Nimaga qarang: ikkinchi sarlavha fondan "ko'tarilgan" — harflar atrofidagi yumshoq qora soya ularni fondan ajratdi. Farq ayniqsa o'ng tomonda, fon och-qizg'ish bo'lgan joyda seziladi.

Diqqat: Soya yomon kontrastni tuzatmaydi. Kontrast tekshiruvchi vositalar asosan matn va fon rangini solishtiradi. Asos kontrast (Ranglar 1 dagi 4.5:1) soyasiz ham yetarli bo'lsin, soya — faqat qo'shimcha yordam.

4.3 Bir necha soya

Vergul bilan bir necha soya "bo'rtma" yoki "neon" effektini beradi:

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0.5rem 0;
    padding: 0.5rem;
  }
  .bortma {
    color: #fffaf0;
    background-color: #fffaf0;
    text-shadow: 1px 1px 0 #2f6b3a, 2px 2px 0 #2f6b3a,
      3px 3px 0 #2f6b3a;
  }
  .nur {
    color: #fffaf0;
    background-color: #1f2a24;
    text-shadow: 0 0 4px #f6d9a8, 0 0 12px #b4461a;
  }
</style>
<p class="bortma">«Bahor»</p>
<p class="nur">«Bahor»</p>

Nimaga qarang: birinchi yozuvda harf fon bilan bir xil rangda — uni uchta aniq soya "chizib" turibdi. Soyalar pog'ona hosil qildi va harflar hajmli, bo'rtib chiqqandek ko'rinadi. Ikkinchisida ikki xira soya — kichik och-sariq va katta qizg'ish — harflar atrofida nur yaratdi. Bunday bezak faqat katta, qisqa yozuvga: logotip, 404 sahifasi, e'lon. Oddiy matnda u ko'zni charchatadi.

5. -webkit-text-stroke — harf konturi

-webkit-text-stroke harfning chetiga chiziq (kontur) chizadi: qalinlik va rang. Nomidagi -webkit- — prefiks: bir paytlar faqat WebKit (Safari dvigateli) brauzerlarida bo'lgan xususiyat belgisi. Keyin uni hamma brauzer qo'llay boshladi. Baseline ma'lumotiga ko'ra, u 2017-yildan beri to'rt asosiy brauzerda bor — prefiksli bo'lsa ham, Baseline.

<style>
  p {
    font-family: system-ui, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    margin: 0.25rem 0;
  }
  .kontur {
    color: transparent;
    -webkit-text-stroke: 2px #2f6b3a;
  }
  .qalin {
    color: #fffaf0;
    -webkit-text-stroke: 4px #2f6b3a;
  }
  .qalin + .qalin { paint-order: stroke fill; }
</style>
<p class="kontur">«Bahor»</p>
<p class="qalin">«Bahor»</p>
<p class="qalin">«Bahor»</p>

Nimaga qarang:

• Birinchi yozuv — ichi bo'sh, faqat yashil kontur. color: transparent harf ichini shaffof qildi.
• Ikkinchisida kontur qalin (4px) va harf ichiga "yeb kirdi": och-sariq ichi ingichkalashdi. Kontur harf chetining ikki tomoniga teng chiziladi — yarmi ichkariga.
• Uchinchisida paint-order: stroke fill — avval kontur, keyin ustidan harfning o'zi chizildi. Harf ichi to'liq ko'rinadi, kontur faqat tashqarida qoldi.

Ichi bo'sh kontur yozuv — faqat katta bezak uchun. Kichik matnda uni o'qib bo'lmaydi va kontrast tekshiruvidan o'tmaydi.

6. Gradient matn

6.1 background-clip: text

Fonlar darsida background-clip: text ni tilga olgan edik: fon faqat harflar ichiga chiziladi. Gradientlar darsidagi gradient bilan birga — gradient matn:

<style>
  h1 {
    font-family: system-ui, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    width: fit-content;
    color: #2f6b3a;
    background-image: linear-gradient(90deg, #2f6b3a, #b4461a);
    background-clip: text;
    color: transparent;
  }
</style>
<h1>Choyxona «Bahor»</h1>

Nimaga qarang: sarlavha chapdan o'ngga yashildan qizg'ishga o'tadi. Uch qadam:

1. background-image — gradient fon.
2. background-clip: text — fonni harflar shakliga qirqish.
3. color: transparent — harfning o'z rangi shaffof, orqasidagi gradient ko'rinadi.

width: fit-content nega kerak? h1 — blok, u butun qator eniga cho'ziladi va gradient ham shu enga yoyiladi. Matn qisqa bo'lsa, unga gradientning faqat chap, yashil qismi tushadi. fit-content (O'lchamlar) qutini matn eniga toraytiradi — gradient aynan harflar ustida boshlanib, tugaydi.

6.2 Zaxira: ko'rinmas matn xavfi

Baseline ma'lumotiga ko'ra, background-clip: text Baseline emas: u Chrome, Edge va Safari'da bor. Fonlar darsida aytganimizdek, MDN Firefox'da uni "qisman" deydi.

Xavf shunda: brauzer background-clip: text ni tushunmasa, lekin color: transparent ni tushunsa — matn butunlay yo'qoladi. Gradient esa butun quti foniga chiziladi:

flowchart TD
  A["Brauzer background-clip:<br/>text ni biladimi?"] -->|ha| B["Fon harf shaklida qirqiladi"]
  B --> C["Gradient matn ✓"]
  A -->|yo'q| D["Gradient butun qutiga chiziladi"]
  D --> E["color: transparent —<br/>harf ko'rinmaydi ✗"]

Nimaga qarang: xavf "yo'q" tarmog'ida — xato chiqmaydi, sarlavha shunchaki yo'qoladi. Yuqoridagi kodda shuning uchun color ikki marta yozilgan:

• birinchi color: #2f6b3a — zaxira;
• ikkinchi color: transparent — gradient uchun.

Bu yetarli emas: eski brauzer ikkinchi color ni ham tushunadi. To'liq himoya — "brauzer background-clip: text ni bilsagina" sharti bilan yozish. Buni @supports bilan Brauzer mosligi darsida o'rganamiz. Hozircha qoida: gradient matnni faqat sarlavha kabi bezakka bering va uni Firefox'da ham ochib tekshiring.

Diqqat: Gradientning eng och joyi ham fonga nisbatan 4.5:1 kontrastdan o'tsin. Kontrast vositalari gradient matnni tekshira olmaydi — buni o'zingiz qilasiz: gradientning har ikki uchidagi rangni fon bilan alohida solishtiring.

Tekshirib ko'ring: Gradient matnli sarlavhadan color: transparent qatorini o'chirsangiz nima bo'ladi?

7. Kitob uslubidagi detallar

7.1 ::first-letter va initial-letter

Pseudo-elementlar darsida ::first-letter bilan paragrafning birinchi harfini kattalashtirgan edik. Lekin katta harf faqat birinchi qatorni balandlashtirdi. Kitobdagi "tushgan bosh harf" (drop cap) esa bir necha qatorga cho'kib turadi. Buni initial-letter qiladi:

<style>
  p {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    max-width: 24rem;
  }
  p::first-letter {
    initial-letter: 3;
    color: #2f6b3a;
    font-weight: 700;
    margin-right: 0.25em;
  }
</style>
<p>Rustam aka oshni har kuni ertalab o'tin olovida, katta qozonda
damlaydi. Guruch kechqurun namlanadi, zira qo'lda eziladi va
qozon sabr bilan dam beriladi.</p>

Nimaga qarang: "R" harfi uch qator balandligida, matn uning o'ng tomonidan oqib o'tadi. 3 — "harf uch qatorga cho'ksin". Chrome'da tekshirdik.

Diqqat: initial-letter Baseline emas. Baseline ma'lumotiga ko'ra, u faqat Chrome va Edge'da bor. MDN yozadi: Safari uni prefiks bilan (-webkit-initial-letter) qo'llaydi, Firefox'da yo'q. Tushunmagan brauzer qoidani tashlab ketadi va harf faqat yashil va qalin bo'ladi — hech narsa buzilmaydi.

7.2 hanging-punctuation

Kitobda qatorni boshlaydigan qo'shtirnoq («) chetdan tashqariga "osilib" turadi. Shunda harflar bir tekis vertikal chiziqda boshlanadi. hanging-punctuation: first shuni qiladi. Lekin Baseline ma'lumotiga ko'ra, u hozircha faqat Safari'da bor. Chrome va Firefox uni tashlab ketadi. Qo'shib qo'yish zararsiz, lekin natijani faqat Safari'da ko'rasiz.

7.3 font-style: oblique

Shrift asoslari darsida italic (dizayner chizgan kursiv) va oblique (oddiy harflarni qiyshaytirish) farqini ko'rgan edik. oblique ga burchak berish mumkin: font-style: oblique 10deg. Bu variable shriftning qiyalik o'qi bilan ishlaydi (Variable shriftlar). Lekin Baseline ma'lumotiga ko'ra, burchakli oblique ni hozircha faqat Firefox to'liq qo'llaydi. Chrome'da u variable shriftda ishlaganini o'sha darsda ko'rgan edik, ammo ma'lumotlarda Chrome uchun belgilanmagan — shuning uchun unga tayanmang. Oddiy saytda italic yetarli: «Bahor»ning Lora shriftida haqiqiy kursiv bor.

8. Ko'p uchraydigan xatolar

8.1 Havolalardan chiziqni butunlay olib tashlash

a { text-decoration: none; } — matn ichidagi havolalar oddiy so'zlardan faqat rang bilan farq qiladi. Rangni ajratmaydigan odam ularni topolmaydi (WCAG 1.4.1). Tuzatish: matndagi havolalarda chiziqni qoldiring, uni thickness va offset bilan chiroyli qiling. none — faqat menyu va tugmalarga.

8.2 Qisqa yozuv qalinlikni o'chirdi

text-decoration-thickness dan keyin text-decoration: underline yozilgan — qalinlik auto ga qaytdi («Tuzoq 1» bo'limi). Tuzatish: qisqa yozuv birinchi, to'liq yozuvlar keyin.

8.3 span dagi chiziq o'chmayapti

Havola ichidagi span ga text-decoration: none — chiziq baribir bor («Tuzoq 2» bo'limi). Tuzatish: span ga display: inline-block yoki chiziqni a ning o'zida boshqarish.

8.4 HTML'da KATTA HARF

<p>AKSIYA! OSH 20% ARZON</p> — dizayn o'zgarsa, matnni qayta yozasiz; uzun katta harfli matn o'qilmaydi. Tuzatish: oddiy yozing, text-transform: uppercase bilan ko'rsating — faqat qisqa yorliqlarda.

8.5 Gradient matn yo'qolib qoldi

color: transparent bor, background-clip: text ni brauzer tushunmadi — sarlavha o'rnida bo'sh gradient to'rtburchak. Tuzatish: zaxira rang, Firefox'da tekshirish, keyinroq — @supports (Brauzer mosligi).

9. Mashqlar

1-mashq (oson): Menyudagi eski narx

«Bahor» menyusida aksiya: <p>Lag'mon: <s>32 000 so'm</s> 28 000 so'm</p>. Eski narx kulrang (#5b6660) bo'lsin, uning ustidagi chiziq qizg'ish (#b4461a) va 2 piksel qalin.

Ishora: «Eski narx: line-through» bo'limi. Chiziq rangi color emas — text-decoration-color.

s {
  color: #5b6660;
  text-decoration-color: #b4461a;
  text-decoration-thickness: 2px;
}

2-mashq (o'rta): Kategoriya sarlavhalari

«Bahor» menyusida kategoriya nomlari h2 da: "Issiq taomlar", "Salatlar", "Ichimliklar". Dizayner ularni kichik (0.875rem), katta harfli, harflar orasi 0.08em va yashil (#2f6b3a) ko'rinishida xohlaydi. Ostiga — yupqa qizg'ish chiziq, matndan biroz pastda.

1. HTML'dagi matnni o'zgartirmasdan CSS yozing.
2. "Ichimliklar" so'zining "I" harfi to'g'ri chiqishi uchun HTML'da nima bo'lishi kerak?

Ishora: text-transform va «Chiziqni sozlash» bo'limlari, Qator balandligi darsidagi letter-spacing. Chiziq — text-decoration, border emas: u matn eni bilan chiziladi.

<style>
  h2 {
    font-family: system-ui, sans-serif;
    font-size: 0.875rem;
    color: #2f6b3a;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: underline;
    text-decoration-color: #b4461a;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
  }
</style>
<h2>Issiq taomlar</h2>
<h2>Salatlar</h2>
<h2>Ichimliklar</h2>

3-mashq (qiyin): Bosh sahifa sarlavhasi

«Bahor» bosh sahifasining header idagi sarlavhaga gradient kerak: yashildan qizg'ishga, orqasida yumshoq soya. Stajyor shunday yozdi — Firefox'da sarlavha ko'rinmay qolishi mumkin, Chrome'da esa harflar qoraygan, gradient deyarli ko'rinmaydi:

header h1 {
  font-size: 3rem;
  font-weight: 800;
  background-image: linear-gradient(90deg, #2f6b3a, #b4461a);
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 8px rgb(0 0 0 / 0.5);
}

1. Nega Firefox'da yozuv yo'qolishi mumkin? Zaxira qo'shing.
2. Nega harflar qoraydi? (Ishora: soya gradientning ostida chiziladimi yoki ustida?)
3. Gradient sarlavhaning faqat bir qismiga tushgandek. Nega?

<style>
  header h1 {
    font-family: system-ui, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    width: fit-content;
    color: #2f6b3a;
    background-image: linear-gradient(90deg, #2f6b3a, #b4461a);
    background-clip: text;
    color: transparent;
  }
</style>
<header>
  <h1>Choyxona «Bahor»</h1>
</header>

4-mashq: Portfolio qadami — havolalarga chiroyli chiziq

Ranglar 1 darsida portfolio menyusida joriy sahifani border-bottom bilan belgiladik va "havolaning o'z chizig'i ham qoldi — hozircha ikki chiziq" degan edik. Shuni tuzatamiz.

1. Hamma havolalar: chiziq matndan 0.15em pastda, qalinligi max(1px, 0.0625em).
2. Hover'da (joriy sahifadan boshqa havolalarda) chiziq qalinlashsin — 2px.
3. Asosiy menyuda havolalar chiziqsiz. Joriy sahifada esa border-bottom o'rniga qalin tag chizig'i: 2px, matndan 0.3em pastda.
4. Matn ichidagi havolalarning (masalan bosh sahifadagi «Bahor» havolasi) chizig'i qoldimi — tekshiring.

Ishora: «Chiziqni sozlash» va «Tuzoq 1» bo'limlari. max() — Matematik funksiyalar. Hover selektori — Mantiqiy pseudo-klasslar dagi a:not([aria-current="page"]):hover.

a {
  text-decoration-thickness: max(1px, 0.0625em);
  text-underline-offset: 0.15em;
}

a:not([aria-current="page"]):hover {
  background-color: var(--rang-fon-och);
  text-decoration-thickness: 2px;
}

nav[aria-label="Asosiy menyu"] a {
  text-decoration: none;
}

nav[aria-label="Asosiy menyu"] [aria-current="page"] {
  color: var(--rang-matn);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  a {
    color: #1f6f4a;
    text-decoration-thickness: max(1px, 0.0625em);
    text-underline-offset: 0.15em;
  }
  a:not([aria-current="page"]):hover {
    background-color: #e8f1ec;
    text-decoration-thickness: 2px;
  }
  nav[aria-label="Asosiy menyu"] a { text-decoration: none; }
  nav[aria-label="Asosiy menyu"] [aria-current="page"] {
    color: #1f2a24;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
</style>
<nav aria-label="Asosiy menyu">
  <ul>
    <li><a href="./" aria-current="page">Bosh sahifa</a></li>
    <li><a href="haqimda/">Men haqimda</a></li>
  </ul>
</nav>
<p><a href="loyihalar/bahor/">Choyxona «Bahor» sayti</a> —
menyu, stol band qilish formasi va 404 sahifasi.</p>

10. Real ishda

• Havola chizig'i — zamonaviy saytlarning "imzo"si. GitHub, MDN va ko'p bloglar text-underline-offset va thickness bilan ingichka, chiroyli chiziq chizadi.
• Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz): underline-offset-4, decoration-2, uppercase, tracking-wide — shu darsdagi xususiyatlar.
• Landing sahifalar gradient sarlavhalarni yaxshi ko'radi. Tajribali dasturchi zaxira rangni va kontrastni unutmaydi.
• Accessibility auditi matn ichidagi chiziqsiz havolalarni (WCAG 1.4.1) va katta harfli uzun matnni topadi.
• Intervyuda so'raladi: "Nega span dagi text-decoration: none ishlamayapti?", "text-transform va HTML'da katta harf yozishning farqi?", "Gradient matn qanday qilinadi va xavfi nima?".

Xulosa

• text-decoration — to'rt qismli qisqa yozuv; text-underline-offset va skip-ink alohida. Qisqa yozuv qalinlikni tiklaydi — to'liq yozuvlarni keyin yozing.
• Ota chizgan chiziq bolaga tarqaladi; bola uni none bilan o'chira olmaydi (inline-block bilan chiqib ketadi).
• text-transform — HTML'da oddiy harf, ekranda katta. lang harflarni tanlaydi (turkcha "İ"). Katta harfni qisqa yorliqlarda ishlating.
• text-shadow — rangli fon ustidagi matnni ajratadi, lekin kontrastni o'rnini bosmaydi. -webkit-text-stroke + paint-order — kontur.
• Gradient matn — background-clip: text + shaffof rang; Baseline emas, zaxira rang shart.
• initial-letter (faqat Chrome/Edge), hanging-punctuation (faqat Safari), burchakli oblique (Firefox) — qo'shimcha bezak, usiz ham hech narsa buzilmaydi.

Keyingi dars: Ro'yxatlar, CSS hisoblagichlar va jadvallar stili — ro'yxat belgilari, avtomatik raqamlash va «Bahor» narxlar jadvalini bezash.

Manbalar

• MDN: "text-decoration", "text-decoration-thickness", "text-underline-offset", "text-decoration-skip-ink", "text-transform" (Accessibility bo'limi), "text-shadow", "-webkit-text-stroke", "paint-order", "background-clip", "initial-letter", "hanging-punctuation" — developer.mozilla.org
• W3C: "CSS Text Decoration Module Level 4" — w3.org/TR/css-text-decor-4
• W3C: WCAG 2.2, "Understanding 1.4.1 Use of Color" — w3.org/WAI/WCAG22/Understanding/use-of-color
• web-features (Baseline ma'lumotlari): "text-decoration", "background-clip-text", "initial-letter", "hanging-punctuation", "font-style" — github.com/web-platform-dx/web-features