Свойства текста
За допомогою CSS можна визначати стиль і вигляд тексту. Це аналогічно тому, що використовується тег <font>, що встановлює властивості шрифту, але стилі мають більші можливості і дозволяють скоротити HTML-код.
Властивості шрифту
Зміна начертання шрифту і його розміру відбувається за допомогою CSS відповідно до таблиці 1.
| Властивість | Значення | Опис | Приклад |
|---|---|---|---|
| font-family | ім'я шрифту | Задає список шрифтів | P {font-family: Arial, serif} |
| font-style | normal
italic oblique | Звичайний шрифт Курсив Нахилений шрифт | P {font-style: italic} |
| font-variant | normal
small-caps | Капітелі (особливі великі літери) | P {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100–900 | Звичайна жирність Світле начертання Півжирний Жирний 100 — світлий шрифт, 900 — найжирніший | P {font-weight: bold} |
| font-size | normal pt px % | звичайний розмір пункти пікселі відсотки | font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
У прикладі 1 показано використання параметрів при роботі з шрифтами.
Приклад 1. Встановлення властивостей шрифту за допомогою CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шрифт</title>
<style type="text/css">
H1 {
font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнітура шрифту */
font-size: 150%; /* Розмір тексту */
font-weight: lighter; /* Світле начертання */
}
</style>
</head>
<body>
<H1>Заголовок</H1>
<p>Звичайний текст</p>
</body>
</html>Нижче наведено результат цього прикладу (рис. 1).
Рис. 1. Вигляд тексту після застосування стилів
У таблиці 2 наведені деякі параметри для роботи з текстом та їх результат.
| Приклад | Приклад | Приклад | Приклад | Приклад |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
Властивості тексту
Крім зміни параметрів шрифтів, можна керувати властивостями всього тексту. Значення властивостей наведені у таблиці 3.
| Властивість | Значення | Опис | Приклад |
|---|---|---|---|
| line-height | normal
множник значення % | Інтерліньяж (міжрядковий інтервал) | line-height: normal
line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration | none
underline overline line-through blink | Прибрати всі оздоблення
Підкреслення Лінія над текстом Перекреслення Миготіння тексту | text-decoration: none |
| text-transform | none
capitalize uppercase lowercase | Прибрати всі ефекти
Починати З Великих ВСІ ВЕЛИКІ всі малі | text-transform: capitalize |
| text-align | left
right center justify | Вирівнювання тексту | text-align: justify |
| text-indent | значення % | Відступ першого рядка | text-indent: 15px;
text-indent: 10% |
Нижче, у таблиці 4 наведені деякі параметри тексту та результат їх застосування.
| Приклад: і це все про нього | Приклад: текст по центру | Приклад: Це не посилання, а просто текст | Приклад: відступ першого рядка | Приклад: півторний міжрядковий інтервал |
| text-transform: capitalize | text-align:center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |