|
|
Помогая другим, помогаешь себе.
Создадим реальнyю виртyальность !
Урок 8: Группирование элементов
В
этом уроке мы подробно рассмотрим, как использовать <span> и
<div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.
- Группирование с помощью <span>
- Группирование с помощью <div>
Группирование с помощью <span>
Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться
для визуальных эффектов применимо к отдельным блокам текста.
Пример - цитата из Бенджамина Франклина:
<p>Кто рано ложится и рано встаёт,
тот будет здоровым, богатым и умным</p>
|
Скажем,
мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования
выделенные зелёным цветом. Для этого мы можем отметить эти преимущества с
помощью <span>. Каждому блоку spanclass, который затем можно определить в нашей таблице стилей:
В HTML:
<p>Кто рано ложится и рано встаёт,
тот
будет <span>здоровым</span>,
<span>богатым</span>
и <span>умным</span>.</p>
|
В CSS:
Разумеется, вы можете также использовать id для определения стиля <span>-элементов. Не забывайте только, что вы должны установить уникальный id каждому из
трёх <span>-элементов, как мы говорили в прошлом уроке.
Группирование с помощью <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:LightSkyBlue;
}
#republicans{
background:Pink;
}
|
В этих примерах мы использовали<div> и <span>
для определения очень простых вещей - цвета текста и фона. Но оба
элемента несут в себе потенциал для намного более сложных операций. Однако это - не для нашего урока. Позднее мы рассмотрим
этот вопрос в данном учебнике.
|
