Таблиці стилів дозволяють не тільки задавати властивості окремих елементів, але і створювати цілі класи. По суті, ці класи дозволяють варіювати характеристики елементів! Познайомтеся з наступним прикладом:
У даному прикладі ми використовуємо селектор h1.krasota замість звичайного h1. Зазначений стиль буде застосовуватися до h1 тільки там, де ви вкажете атрибут class. Такий підхід застосовується дуже широко. Чудовим образом можна визначати різні класи для того самого елемента. У результаті ми одержали витончений код:
p.footnote { font-family: Times New Roman, Times, font-size: 13 pt }
</style>
Тепер, змінюючи в тілі сторінки значення атрибута class, ви зміните зовнішній вигляд елемента <р> відповідно до визначеного вище стилем.
Ми можемо створити універсальний клас. Його можна в тілі сторінки прив'язати до будь-якого елемента, і він буде використовувати зазначений стиль. Наприклад:
Тепер пишіть на сторінці що хочете, тільки встигайте вказувати значення class: <ul class-"small"> чи от <blockquote< class="small"> і т.д.
Елемент <div>
Розглянемо ще один елемент, що має відношення до стилів. Він називається <div> (скорочення від «division», що означає «поділ») і застосовується для поділу усього веб-документа на секції. Це, зрозуміло, контейнер, він може містити практично будь-які елементи, а до них може бути застосоване практично будь-яке форматування. <div> можна розглядати як деякий користувальницький елемент, по своїй значимості й області дії він порівнянний з <body> чи <head>. (У специфікаціях він називається елементом блокового рівня, це означає, що браузер автоматично залишає довкола нього порожній простір, як навколо <р> чи <blockquote>.)
Елемент <div> може використовуватися приблизно так само, як <span>. Для нього можуть бути визначені правила таблиць стилів, він може мати атрибут class. Приклад:
<р>От деякі ради на тему того, як добре пообідати поза своїм будинком:</р>
<ul>
<li>3аздалегідь обзвонить ресторани, щоб довідатися, чи можна ще зарезервувати столик</li>
<li>Якщо ви збираєтеся йти вшістьох чи більшою компанією, зробіть спеціальне замовлення:
наприклад, у тихому куточку, банкетному чи залі біля вікна з гарним видом</li>
<li>Якщо подзвоните досить рано (хоча б до початку обіднього часу), можливо, вам
удасться одержати коротку інформацію про те що являє собою даний ресторан і якіблюда і вина є його гордістю. Якщо ви одержали задовольняючі вас зведення, до того ж чули непогані рекомендації щодо закладу, у яке ви подзвонили, можете розраховувати на його</li>
<li>Довідайтеся. чи може ресторан запропонувати вегетаріанські, кошерні, диабетичні чи інші специфічні блюда, особливо якщо ви не знайомі з усіма своїми гістьми, запрошеними до обіду.</li>
<li>Продумайте заздалегідь, які ще специфічні вимоги повинні бути задоволені. Наприклад, чи можливо комфортне розміщення людей на інвалідних колясках</li> <li>Обережно передайте свою кредитну картку старшому чи офіціанту повідомите йому про те, що ви збираєтеся розплачуватися чеком. Це запобіжить можливим непорозумінням наприкінці обіду</li>
<li>Варто дати на чай усьому персоналу, що обслуговує вас, особливо якщо ви стоїте в очікуванні звільнення столика</li> </ul> </div>
</body>
</html>
Як видно з приведеного і з малюнка, елемент <div> може містити в собі зовсім різні типи контейнерів, наприклад, такі, як <р> і <ul>. Саме для цього він і призначений — для штучного поділу сторінки на секції, виконані в єдиному стилі. «div> може мати навіть такий атрибут, як align, що розпізнається більшістю браузерів, навіть якщо вони орієнтовані на підтримку таблиць стилів. Наприклад, <div align="center">...</div> розмістить усе, що знаходиться між відкриваючим і закриваючим тегом контейнера, — будь то текст, гіперпосилання, зображення, мультимедиа — посередині веб-сторінки. Такий підхід більш кращий у порівнянні з використанням елемента <center>, тому що останній не входить у рекомендації зі стандарту XHTML.
