Групування властивостей і успадковування
1. Основні поняття. Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їхній зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яка реалізована в сучасних текстових редакторах - текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
За допомогою стилів можна змінити відстань між рядками, словами чи навіть символами, задати всі допустимі відступи для елементів, змінити розміри, вигляд та інші атрибути шрифтів, створити рамки, задати тло, створити ефекти накладання текстів, управляти порожнім простором тощо.
Таблиці стилів користувач зазвичай створює окремо від html–файлу. Під час створення html–файлу він концентрує увагу на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів - навпаки. Отже, стилі дають змогу розмежувати етапи створення html–файлу й удосконалення зовнішнього вигляду сторінки.
Вважатимемо, що таблиця стилів уже створена. Тепер потрібно забезпечити взаємодію таблиці стилів та основного html–файлу.
Розглянемо три способи такої взаємодії:
1) зв'язування,
2) імпортування,
3) вбудовування.
1. Зв'язування. Таблицю стилів створюють і зберігають в окремому текстовому файлі з розширенням css. Таку таблицю стилів називають зовнішньою. Щоб зв'язати основний файл з таблицею стилів, у середині тега <HEAD> застосовують одинарний тег <LINK> з інформацією про таблицю:
<HEAD> <LINK HREF ="адреса таблиці стилів" TYPE = "text/css" REL = "stylesheet" TITLE = "назва таблиці стилів" </HEAD>
Параметри TYPE і REL мають наведені вище стандартні значення, які означають, що деяка таблиця стилів буде створена мовою CSS як текстовий файл. Таблиця стилів може знаходитися на локальному комп'ютері або будь-де в мережі. У другому випадку адресу задають, наприклад, так: http:/www. microsoft.com/... /css/beststyle.css.
2. Імпортування. Це те ж саме, що і зв'язування, але взаємодію файлів забезпечують засобами тегу <STYLE> і команди @import URL ("адреса таблиці стилів"), які розглянемо далі.
3. Вбудовування. Якщо таблицю створено лише для деякого конкретного html–файлу, то її розташовують у цьому файлі за допомогою тега–контейнера <STYLE>. Це звужує рамки застосування таблиці, але суттєво прискорює функціонування сторінки. Таку таблицю стилів називають внутрішньою або вбудованою. Таблицю стилів можна застосувати або до всього файлу, або його частини, або до окремого тега.
Якщо дизайнер для створення сторінки застосовує декілька таблиць стилів, то такі таблиці називають каскадними. Каскад - це впорядкована послідовність таблиць стилів, у якій однотипні стилі з таблиць, які розташовані ближче до початку послідовності, мають більший пріоритет. Саме ця властивість дає змогу легко змінювати зовнішній вигляд сторінки і з декількох альтернатив вибирати найліпшу методом зміни послідовності описів таблиць стилів.
2. Мова CSS. Таблиця стилів - це текстовий файл, який створюють за допомогою мови CSS - Cascading Style Sheets - чи іншої. Є спеціальні програми, наприклад, AceExpert чи FrontPage тощо, які дають змогу створювати досить складні таблиці стилів навіть без знання цієї мови. Зазвичай таблицю стилів створюють засобами текстового редактора, наприклад NotePad, як текстовий файл і дають йому деяку назву з розширенням css.
Таблиця стилів складається з правил, а правило - з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого html–файлу.
Опис стилю - це послідовність пар
<властивість>: <значення>,
які записують через крапку з комою та охоплюють фігурними дужками.
Отже, загальний вигляд правила такий:
Список тегів { властивість1 : значення1; властивість2 : значення2;
...;
властивістьN : значенняN}
Приклад правила для одного тега:
Р {color:red}.
Браузер відтворить на екрані тексти всіх абзаців червоним кольором.
Ось приклад складнішого правила для списку тегів:
Н3, LI {color:green; font-family:pragmatica; font-size: 16pt; text-align:left; border-style:ridge; border-width:2mm}
Браузер виведе всі заголовки третього рівня Н3 і елементи списків LI зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить рамкою товщиною 2 мм з видавленим контуром (ridge).
3. Властивості стилів та їхні значення.Імена властивостей складаються з одного чи декількох англійських слів, що записуються через риску. Властивість діє лише в межах тега, зазначеного у відповідному правилі.
Властивості стилів наведені у таблиці:
| Властивість | Значення | Пояснення | |
| Background-attachment | fixed scroll | Тло фіксоване Тло прокручується | |
| Background-color | red, green, #ffcc55 | Колір тла | |
| Background-image | URL ("адpeca графічного файлу для тла") | ||
| Background-repeat | repeat, repeat-x, repeat-y, no-repeat | Повторює зображення | |
| Border-color | red, green, #ffcc55 | Колір рамки | |
| Border-style | none, dotted, dashed, solid, double, groove, ridge, inset, outset | Стиль рамки | |
| Border-width | 2mm, 3mm | Товщина рамки | |
| Font-family | Arial, „Times New Roman Cyr", Serif | Назва шрифта | |
| Font-size | 12pt, 16pt | Розмір шрифта | |
| Font-style | normal, oblique, italic | Вигляд курсивів | |
| Font-variant | small-caps | Вигляд шрифта | |
| Font-weight | normal, bold, bolder | Жирність шрифта | |
| Word-spacing | 1mm, 2mm | Відстань між словами | |
| Letter-spacing | 1 mm | Відстань між символами | |
| Line-height | 2 mm, 4 mm | Відстань між рядками | |
| Text-align | Left, right, center, justify | Вирівнювання тексту | |
| Text-decorate | none, underline, overline, line-through, blink | Оформлення тексту | |
| Text-indent | 2 cm | Абзацний відступ | |
| Margin-top | 4 mm тощо | Відступ зверху | |
| Margin-right | 4 mm тощо | Відступ справа | |
| Margin-bottom | 4 mm тощо | Відступ знизу | |
| Margin-left | 4 mm тощо | Відступ зліва | |
| Padding-top | 2 mm тощо | Величина вільного | |
| Padding-right | 2 mm тощо | простору між стороною рамки і елементом у рамці | |
| Padding-bottom | 2 mm тощо | ||
| Padding-left | 2 mm тощо | ||
| Height | 4 cm тощо | Висота елемента | |
| Width | 14 cm тощо | Ширина елемента | |
| Float | none, left, right | Обтікання об'єкта текстом | |
| Color | red, green, #ffcc55 | Колір елемента | |
| Vertical-allign | top, super, middle, sub, bottom | Вертикальне вирівнювання | |
| List-style-image | URL("aдpeca графічного маркера списку") | ||
| List-style-position | inside, outside | Позиція маркера | |
| List-style-type | disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none | Вигляд маркера (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо) | |
| Одиниці вимірювання, прийняті у мові CSS: | |
| Назва одиниці | Пояснення |
| In | Дюйми (1 дюйм = 2,54 см) |
| Cm | Сантиметри |
| Mm | Міліметри |
| Pt | Пункти (1 см = 28 пунктів) |
| Pc | Піки ( 1 піка = 12 пунктів) |
| Px | Пікселі |
| % | Відсотки від основи |
| Medium | Середній розмір (10 пунктів) |
| Small | На 50% менше, ніж medium |
| Large | На 50% більший, ніж medium |
| x-large | На 50% більший, ніж large |
| xx-large і т.д. | На 50% більший, ніж x-large |
4. Групування властивостей і успадковування.Перше слово чи перші два слова у складній назві властивості є назвою групи (категорії) властивостей. Наприклад, font - назва групи властивостей font-family, font-size, font-style, font-variant, font-weight. Групування властивостей дає змогу компактно задавати їхні значення, наприклад, так:
font:"times new roman", 12pt, italic, lighter.
Зауваження. Якщо значення властивості складається з декількох слів, то його беруть у лапки. Значення властивостей у групах margin і padding перелічуються у строгій послідовності їх знаходження у таблиці. Наприклад,
| Тор | right | bottomleft | |
| Margin: | 1cm, | 1 cm, | 2 cm, 2 cm |
Деякі властивості можуть успадковуватися різними тегами. Властивості, що стосуються тега <BODY>, діють на всі інші відповідні теги сторінки. Кажуть, що ці теги успадковують властивості тега <BODY>.
Наприклад, правило BODY {margin-left: 2cm} задає відступ зліва 2 см для всіх елементів сторінки. Тому, щоб притиснути заголовок другого чи іншого рівня до лівого краю, правило для нього має бути таким: H2{margin-left: -2 cm}.
5. Теги <STYLE>, <DIV> і <SPAN>.Внутрішні таблиці стилів описують у головному файлі в контейнері тега <HEAD>...</HEAD> за допомогою тега–контейнера <STYLE> ... </STYLE>.
Приклад 1. Розглянемо головний файл з описом стилів:
<HTML>
<HEAD> <TITLE>Застосування стилів</ТІТLЕ>
<STYLE TYPE="text/css"> тут записують правила </STYLE>
</HEAD>
<BODY>...</BODY>
</HTML>
Правила можуть починатися або з назви тега без кутових дужок, або з деякого слова користувача, перед яким є крапка. Це слово стає назвою типу, який можна застосувати в контейнері тега <BODY> до іншого тега, до текстового блока, фрагмента тексту чи деякого елемента, наприклад,
.mystylel{color:red; font-size:40pt; margin-top:30px} .mystyle2{color:black; font-size:16pt; margin-top:-50px}
Для виокремлення текстового блока, до якого застосовуватимуть стиль, призначений тег-контейнер <DIV пара-метр>...</DIV> з параметром CLASS, який задає конкретний стиль, що діятиме на блок:
<DIV CLASS=назва стилю> блок </DIV>.
Для виокремлення у блоці текстового фрагмента, для якого будуть переозначувати стиль, застосовують тег–контейнер <SPAN>...</SPAN>:
<SPAN CLASS = назва стилю» фрагмент </SPAN>.
6. Перекривання текстів на рекламній сторінці.Розглянемо застосування стилів для створення ефекту перекривання текстів.
Нехай потрібно створити рекламну сторінку туристичної компанії „Мандри" зі Львова, яка запрошує відвідати Кіпр, Грецію, Італію. Створимо і застосуємо стилі так, щоб різнокольорові назви країн частково перекривались.
Приклад 2. Розглянемо такі правила (стилі): body
.mystyle1 { color:red; font-size: 120px; margin-top:120px; margin-left: 70px}
.mystyle2 { color:blue; font-size :120px; margin-top: -90px; margin-left:200px}
.mystyle3 { color:green; font-size:120px; margin-top: -85px; margin-left:340px}
.mystyle4 { ; font-size:35px; font-style:italic; margin-top: -270px; margin-left:75px}
.mystyle5 { ; font-size:25px; margin-top:17px; margin-left: 340px}
У цих стилях передбачено ефект перекривання текстів. Іншим способом цього ефекту з текстом досягнути не можна. Перекривання досягається застосуванням від'ємних значень властивості margin-top, що веде до підняття тексту вгору відносно деякої базової лінії. Перший текст закінчуватиметься на висоті 120 + 120 = 240 пікселів. Наступний текст висотою 120 пікселів буде піднятий відносно лінії 240 пікселів на 90 пікселів і зсунутий вправо згідно із значенням властивості margin-left і т.д. Значення властивості margin-top успадковує наступний елемент. Таке успадковування дає змогу вирівнювати елементи один відносно іншого. Отже, за допомогою стилів можна розташовувати елементи на екрані. Оскільки вимірювання у цьому прикладі ведеться в пікселях, то якісне зображення буде досягнуто на екрані з роздільною здатністю 1024x768 пікселів. Для інших екранів ефект буде втрачено.
Приклад 3. Розглянемо такий зміст рекламної сторінки:
<BODY>
<DIV CLASS=mystyle1> Kiпp</DIV>
<DIV CLASS=mystyle2> Греція</DIV>
<DIV CLASS=mystyle3> Італія</DIV>
<DIV CLASS=mystyle4> "Мандри" запрошують подорожувати</DIV>
<DIV CLASS=mystyle5> Тел.: (0322) 97-56-46</DIV>
</BODY>
Складемо з фрагментів, наведених у прикладах 1-3, один файл і відкриємо його у браузері. На рис. 10.1 показано вигляд web–сторінки з ефектами перекривання тексту.
Рис. 10.1 Застосування стилів для перекривання текстів