Як зробити в CSS жирний шрифт

Перша версія сучасної мови HTML з'явилася десь на початку 90-х і мала функцію передачі інформації. Завдяки цій мові почала розвиватися всім відома на сьогоднішній день Всесвітня павутина, до якої всі ми так звикли. Однак якщо ми зануримося в історію набагато глибше, то побачимо, що ще в далекому 1945 році Ванневаром Буш, громадянин Америки, який був за сумісництвом науковим консультантом президента, згадує про гіпертексті. У 1968-му, через двадцять три роки, Дуглас Енджельбарт, який був винахідником миші та деяких інших девайсів, зумів-таки показати у своєму текстовому редакторі роботу гіпертекстового зв'язку. Так було покладено початок мові гіпертекстової розмітки HTML.

Трохи про CSS

У 1994 році була запропонована ідея про створення каскадних таблиць стилів на основі HTML. Ця ідея відповідала одну основну думку – відокремити дизайн сайту від його безпосереднього вмісту. Сімнадцятого грудня 1996 року була прийнята перша версія CSS. Вісімнадцятого травня 1998 р. набула чинності друга версія – CSS2. Через 11 років CSS2 була відредагована і виправлена. Так з'явилася версія 2.1. Сьогодні вже існує третій варіант.

Що таке шрифт, і навіщо він потрібен на сайті?

Шрифт – це невід'ємна частина веб-дизайну будь-якого сайту, завдяки якій ресурс буде виглядати більш привабливим, адже його відвідувачам буде легше читати інформацію, якщо необхідні частини тексту будуть виділені жирним шрифтом або курсивом. Зараз буде розглядатися тільки варіант використання CSS жирного шрифту.

Як CSS зробити жирний шрифт?

Для того щоб задати в CSS жирний шрифт, необхідно використовувати font-weight. Тепер розглянемо кілька пунктів, в яких буде показано, які можливі значення для тієї чи іншої властивості:

Якщо використовувати властивість normal, то вийде звичайний шрифт.

Якщо bold – жирний.

Властивість bolder – це дещо більш жирний шрифт, ніж bold.

А властивість lighter буде менш жирним шрифтом, ніж bold.

При цьому також використовуються числа від 100 до 900. Завдяки таким значенням можна задати властивості від дуже тонкого шрифту до дуже жирного. У цьому випадку товщина шрифту буде йти по наростаючій – від самого маленького числового значення (100) до найбільшого (900). Слід мати на увазі, що значення жирного шрифту за замовчуванням буде дорівнює 700 а значення функції normal за замовчуванням – 400.

Як виглядає в CSS жирний шрифт bold

По-перше, ставиться p і відкривається фігурна скобочка – p {. По-друге, пишеться властивість font-weight, потім двокрапка, а після вказується письмове або числове значення одного з властивостей, як було розглянуто вище – font-weight: bold. В кінці можна поставити крапку з комою в тому випадку, якщо ви збираєтеся перераховувати в фігурних дужках значення інших властивостей. По-третє, висока скобочка закривається –}.
Розглянемо, як можна задати однакове значення двома різними способами.
У першому використовується функція числового значення, яка дорівнює 700:

. my-bold-font {

color: black;

font-weight: 700;

}

У другому способі використовується функція bold. Щоб у вас з'явилася можливість зробити в CSS жирний шрифт, використовуємо функцію bold, яка, як було згадано вище, за замовчуванням має числове значення 700. При цьому ніякої різниці, вибираючи з цих двох варіантів, ви не побачите, тому використовуйте ту функцію, яка вам більше подобається:

. my-bold-font {

color: black;

font-weight: bold;

}

Тепер ви знаєте, як зробити в CSS жирний шрифт. Ми докладно розглянули функції та значення для цього можна використовувати.