WEBVTT

00:00:00.526 --> 00:00:03.525
Ми можемо використовувати CSS також
для того, щоб змінити розмір шрифту.

00:00:03.666 --> 00:00:07.414
Як ви можете побачити, порівнявши
заголовки цієї сторінки з абзацами,

00:00:07.434 --> 00:00:09.247
браузер за замовчуванням надає


00:00:09.247 --> 00:00:12.248
різним елементам стилів 
різні розміри.

00:00:12.352 --> 00:00:13.643
Існує розмір шрифту основного тексту

00:00:13.643 --> 00:00:15.936
і більші розміри для кожного
рівня заголовків.

00:00:16.102 --> 00:00:18.650
Однак інколи ми хочемо трохи
змінити ці розміри.

00:00:18.857 --> 00:00:22.206
І ми можемо це зробити за допомогою
властивості CSS "font-size" (розмір шрифту).

00:00:22.419 --> 00:00:23.853
Наприклад:

00:00:23.853 --> 00:00:28.643
Як зробити так, щоб весь шрифт 
на сторінці був трохи меншим?

00:00:28.948 --> 00:00:31.062
Що ж, ми перейдемо до тега 

00:00:31.102 --> 00:00:34.590
і додамо правило CSS до тега .

00:00:34.889 --> 00:00:39.247
І потім всередині додамо властивість
"font-size".

00:00:39.477 --> 00:00:42.669
Яким має бути значення 
для властивості "font-size"?

00:00:42.959 --> 00:00:45.654
Як ми вимірюємо розмір шрифту?

00:00:45.930 --> 00:00:47.954
Це насправді дуже добре запитання,

00:00:47.954 --> 00:00:50.267
тому що існує щонайменше 
10 різних одиниць виміру,

00:00:50.267 --> 00:00:52.358
які надає CSS для розміру шрифтів.

00:00:52.684 --> 00:00:55.674
Почнімо з одиниць, які ви
вже бачили раніше: пікселі.

00:00:55.853 --> 00:00:58.623
Ми використовували пікселі, щоб
змінити розмір наших зображень,

00:00:58.623 --> 00:01:00.993
і ми ще багато де будемо їх 
використовувати в CSS.

00:01:01.286 --> 00:01:02.985
Спробуймо 11 пікселів.

00:01:04.040 --> 00:01:06.145
Все стало меншим.

00:01:06.405 --> 00:01:08.510
Навіть заголовки зменшились.

00:01:08.786 --> 00:01:11.172
Чому заголовки також зменшились?

00:01:11.363 --> 00:01:15.316
Хіба б вони не мали бути такого розміру, 
який встановив для них браузер раніше?

00:01:15.502 --> 00:01:16.288
Ні.

00:01:16.432 --> 00:01:21.954
Тому що значення за замовчуванням 
для заголовків встановлене не в пікселях.

00:01:21.962 --> 00:01:25.207
Воно встановлене в інших одиницях
виміру: "em".

00:01:25.495 --> 00:01:27.450
І ця одиниця виміру є відносною,

00:01:27.450 --> 00:01:31.695
і тому змінює розмір шрифту заголовків
пропорційно до шрифту основного тексту.

00:01:32.099 --> 00:01:33.817
Дозвольте я вам покажу, 
що я маю на увазі.

00:01:34.055 --> 00:01:36.439
Перейдімо до правила стилю "h2"

00:01:36.574 --> 00:01:38.904
і додаймо властивість "font-size".

00:01:39.446 --> 00:01:44.489
Цього разу, замість того щоб вказати
значення в пікселях, я його задам відносно.

00:01:44.701 --> 00:01:49.903
Наскільки більшим має бути заголовок "h2",
в порівнянні з текстом основної частини?

00:01:50.173 --> 00:01:52.857
Можливо, вдвічі?

00:01:53.305 --> 00:01:56.763
Для цього ми напишемо "2em".

00:01:56.992 --> 00:02:00.171
Що зараз насправді робить браузер — 
це обчислює

00:02:00.171 --> 00:02:01.608
розмір шрифту в пікселях.

00:02:01.810 --> 00:02:05.048
Браузер знає, що розмір шрифту тексту 
був 11 пікселів,

00:02:05.048 --> 00:02:08.055
а ви сказали, що заголовок "h2"
має бути вдвічі більшим.

00:02:08.055 --> 00:02:11.574
Тому зараз усі заголовки "h2" 
мають 22 пікселі.

00:02:12.142 --> 00:02:16.576
Якщо ми змінимо розмір шрифту 
тексту на 12 пікселів,

00:02:16.576 --> 00:02:18.932
тоді яким буде розмір заголовків "h2"?

00:02:19.267 --> 00:02:21.494
Правильно, 24 пікселі.

00:02:21.868 --> 00:02:26.345
А якщо ми змінимо розмір шрифту 
заголовків на "1,5em"?

00:02:26.760 --> 00:02:30.805
Тепер заголовки будуть 
12 * 1,5,


00:02:31.023 --> 00:02:32.666
що дорівнює 18 пікселів.

00:02:33.273 --> 00:02:37.754
Ми можемо також визначити розмір пікселів
для заголовків, так само як ми це робили

00:02:37.754 --> 00:02:39.521
для тексту, і це працюватиме так само.

00:02:39.634 --> 00:02:41.502
Все залежить від того, як вам простіше.

00:02:41.502 --> 00:02:45.258
І як я вже казала раніше, існує багато
інших одиниць виміру, які ми можемо

00:02:45.258 --> 00:02:46.922
використовувати замість пікселів та "em".

00:02:47.224 --> 00:02:49.568
Пікселі та "em" — це просто найпоширеніші
одиниці виміру.

00:02:49.568 --> 00:02:51.016
Але якщо вам хочеться більшого,

00:02:51.016 --> 00:02:53.193
прогляньте документацію щодо
розміру шрифтів

00:02:53.193 --> 00:02:55.402
або пошукайте більше інформації
в Інтернеті.

00:02:55.503 --> 00:02:58.883
Настав час зробити чудовими розміри
ваших шрифтів!

00:02:58.911 --> 00:03:03.321
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "magneticOne.org"