Урок 5. Шрифти

Здрастуй, шановний читачу.

Відео: Завантажити та встановити шрифти для Word. Як встановити шрифти для Ворда. урок №5

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

Перед вивченням CSS пройдіть попередні уроки:

Відео: Поєднання шрифтів в дизайні сайтів. урок 3

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань

Теорія та практика

Щоб красиво оформити текст на сторінці, надати йому привабливий вигляд, необхідно знати деякі CSS властивості які допоможуть зробити це.

font-family

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

Розглянемо CSS код:

123

p {font-family: comic sans ms, times new roman, verdana-}

Найкраще назва шрифту писати в нижньому регістрі. Тоді браузери їх краще розуміють. У вас напевно виникло питання чому ми вказали відразу кілька шрифтів. Це робиться для того, щоб якщо перший шрифт «comic sans ms» не встановлено у користувача на комп`ютері, тоді текст буде показаний в «times new roman». Якщо і він не встановлений, тоді він буде показаний зі шрифтом «verdana».

font-size

Після того як ми вибрали шрифт, нам необхідно задати його розмір. В CSS це робиться за допомогою якості font-size. Розмір в CSS може задаватися за допомогою декількох величин: пікселі (px), відсотки (%), пункти (em) і ключові слова (small, large, medium). Я рекомендую вам використовувати пікселі, і тому бразуер їх добре масштабують.

Розглянемо CSS код:

1234

p{font-family: comic sans ms, times new roman, verdana-font-size:16px-}

font-style

Також в CSS текст можна робити курсивний і похилий. Це робиться за допомогою властивості font-style. У даного властивості є кілька значень:

font-style: normal | italic | oblique | inherit
normal - звичайний текст.
italic - курсивний текст.
oblique - курсив. Він відрізняється від курсивного тим, що курсивний це текст написаний «від руки», а наколона - це просто нахил букв вправо.
inherit - успадковується значення батька (наприклад:

Text

, який знаходиться всередині . Тоді необхідно застосовувати дане значення).

Ось приклад курсивного і похилого тексту (різниця тобто, але вона не дуже помітна).

font-weight

Ще одним з необхідних властивостей при роботі з текстом це - виділення тексту жирним. За це відповідає властивість font-weight.

font-weight: bold | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Приклад CSS коду:

123456

p{font-family: comic sans ms, times new roman, verdana-font-size:16px-font-style:italic-font-weight:bold-}

Нижче можете подивитися приклад і завантажити його:

Подивитися прімерСкачать

Сьогодні ми розглянули як задати оформлення тексту. Пробуйте все прописати руками. Тоді ви краще запам`ятайте матеріал.

Більше практикуйтеся!