Page 217 - 4505
P. 217
Така система пріоритетів дозволяє одному документу посилатися на декілька таблиць
стилів.
Класи. CSS реалізує можливість привласнювати стилі не усім однаковим елементам
сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу", що
привласнюється будь-якому елементу сторінки. Клас дозволяє задати різні правила
форматування для одного елементу певного типу або усіх елементів документу. Ім'я класу
вказується в селекторі правила після імені тега і відділяється від нього точкою. Можна
визначити декілька правил форматування для одного елементу і за допомогою параметра
CLASS відповідного тега застосовувати різні правила форматування. Наприклад, можна
визначити два класи для відображення заголовка першого рівня :
H1.red {color: red}
H1.blue (color: red; background - color: blue}
У тексті документу посилання на відповідний клас задається в параметрі CLASS :
<H1 CLASS="red">Червоний шрифт</H1>
<H1 CLASS="blue">Червоний шрифт на синьому фоні</H1>
У наведеному прикладі класи задавалися для різного відображення елементів одного типу.
Якщо клас повинен застосовуватися до усіх елементів документу, то в селекторі задається ім'я
класу з лідируючою точкою без вказівки конкретного елементу : .red {color: red} .blue (color:
red; background - color: blue}
Тепер два класи red і blue можна застосовувати до будь-яких елементів документу :
<P CLASS="red">Червоний шрифт</P>
<P CLASS="blue">Червоний шрифт на синьому фоні</P>
Перший абзац відіб'ється червоним шрифтом, а другий - червоним шрифтом на синьому фоні.
Розглянемо деякі характеристики, визначувані в таблицях стилів.
Властивості шрифту
font-family Використовується для указания шрифта та шрифтового сімейства, котрым
будет відображаться элемент.
P {font-family: Times New Roman, sans-serif;}
font-style Задає спосіб зображення шрифту : normal - Нормальний (за умовчанням),
italic - Курсив, oblique - Похилий.
P {font-style: italic;}
font-weight Визначає міра жирності шрифту за допомогою параметрів: normal, bold,
bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
B {font-weight: bolder;}
font-size Встановлює розмір шрифту. Параметр може вказуватися як у відносній
(відсотки), так і абсолютній величині (пункти, піксели, сантиметри)
H1 {font-size: 200%;}
H2 {font-size: 150px;}
Колір елементу та колір фону
color Визначає колір елементу
I {color: green;}
background- Встановлює колір фону для елементу.
color H4 {background-color: yellow;}
background- Встановлює URL фонової картинки
image TABLE {background-image:url(background.gif);}
Властивості тексту
213