Стиль шрифту css - властивості, колір, розмір, накреслення

Властивостями CSS можна задавати різні шрифти різних елементів веб-сторінки, а також вказати їх накреслення, розмір, колір і інші параметри.

Розглянемо доступні властивості.

font-family

Дозволяє визначити, яким шрифтом буде написано текст. Для угруповання шрифтів в CSS використовується два типи імен: generic-family і family-name.

generic-family містить п'ять базових сімейств шрифтів, які можна знайти практично на будь-якому комп'ютері.

• sans-serif - шрифти без зарубок. Написаний ними текст сприймається краще за інших.
• serif - шрифти із зарубками.
• monospace - шрифти, символи яких мають фіксовану ширину. Їх прийнято використовувати для відображення програмного коду.
• cursive - рукописні шрифти.
• fantasy - декоративні (художні) шрифти.

family-name визначає не сімейство, а один шрифт: "Arial Black", Verdana.

Як значення властивості font-family сімейства і шрифти перераховуються через кому. Браузер визначає, чи встановлений на ПК користувача перший в списку шрифт, і якщо так, то відображає текст їм, якщо немає - переходить до наступного і т. Д. Якщо ім'я шрифту містить спецсимволи або складається з декількох слів (містить пробіл), то його треба брати в лапки.

font-style

Задає курсивное (значення italic), похиле (oblique) або стандартне (normal) накреслення тексту.

Створює таку сторінку:

Важлива властивість, яка визначає розмір шрифту. Його можна задавати різними способами.

• Пікселі (px). Використовуються досить часто, тому що дозволяють вказати розмір максимально точно. За замовчуванням браузер відображає текст розміром 16 пікселів.

Зверніть увагу: між числом і одиницями виміру пробілу бути не повинно.

• Відсотки (%). Вираховуються від розміру шрифту батьківського елементу. Якщо у батька він встановлений за замовчуванням, то можна згадати про 16 пікселів і прийняти їх за 100%.

• Відносна висота шрифту (em). Висота шрифту батька приймається за одиницю, і щодо нього встановлюється висота шрифту поточного елементу.

• Константи. Вважається, що значення xx-small. x-small. small. medium. large. x-large. xx-large (від меншого до більшого) задають абсолютний розмір шрифту, хоча насправді при їх використанні розмір все одно буде залежати від налаштувань операційної системи і браузера. Є також і відносні константи: smaller (менший) і larger (більший), які зменшують або збільшують шрифт щодо елемента-батька.

• Інші одиниці вимірювання. Для установки шрифту можна використовувати все, що є в CSS: міліметри (mm), сантиметри (cm), дюйми (in), піки (pc, 1 pc = 12 pt), розмір символу x (ex).

font-variant

Пропонує два значення:

• small-caps. Малі літери змінюються на прописні малого розміру.
• normal. Звичайний текст.

Щоб зрозуміти, різницю краще один раз побачити:

font-weight

Впливає на насиченість (жирність) шрифту. Значення можуть бути такими:

• Числа від 100 до 900 з кроком в сотню. З їх допомогою можна задати жирність найточніше. Насиченість нормального шрифту, який ви зазвичай бачите на сторінках, дорівнює значенню 400, напівжирного - 700. Проблема в тому, що багато браузери не підтримують весь цей асортимент, і тому використання числових значень часто буває безглуздим.
• normal. Звичайний шрифт.
• bold. Встановлює напівжирний шрифт.

• bolder і lighter. Робить шрифт відповідно жирніше або тонше шрифту тексту батька.

Визначає колір шрифту. Може здаватися такими способами

• За назвою. Використовуються зарезервовані слова, що позначають імена квітів (наприклад, blue - синій, yellow - жовтий). Найпростіший, але разом з тим і самий обмежений метод, тому що підтримує тільки 140 кольорів, хоча зазвичай і їх вистачає.

• За шістнадцятиричним коду (HEX). Шістнадцяткова система числення включає в себе 16 цифр, останні шість з яких позначаються буквами латинського алфавіту від A до F, причому десяткове число 255 в цій системі записується як FF. Як відомо, всі кольори створюються шляхом змішування всього трьох: червоного, зеленого і синього. Ступінь присутності кожного з них і задається числами від 0 до 255, записаними в шістнадцятковій системі. Перед числом ставиться символ «грати (#). Білий колір - # 000000. чорний - #ffffff.

Приклад нижче задає абзацу сірий колір:

• В системі RGB. Все ті ж червоний, зелений і синій (red, green, blue), але задающиеся вже числами від 0 до 255 через кому. Присутність кожного з трьох кольорів можна позначати і в процентах. Тоді 100% буде відповідати числу 255.

• RGBA. Все, як у RGB, тільки в кінці додається ще одне число від 0 до 1 - альфа-канал, що задає тексту прозорість.

• HSL. Значення в цьому форматі задається трьома параметрами через кому.

1. H (hue - відтінок). Визначається в градусах від 0 до 359 ° в залежності від кольору на колірному колі (малюнок нижче).

2. S (Saturate - відтінок). Вказується у відсотках. Зрозуміло, що від 0 до 100%, і зрозуміло, що чим більше відсоток, тим більш насиченим колір.

3. L (lightness - яскравість). Так само, як і насиченість, встановлюється у відсотках.

• HSLA. Те ж, що і HSL, але з додаванням альфа-каналу (як RGBA).

Дозволяє об'єднати всі властивості шрифту в одному рядку і може тим самим сильно скоротити код. Має наступну структуру:

Властивості повинні записуватися саме в такій послідовності (щоб не ставити значення, його можна просто пропустити).