Класи застосовують, коли необхідно визначити стиль для індивідуального елемента веб-сторінки або задати різні стилі для одного тега. При використанні спільно з тегами синтаксис для класів буде наступний.
Всередині стилю спочатку пишеться бажаний тег, а потім, через точку для користувача ім'я класу. Імена класів повинні починатися з латинського символу і можуть містити в собі символ дефіса (-) і підкреслення (_). Використання російських букв в іменах класів неприпустимо. Щоб вказати в коді HTML, що тег використовується з певним класом, до тегу додається атрибут class="Ім'я класу" (приклад 8.1).
Приклад 8.1. Використання класів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!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>
Результат даного прикладу показаний на рис. 8.1.
Перший абзац вирівняний по ширині з текстом чорного кольору (цей колір задається браузером за умовчанням), а наступний, до якого застосовано клас з ім'ям cite — відображається синім кольором і з лінією зліва.
Можна, також, використовувати класи і без вказівки тега. Синтаксис в цьому випадку буде наступний.
При такому записі клас можна застосовувати до будь-якого тегу (приклад 8.2).
Приклад 8.2. Використання класів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Класи </title> <style> .gost {color: green; /* Колір тексту */ font-weight: bold; /* Жирне накреслення */ } .term {border-bottom: 1px dashed red; /* Підкреслення під текстом */ } </style> </head> <body> <p> Згідно <span class="gost"> ГОСТ 12.1.003-83 ССБТ " Шум. Загальні вимоги безпеки " </span > ;, шумовий характеристикою робочих місць при постійному шумі є рівні звукового тиску в децибелах в октавних смугах. Сукупність таких рівнів називається <b class="term"> граничним спектром </b > ;, номер якого чисельно дорівнює рівню звукового тиску в октавной смузі зі среднегеометрической частотою 1000 Гц. </p> </body> </html>
Результат застосування класів до тегам <span> і <b> показаний на рис. 8.2.
Класи зручно використовувати, коли потрібно застосувати стиль до різних елементів веб-сторінки: клітинок таблиці, посиланням, абзаців та ін. В прикладі 8.3 показано зміна кольору фону рядків таблиці для створення « зебри ».
Приклад 8.3. Використання класів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Камені </title> <style> table.jewel {width: 100%; /* Ширина таблиці */ border: 1px solid #666; /* Рамка навколо таблиці */ } th {background: #009383; /* Колір фону */ color: #fff; /* Колір тексту */ text-align: left; /* Вирівнювання по лівому краю */ } tr.odd {background: #ebd3d7; /* Колір фону */ } </style> </head> <body> <table class="jewel"> <tr> <th> Назва </th> <th> Колір </th> <th> Твердість по Моосу </th> </tr> <tr class="odd"> <td> Алмаз </td> <td> Білий </td> <td> 10 </td> </tr> <tr> <td> Рубін </td> <td> Червоний </td> <td> 9 </td> </tr> <tr class="odd"> <td> Аметист </td> <td> Блакитний </td> <td> 7 </td> </tr> <tr> <td> Смарагд </td> <td> Зелений </td> <td> 8 </td> </tr> <tr class="odd"> <td> Сапфір </td> <td> Блакитний </td> <td> 9 </td> </tr> </table> </body> </html>
Результат даного прикладу показаний на рис. 8.3. У прикладі клас з ім'ям odd використовується для зміни кольору фону рядка таблиці. За рахунок того, що цей клас додається не до всіх тегам <tr> і виходить чергування різних кольорів.
Одночасне використання різних класів
До будь-якого тегу одночасно можна додати кілька класів, перераховуючи їх в атрибуті class через пробіл. В цьому випадку до елементу застосовується стиль, описаний в правилах для кожного класу. Оскільки при додаванні декількох класів вони можуть містити однакові стильові властивості, але з різними значеннями, то береться значення у класу, який описаний в коді нижче.
У прикладі 8.4 показано використання різних класів для створення хмари тегів.
Приклад 8.4. Поєднання різних класів
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> Хмара тегів </title> <style type="text/css"> .level1 {font-size: 1em; } .Level2 {font-size: 1.2em; } .Level3 {font-size: 1.4em; } .Level4 {font-size: 1.6em; } .Level5 {font-size: 1.8em; } .Level6 {font-size: 2em; } A.tag {color:#468be1; /* Колір посилань */ } </style> </head> <body> <div> <a href="/term/2" class="tag level6"> Paint.NET </a> <a href="/term/69" class="tag level6"> Photoshop </a> <a href="/term/3" class="tag level5"> колір </a> <a href="/term/95" class="tag level5"> фон </a> <a href="/term/11" class="tag level4"> палітра </a> <a href="/term/43" class="tag level3"> шари </a> <a href="/term/97" class="tag level2"> світло </a> <a href="/term/44" class="tag level2"> панелі </a> <a href="/term/16" class="tag level1"> лінія </a> <a href="/term/33" class="tag level1"> прямокутник </a> <a href="/term/14" class="tag level1"> піксель </a> <a href="/term/27" class="tag level1"> градієнт </a> </div> </body> </html>
Результат даного прикладу показаний на рис. 8.4.
В стилях також допускається використовувати запис вигляду . Layer1.layer2, де layer1 і layer2 являють собою імена класів. Стиль застосовується тільки для елементів, у яких одночасно задані класи layer1 і layer2 .
Питання для перевірки
1. Яке ім'я класу написано правильно?
- 2layer1
- 1layer
- Яndex
- pink-floyd
- 28_days_later
2. Який колір буде у слова «потоку» в коді ?
<p class="c1"> Коефіцієнт використання випромінюваного світильниками <span class="c2 c3"> потоку </span > ;, на розрахунковій площині. </p>
При використанні наступного стилю?
BODY {color: red; } P {color: green; } .c1 {color: blue; } .c2 {color: yellow; } .c3 {color: orange; } .c2.c3 {color: black; }
- Зелений.
- Синій.
- Жовтий.
- Помаранчевий.
- Чорний.
3. Як задати стиль у тега <div class="iddqd"> DOOM </div> ?
- div [iddqd] {color: red; }
- div.iddqd {color: red; }
- iddqd.div {color: red; }
- div #iddqd {color: red; }
- div=iddqd {color: red; }
4. Яке ім'я класу варто додати до тегу <P > ;, щоб текст був одночасно жирним і червоного кольору, якщо є наступний стиль?
s1 {color: red; font-weight: bold; } .s2 {color: red; } .s3 {background-color: red; font-weight: bold; } .s4 {font-weight: bold; } .s5 {font: red bold; }
- s1
- s2
- s3
- s2 s4
- s5
Відповіді
1. pink-floyd
2. Чорний.
3. div.iddqd {color: red; }
4. s2 s4