Щоб забезпечити максимальні можливості в області оформлення Web-сторінок, організацією World Wide Web Consortium були затверджені стандарти в області технології, яка отримала назву каскадних таблиць стилів (Cascading Style Sheets, CSS).
Основним поняттям CSS є стиль – тобто набір правил оформлення й форматування, що може бути застосований до різних елементів сторінки. У стандартному HTML для присвоєння якому-небудь елементу певних властивостей (таких, як кольори, розмір, положення на сторінці й т.п.) доводилося щораз описувати ці властивості, навіть якщо на одній сторінці повинні розташовуватися 10 або 110 таких елементів, що нітрохи не відрізняються один від іншого. Ви повинні були десять або сто десять разів вставити той самий шматок HTMLкода в сторінку, збільшуючи розмір файлу й час завантаження на комп’ютер її користувача, що переглядає.
CSS діє іншим, більше зручним й економічним способом. Для присвоєння якому-небудь елементу певних характеристик ви повинні один раз описати цей елемент і визначити цей опис як стиль, а надалі просто вказувати, що елемент, що ви хочете оформити відповідним чином, повинен прийняти властивості стилю, описаного вами. Зручно, не чи правда?
Більше того, ви можете зберегти опис стилю не в тексті вашої сторінки, а в окремому файлі – це дозволить використати опис стилю на будь-якій кількості Webстраниц. Разюче зручно. І ще одне, пов’язане із цим, перевага - можливість змінити оформлення будь-якої кількості сторінок, виправивши лише опис стилю в одному (окремому) файлі.
Крім того, CSS дозволяє працювати зі шрифтовим оформленням сторінок на набагато більше високому рівні, чим стандартний HTML, уникаючи зайвого обважнення сторінок графікою. Давайте розглянемо, як ми можемо втілити настільки чудові можливості в життя.
Застосування CSS складається з двох етапів:
1. Визначення стилю. Стиль - це набір властивостей тексту. Наприклад, до таких властивостей відносяться: вибраний вами шрифт, його колір, розмір, фон і рамка. У CSS стиль називається селектором (selector).
2. Застосування стилю до одного або декількох проміжків тексту. У залежності від використаного вами підходу стиль може застосовуватися автоматично, або ж ви повинні будете вказати область його застосування вручну.
Реально для застосування CSS використовуються рядки коду. На скільки це можливо, замість коду ми будемо розглядати діалогові вікна FrontPage, за допомогою яких код CSS генерується автоматично. Спочатку декілька визначень.
• Стиль CSS (CSS style) - це набір властивостей тексту, наприклад: гарнітура шрифту, його розмір, насиченість ліній, колір, колір фону, тип рамки і її товщина та інше.
• Правило CSS (CSS rule) - це вираз, який привласнює властивості одному або декільком стилям. Ось приклад правила, яке вказує назву шрифту і колір для стилів H1 і H2:
H1, H2 {font-family; Anal; color; red}
Між правилами і стилями існують відносини типу більшість-до-більшості. Одне правило можна застосовувати до будь-якої кількості стилів, і до одного стилю можна застосовувати будь-яку кількість правил.
• Селектор (selector) - ця назва стилю CSS. Для наших цілей цікаві тільки три типи селекторів:
o Клавіатурні селектори (type selectors) називаються так само, як і теги HTML: Р - для звичайних абзаців, H1 - для Heading1 (заголовка першого рівня), LI - для елемента списку, TD - для елемента таблиці і т.д. Застосування правила до клавіатурного селектора приводить до того, що змінюється вигляд всіх елементів сторінки, що управляються відповідним тегом HTML. Перше правило в наведеному нижче прикладі застосовує курсив до всіх комірок заголовка таблиці, друге правило робить весь напівжирний шрифт на сторінці червоним.
TH { font-style; italic;}
B { color; red;}
o Селектори класів (Class selectors) не застосовуються автоматично до яких-небудь частин сторінки. Вам необхідно вказати, до яких дільниць сторінки ви маєте намір їх застосувати. Перший вираз в прикладі створює клас goga, а другий - застосовує його до абзацу.
.goga { color: white; background-color: black; }
<p class=goga> Цей текст буде білим на чорному фоні. </р>
Зверніть увагу, що вираз, за допомогою якого ви визначаєте клас, починається з крапки. При застосуванні стилю до абзацу крапку на початку ставити не треба!
o Селектори ідентифікаторів (ID selectors) діють подібно до селекторів класів. Єдина відмінність полягає в тому, що після створення стилю і прив'язки його до ідентифікатора ви можете вказати цей ідентифікатор для елемента сторінки. Ось простий приклад. Створюється стиль для всіх елементів з ідентифікатором bruce, а потім ідентифікатор bruce присвоюється абзацу. У результаті текст в абзаці повинен стати напівжирним.
#bruce { font-weight: bold; }
<р id=bruce> Цей текст буде виділений напівжирним. </р>
На жаль, не можна використовувати один і той же ідентифікатор більше ніж для одного елемента на сторінці. Тому селектори ідентифікаторів, на відміну від селекторів класів, використовуються відносно рідко. Зверніть увагу на префікс #, який використовується при створенні селектора ідентифікаторів.
