Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.
В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.
<span>
<div>
Элемент <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>
-элементов, как мы говорили в прошлом уроке.
В то время как <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мы дадим понятие Боксовой модели.
Всего комментариев: 0 | |