- •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.9.Розділ 9 - Інші властивості
1.9.1.page-break-after
Атрибут визначає розрив сторінки перед атрибутом.
Синтаксис:
селектор {page-break-after: значення}
може приймати значення:
auto.
right.
left.
always.
1.9.2.page-break-before
Атрибут визначає розрив сторінки після атрибуту.
Синтаксис:
селектор {page-break-before: значення}
може приймати значення:
auto.
right.
left.
always.
1.9.3.:first-line
Псевдоелемент визначає стиль для першого рядка блоку тексту
1.9.4.:first-letter
Псевдоелемент визначає стиль для першої букви в рядку.
Приклад завдання буквиці:
P:first-letter { font-size: 300%; font-style: italic; font-weight: bold; float: left }
1.9.5.:after
Псевдо елемент для вставки вмісту після елементу, що генерується
1.9.6.:before
для вставки вмісту до елементу, що генерується, Наприклад, наступне правило вставляє рядок "Пояснення: " перед вмістом кожного елементу SPAN, значення атрибуту class якого, рівне note:
SPAN.note:before { content: "Пояснення: " }
1.10.Розділ 10 - Групування стилів, призначення класів і псевдокласів
1.10.1.Групування стилів
Існують додаткові методи, які розширюють функціональні можливості таблиць стилів. Стилі можна згрупувати, що дозволяє зменшити кількість необхідних атрибутів і аргументів, шляхом створення логічних груп. Групування таблиць стилів може відбуватися по однакових тегах, або по атрибутах одного сімейства. Порядок атрибутів грає важливу роль: насиченість шрифту і стиль зображення повинні знаходитися перед рештою атрибутів - кегль повинен бути заданий до міжрядкового інтервалу, і тільки потім в рядок можна додати додаткову інформацію. У разі групування атрибутів - між ними коми не ставляться, виняток становить атрибут сімейства шрифту, перед ним ставиться кома.
Приклад групування по тегах:
До групування:
H1 {font-family: arial;font-size: 14pt}
H2 {font-family: arial;font-size: 14pt}
H3 {font-family: arial;font-size: 14pt}
Після групування:
H1,H2,H3 {font-family: arial;font-size: 14pt}
Приклад групування по атрибутах одного сімейства:
До групування:
BODY {margin-top: 12pt;margin-right: 10pt;margin-left: 15pt}
Після групування
BODY {margin: 12pt 10pt 15pt}
1.10.2.Призначення класів
Для того, щоб зробити роботу більш універсальною, можна створити декілька варіантів - класів властивостей стилів і застосовувати їх до елементів по черзі. Згрупувавши стилі по властивостях, необхідно дати їм назви в вигляді розширення до елементу.
Синтаксис:
H1.left {text-align: left}
H1.right {text-align: right}
Далі в документі указується або <H1 class=left>, або <H1 class=right>
Аналогічно можна створити універсальний клас і застосовувати його потім до різних елементів:
Синтаксис:
.left {text-align: left}
.right {text-align: right}
Далі в документі указується або <тег class=left>, або <тег class=right>
1.10.3.Призначення псевдокласів
Псевдокласи дозволяють задавати стиль елементу по його характеристиках, які не є ім'ям, атрибутом або вмістом. Елемент може придбати псевдоклас або позбутися його під час роботи користувача з документом.
A:link - не переглянуті посилання
A:visited - переглянуті посилання
A:hover - вибрані, але не активні посилання
A:active - активні посилання
