 Меню сайту |
|
| Підручники |
|
| Форма входу |
|
| Статистика |
Онлайн всього: 1 Гостей: 1 Користувачів: 0 |
| Пошук |
|
|
| Вітаю Вас, Гість · RSS |
23.12.2024, 19:47 |
|
На головну » Підручники » Підручник CSS » Урок 8: Групування елементів (span та div) - Підручник CSS
Урок 8: Групування елементів (span та div) |
|
|
Елементи <span> і <div> використовуються для структурування документа, часто спільно з атрибутами class і id.
У цьому уроці ми детально розглянемо, як використовувати <span> і <div>, оскільки ці елементи HTML мають найважливіше значення в CSS.
- Групування за допомогою <span>
- Групування за допомогою <div>
Групування за допомогою <span>
Елемент <span> можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, в поєднанні з CSS, <span> може використовуватися для візуальних ефектів в окремих блоках тексту.
Приклад - цитата з Бенджаміна Франкліна:
|
<p>Хто рано лягає і рано встає,
той буде здоровим, багатим і розумним</p>
|
Скажімо, ми хочемо, щоб Mr. Франклін побачив всі переваги неспання виділені червоним кольором. Для цього ми можемо відзначити ці переваги з допомогою <span>. Кожному блоку span буде присвоєно class, який потім можна визначити в нашій таблиці стилів:
|
<p>Хто рано лягає і рано встає,
той буде <span class="benefit">здоровим</span>,
<span class="benefit">багатим</span>
і <span class="benefit">розумним</span>.</p>
|
У CSS:
span.benefit {
color:red;
}
|
Показати приклад
Зрозуміло, ви можете також використовувати id для визначення стилю <span>-елементів. Не забувайте тільки, що ви повинні встановити унікальний id кожному з трьох <span style="">-елементів, як ми говорили в минулому уроці.
Групування за допомогою <div>
У той час як <span> використовується в елементах рівня блоку, як у попередньому прикладі, <div> застосовується для групування одного або більше блок-елементів.
Крім цього відмінності, групування за допомогою <div> працює більш-менш аналогічно. Подивимося на приклад - два списки президентів США, згрупованих за їх політичної приналежності:
<div id="democrats">
<ul>
<li>Франклін Д. Рузвелт</li>
<li>Гаррі Трумен</li>
<li>Джон Ф. Кеннеді</li>
<li>Ліндон Б. Джонсон</li>
<li>Джиммі Картер</li>
<li>Білл Клінтон</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Дуайт Д. Ейзенхауер</li>
<li>Річард Ніксон</li>
<li>Джералд Форд</li>
<li>Роналд Рейган</li>
<li>Джордж Буш</li>
<li>Джордж У. Буш</li>
</ul>
</div>
|
У нашій таблиці стилів ми можемо використовувати таке ж групування, як і раніше:
#democrats {
background:blue;
}
#republicans {
background:red;
}
|
Показати приклад
У цих прикладах ми використовували <div> і <span style=""> для визначення дуже простих речей - кольори тексту і фону. Але обидва елементи несуть у собі потенціал для набагато більш складних операцій, таких як .... Проте це - не для нашого уроку. Пізніше ми розглянемо це питання в даному підручнику.
Резюме
У Уроках 7 і 8, ви дізналися про селектори id і class і про елементи span та div.
Тепер ви повинні вміти, більш-менш, групувати і ідентифікувати всі частини документа, що вже є великим кроком в освоєнні CSS. В Уроці 9 ми дамо визначення Боксовій моделі.
|
|
<< Урок 7: Ідентифікація та групування елементів (class і id)
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
