Matn, shriftlar va Solo Learn ilovasi

DarslarWeb dasturlash

Matn, shriftlar va Solo Learn ilovasi

Matn xossalari (text-transform, line-height, letter-spacing, text-shadow), shriftlarni boshqarish va Solo Learn mobil ilovasi orqali mashq.

30 daqiqa
CSS — Dars 4

Matn va shriftlar bilan ishlash

Saytingiz matni — foydalanuvchi eng ko'p ko'radigan narsa. Uni chiroyli va o'qilishi oson qiling.

font-sizeline-heighttext-shadowSoloLearn

Dars rejasi

4 ta mavzu
  1. 01Matn xossalari
  2. 02Shriftlar — font xossalari
  3. 03Google Fonts orqali chiroyli shrift
  4. 04Solo Learn ilovasi

1. Matn xossalari

CSS matnga ko'p turdagi o'zgarishlar kirita oladi. Eng ko'p ishlatiladiganlar:

  • text-transform — harflarni katta/kichiklashtirish (uppercase, lowercase, capitalize).
  • line-height — qatorlar orasidagi bo'shliq.
  • letter-spacing — harflar orasidagi masofa.
  • word-spacing — so'zlar orasidagi masofa.
  • text-shadow — matnga soya qo'shish.
  • text-indent — qatorning boshiga bo'shliq.
1.sarlavha {
2  text-transform: uppercase;
3  letter-spacing: 2px;
4  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
5}
6

7.paragraf {
8  line-height: 1.6;
9  text-align: justify;
10  text-indent: 20px;
11}
Matn xossalarini sinang
Natijajonli

2. Shriftlar — font xossalari

  • font-family — shrift nomi (sans-serif, serif, monospace yoki maxsus nom).
  • font-size — o'lcham (px, em, rem).
  • font-weight — qalinlik (100–900 yoki normal/bold).
  • font-style — ko'rinish (normal, italic).
1body {
2  font-family: "Helvetica", Arial, sans-serif;
3  font-size: 16px;
4}
5

6h1 {
7  font-size: 32px;
8  font-weight: 700;
9}
10

11em {
12  font-style: italic;
13  font-weight: 500;
14}

3. Google Fonts — chiroyli shrift bepul

Google Fonts — minglab bepul shriftlar. Ishlatish uchun HTMLning <head> qismiga link qo'shiladi va CSSda font-family orqali chaqiriladi.

1<head>
2  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
3</head>
1body {
2  font-family: "Inter", sans-serif;
3}
Bepul shriftlar

Google Fonts saytiga kirish

Minglab shriftlarni ko'ring, tanlang va ular uchun tayyor HTML kodni oling.

Bir necha shriftni solishtiring
Natijajonli

4. Solo Learn — cho'ntakdagi o'qituvchi

Kompyuterda dars qilish har doim ham qulay emas. Transport, dam olish yoki uydagi bo'sh vaqtingizda telefondan ham mashq qilish mumkin. Buning uchun eng yaxshi ilova — Solo Learn.

Bu yerda HTML va CSS darslarini qisqa savol-javob ko'rinishida bosqichma-bosqich takrorlay olasiz. Har bir darsdan keyin kichik testlar bor.

Android

Solo Learn — Google Play

Android telefoningizga ilovani bepul o'rnating.

iOS

Solo Learn — App Store

iPhone uchun ilovani bepul o'rnating.

  1. Ilovani yuklab oling va ro'yxatdan o'ting.
  2. «HTML» kursini tanlang va birinchi bo'limni boshlang.
  3. Har bir darsdan keyin testni bajaring.
  4. HTMLni tugatgach, «CSS» kursiga o'ting.
  5. Har kuni kamida 15 daqiqa mashq qilishni o'zingizga qoida qiling.

Kichik test

0 / 5

1.Barcha matnni KATTA HARFga aylantirish uchun qaysi xossa ishlatiladi?

2.Qatorlar orasidagi bo'shliq qaysi xossa bilan o'zgartiriladi?

3.font-weight: 700 qanday ma'no bildiradi?

4.Matnga soya qo'yish uchun qaysi xossa ishlatiladi?

5.Google Fonts shriftini saytda ishlatish uchun nima qilinadi?

Mustaqil ish

0 / 8