Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика

Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук


Вітаю Вас, Гість · RSS 25.06.2017, 00:26
На головну » Підручники » Підручник 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)
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]