4 CSS Урок №4. Стилі тексту.

У веб дизайні дуже важливим є обрати правильний шрифт та надати йому певні властивості. Для цього необхідно застосувати настасупні стилі:

  1. колір текста (color)
  2. колір тла (background - color)
  3. сімейство шрифта (font-family)
  4. розмір шрифта (font-size)
  5. стиль шрифта (font-style)
  6. насиченість шрифта (font-weight)
  7. співвідношення тексту та лінії (text-decoration)
  8. Контейнер <span> </span> - обгортка для текста

1) color: значення; - встановлює колір шрифта

Наприклад:

p {color:blue;}

Про те, як встановити значення коліру і які вони бувають, дізнайтеся тут.

2) background-color: значення; - встановлює колір тла

Наприклад:

p {background-color:#fff;}

3) font-family:назва шрифта; - встановлює шрифт(гарнітуру).

За замовченням браузер відображає один із шрифтів. Наприклад google - "Times New Roman". За допомогою font-family можна поміняти гарнітуру шрифта, вказавши назву іншого шрифта.

Наприклад:

p {font-family:Arial;}

Відобразить текст шрифтом Arial

Зауваження 1
Якщо назва шрифта скаладається з двох і більше слів, то її обов'язково беруть в лапки.
Наприклад: font-family:"Times New Roman"

Зауваження 2
Не всі шрифти підтримують кирилицю, а лише деяки. Наприклад: шрифт Broadway кирилицю не сприймає і заміщується шрифтом за замовченням.

4) font-size:значення; - встановлює розмір шрифта.

Одиниці розміру шрифта - px, %, em, rem.

1. Піксель - px. Розмір в пікселях інтуітивно зрозумілий. font-size:16px - висота шрифта 16px. Якщо не підходить, треба підібрати. Такий розмір є сталий (пікселі, вони й на смартфоні пікселі). Для абдаптивної верстки такий розмір дуже проблематичний.

2. % та em. Це відносні розміри і вимірюються відносно батьківського елемента шрифт якого вважається 100% або 1em.

Наприклад: для абзацу p батьківський елемент буде шрифт всього документу html. p {font-size:150%} означає, що шрифт абзаца більший в 1.5 рази. p {font-size:1.5em} означає те ж саме.

3. rem Також відносний розмір. Але, на відмну від попередніх одиниць, він завжди вимірюється відносно базового шрифта html документа.

Наприклад:

p {font-size:14px;}

5) font-style: значення;

Встановлює стиль шрифта Одним з трьох значень:

  1. normal(без нахилу, за замовченням),
  2. italic (курсив),
  3. oblique (з нахилом).

Наприклад:

p {font-style:oblique;}

6) font-weight:значення;

Встановлює насиченість шрифта одним з трьох параметрів:

  1. normal (за замовченнм),
  2. bold (жирний),
  3. bolder, lighter. Значення bolder і lighter є відносними, наприклад значення lighter для жирного тексту робить його нормальним.

Наприклад:

p {font-weight:bold;}

7) text-decoration:значення;

Встановлює співвідношення тексту та лінії одним зі значень:

  1. none - звичайний текст - без ліній (за замовченнм),
  2. line-through - закреслений текст,
  3. underline - підкреслений текст,
  4. overline - лінія над текстом.

Наприклад:

p {text-decoration:underline;}

Пам'ятайте, що у всьому має бути міра.

Приклад налаштування шрифта

файл file.css
.head {
color:red;
font-family:"Century Gothic";
font-size:18pt;
font-weight:bold;
}
.post {
color:blue;
font-family:"Century Gothic";
font-size:14pt;
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p class = "head"> Заголовок - шаблон </p>
<p class = "post"> Шаблонний текст. Тут має бути основний текст статті </p>
</body>
</html>

8) Контейнер <span> </span> - обгортка для текста.

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

Як раз для цього і застосовують конетйнер <span> </span> Без стилів цей тег взагалі ніяк не проявляється. Але, якщо до цього елемента застосувати певний стиль, тоді інша справа. Розглянемо це на прикладі:

файл file.css
.invert {
color:white;
background-color:black;
}

файл file.html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p> Іноді кортить виділити кольором, або маркером важливе <span class = "invert">слово</span>, а часто і <span class = "invert"> декілька слів </span> всередині абзацу.</p>
</body>
</html>

Виконайте тренувальну вправу.

Виконайте вправу 3 в зошиті.

Виконайте вправу в редакторі html

Завантажте архів files.rar та розархівуйте його.

Створіть file.css в спільній теці.

У файлі css створіть правила для тегів з такими налаштуваннями:

  • Для h2 шрифт Segoe Script, колір зелений
  • Для h3 шрифт Segoe Script, колір зелений, підкреслений
  • Для тегів <ul> і <p> шрифт Segoe Script, розмір 12pt