Класи застосовують, коли необхідно визначити стиль для одного або кількох елементів веб-сторінки . Елементи можуть бути різними, але мати частково або повністю схожі елементи оформлення. У коді HTML ім'я класу визначається через атрибут class.
Синтаксис
<code>E.<Ім'я класу> { Опис правил стилю }
.<Ім'я класу> { Опис правил стилю }Тут E — позначає будь-який елемент. Імена класів повинні починатися з латинського символу і можуть містити символ дефісу (-) і підкреслення (_). Використання російських букв у іменах класів неприпустимо. Щоб вказати в коді HTML, що елемент використовується з певним класом, до тега додається атрибут class.
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <размер> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Класи</title> <style> p { /* Звичайний абзац */
text-align: justify; /* Вирівнювання тексту за шириною */
}
p.cite { /* Абзац із класом cite */
color: navy; /* Синій колір тексту */
margin-left: 20px; /* Відступ зліва */
border-left: 1px solid navy; /* Кордон ліворуч від тексту */
padding-left: 15px; /* Відстань від лінії до тексту */
}
</style>
</head>
<body> <p>Для штучного освітлення приміщення застосовуються люмінесцентні лампи. Вони відрізняються високою світловою віддачею, тривалим терміном служби, малою яскравістю поверхні, що світиться, близьким до природного спектрального складу випромінюваного світла, що забезпечує хорошу кольоропередачу.</p> <p class="cite">Для виключення засвітки екрана дисплея світловими потоками віконні прорізи забезпечені світлорозсіювальними шторами.</p>
</body>
</html>Результат прикладу показаний на мал. 1.
Мал. 1. Вигляд тексту, оформленого за допомогою класу
Примітка
Internet Explorer до версії 7 розуміє класи, імена яких починаються з дефісу (-) або символу підкреслення (_). Інші браузери таки імена ігнорують.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Selectors Level 3 | Рекомендація |
| CSS 2.1 | Рекомендація |
| CSS 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 3.5 | 7 | 12 | 1 | 3.5 | 1 | 1 |
| 1 | 1 | 4 | 1 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише ь частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані у специфікації. /b-modal>
Див. також