- •1.1.Розділ 1 - Основні поняття
- •1.1.1.Синтаксис стилю
- •1.1.2.Включені таблиці стилів
- •1.1.3.Впроваджені таблиці стилів
- •1.1.4.Зовнішні таблиці стилів
- •1.1.5.Апаратно-залежні таблиці стилів
- •1.2.Розділ 2 - Одиниці вимірювання
- •1.2.1.Відносні розміри
- •1.2.2.Абсолютні розміри
- •1.2.3.Одиниці визначення кольору
- •1.3.Розділ 3 - Властивості шрифту
- •1.4.Розділ 4 - Властивості тексту
- •1.5.Розділ 5 - Властивості кольору і фону
- •1.6.Розділ 6 - Властивості обрамлення
- •1.6.12.Border-позиція
- •1.7.Розділ 7 - Властивості позиціонування
- •1.8.Розділ 8 - Візуальні властивості
- •1.9.Розділ 9 - Інші властивості
- •1.10.Розділ 10 - Групування стилів, призначення класів і псевдокласів
- •1.10.1.Групування стилів
- •1.10.2.Призначення класів
- •1.10.3.Призначення псевдокласів
- •1.11.Розділ 11 - Адаптація інтерфейсу
- •1.11.1.Кольори значення опис
- •1.11.2.Системні шрифти значення опис
- •1.12.Розділ 12 - Фільтри
- •1.12.1.Фільтр alpha
- •1.12.2.Фільтр blur
- •1.12.12.Фільтр wave
- •1.12.13.Фільтр xray
- •1.13.Розділ 13 - Шари
- •1.13.1.Абсолютне позиціонування
- •1.13.8.Поняття прозорості шару
- •1.13.9.Накладення шарів
1.1.Розділ 1 - Основні поняття
1.1.1.Синтаксис стилю
Синтаксис стилю не дуже сильно відрізняється від синтаксису HTML, він записуються таким чином:
Синтаксис:
селектор { атрибут: значення}
Тут під селектором мається на увазі елемент, для якого задається стиль, далі у фігурних дужках, через ";" записуються пари атрибут: значення, де ":" є замінником знаку "=". Наприклад, для фарбування всіх заголовків другого рівня в червоний колір досить просто вказати в описі стилю наступне:
H2 {color: red}
Селектори можуть описувати наступні елементи:
теги
Приклад: P {color: red} стиль застосовується до тега <P>
теги нащадків
Приклад: H1 B {color: red} стиль застосовується до тега <B>, що знаходиться усередині заголовка першого рівня, тобто є його нащадком.
дочірні теги
Приклад: OL>LI {color: red} стиль застосовується до тега <LI>, який є дочірнім елементом для тега <OL>, тобто на теги <LI>, які є дочірніми елементами для тега <UL> стиль не розповсюджується
сестринські теги
Приклад: H1+H2 {margin-top: -5mm} стиль застосовується до сестринських тегів <H1> і <H2>, які є дочірніми по відношенню до одного і тому ж батьківського тега, наприклад <BODY>, в даному випадку зменшує розрив між ними
атрибути тегів
Приклад: DIV[class=red] {color: red} стиль застосовується до всіх елементів, включених в <DIV>, у яких атрибут class рівний red
ID
Приклад: P#12 {color: red} стиль застосовується до тега <P>, у якого ідентифікатор ID рівний 12
класи
Приклад: .red {color: red} стиль застосовується до будь-яких тегів, у яких атрибут class рівний red
псевдокласи
Приклад: A:visited {color: red} стиль застосовується до відвіданого тега <A>.
В тому випадку, якщо властивостей у тега, то їх розділяють крапкою з комою:
H2 {color: red; font-size: 15pt}
Якщо який-небудь тег в документі вставлений усередині іншого тега, то він успадковує всі його властивості, і для того, щоб задати йому особливі властивості необхідно використовувати наступний синтаксис:
H3 B {color: green}
Тут призначається зелений колір для тексту виділеного тегами <B> і </B>, якщо він є заголовком третього рівня.
1.1.2.Включені таблиці стилів
Включені таблиці стилів дозволяють управляти форматуванням за допомогою стандартних тегів HTML, включаючи визначення конкретного стилю для вмісту конкретного тега, подібно до його атрибутів. Сам по собі метод включення таблиць стилів в деякому розумінні суперечить основній ідеї каскадних таблиць стилів. Оскільки ключовим моментом цієї технології є управління стилями окремих сторінок або вузла в цілому. Явне включення стилів аналогічно використанню елементу <FONT> і повинно застосовуватися тільки в тих випадках, коли необхідно визначити стиль тільки невеликого фрагмента тексту.
Приклад: <P style="color:blue;"> стиль застосовується до тега <P>, даний одиничний абзац матиме синій текст.
1.1.3.Впроваджені таблиці стилів
Впроваджені таблиці стилів дозволяють управляти окремими сторінками за допомогою пари тегів <STYLE> і </STYLE>. Ця пара зі всім її вмістом поміщається між тегами <HTML> і <BODY>. При написанні коду впровадженої таблиці вибираються теги, які будуть контейнерами тексту. Дія таблиці стилів розповсюджуватиметься тільки на ті фрагменти тексту, які будуть поміщені саме в ці теги. Точно також, як і скрипти, таблиці стилів можуть бути заховані від старих браузерів в коментарі <!-- і -->. Впроваджені таблиці використовують найчастіше.
Приклад:
<HTML>
<HEAD>
</HEAD>
<STYLE>
BODY {color: #000000;}
H3 {color: #0000ff;}
A {color: #ff0000;}
</STYLE>
<BODY>
Вміст
</BODY>
</HTML>