Урок 8: Группирование элементов  (span и div)

Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.

В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.

• Группирование с помощью <span>
• Группирование с помощью <div>

Группирование с помощью <span>

Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.

Пример - цитата из Бенджамина Франклина:

	<p>Кто рано ложится и рано встаёт,
 тот будет здоровым, богатым и умным</p>
	
	

Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью <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>-элементов, как мы говорили в прошлом уроке.

Группирование с помощью <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> для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как.... Однако это - не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике.

Резюме

В Уроках 7 и 8, вы узнали о селекторах id и class и об элементах span и div.

Теперь вы должны уметь, более или менее, группировать и идентифицировать все части документа, что уже является большим шагом в освоении CSS. В Уроке 9 мы дадим понятие Боксовой модели.

<< Урок 7: Идентификация и группирование элементов (class и id)

Урок 9: Боксовая модель >>