12787

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

Практическая работа

Информатика, кибернетика и программирование

Группирование элементов span и div Элементы span и div используются для структурирования документа часто совместно с атрибутами class и id. В этом уроке мы подробно рассмотрим как использовать span и div поскольку эти элементы HTML имеют важнейшее значение в CSS. Группиро...

Русский

2013-05-03

15.67 KB

2 чел.

Группирование элементов  (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>-элементов, как мы говорили в прошлом уроке.

 Задание: попробуйте в рассмотренном выше примере изменить цвет на зеленый и добавить свойство «размер шрифта» со значением 40 px.

Группирование с помощью <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;

}

  •  Показать пример

 Задание: в рассмотренном выше примере поменяйте id на class, применив свойства: цвет фона и цвет текста.

В этих примерах мы использовали <div> и <span> для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как.... Однако это - не для нашего урока. Позднее мы рассмотрим этот.

Резюме

На лабораторных 5 и 6, вы узнали о селекторах id и class и об элементах span и div.

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

К началу


 

А также другие работы, которые могут Вас заинтересовать

16055. Гражданский иск в уголовном суде или соединенный процесс 272.29 KB
  Тальберг Д.Г. Гражданский иск в уголовном суде или соединенный процесс. Киев Типография В.И. Завадского 1888 г. Предисловие Избирая предметом настоящего исследования вопрос о гражданском иске в уголовном суде я руководствовался главным образом тем соображением...
16056. Русское уголовное право 2.57 MB
  ББК 67.9928 Т 12 Составитель и ответственный редактор доктор юридических наук профессор Н.И. Загородников Рецензенты: кандидат юридических наук Л О. Иванов доктор юридических наук профессор Ф.М. Решетников Таганцев Н.С. Т 12 Русское уголовное право. Лекции. Часть...
16057. Описание предметов одежды и обуви следов повреждений и наложений как вещественных доказательств 278 KB
  МВД Украины Университет внутренних дел Н.Н. Тагаев Н.И. Козаренко ОПИСАНИЕ ПРЕДМЕТОВ ОДЕЖДЫ И ОБУВИ СЛЕДОВ ПОВРЕЖДЕНИЙ И НАЛОЖЕНИЙ КАК ВЕЩЕСТВЕННЫХ ДОКАЗАТЕЛЬСТВ Учебное пособие Под редакцией профессора А.Н. Ярмыша ...
16058. Акционерное право США и России. Сравнительный анализ 947.5 KB
  ОГЛАВЛЕНИЕ ВВЕДЕНИЕ. ББК 67.99295 С79 Сыродоева О.Н. Акционерное право США и России сравнительный анализ. М.: Издательство Спарк 1996.112 с. Сыродоева О.Н. магистр права Университет штата Виржиния США Для юристовпрактиков студентов и преподавателей ю...
16059. Устная речь следователя при осуществлении допросов на предварительном следствии с применением звуко- и видеозаписи 149 KB
  Устная речь следователя при осуществлении допросов на предварительном следствии с применением звуко и видеозаписи учебнопрактическое пособие / Калинингр. унт; Ю.И. Сучков. Калининград 1998. Методические указания и примерные образцы процессуальных документов пред...
16060. Правовые системы стран мира 7.59 MB
  Правовые системы стран мира: Энциклопедический справочник. – 3е изд. перераб. и доп. / Отв. ред. докт. юрид. наук проф. А.Я. Сухарев. – М: Издательство НОРМА 2003. Коллектив авторов: Решетников Ф.М. – доктор юридических наук Батлер У.Э. – доктор права Лондонского универси
16061. Патентознавство. Підручник 2.06 MB
  МІНІСТЕРСТВО ОСВІТИ І НАУКИ У КРАЇ і. І УЖГОРОДСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ Л.М. Сусліков В.С. Дьордяй ПАТЕНТОЗНАВСТВО Рекомендовано Міністерством освіти і науки України як навчальнометодичний посібник для студентів КИЇВ 2005 вищих навчальних закладів ...
16062. Заведомо незаконное задержание, вопросы квалификации 446.5 KB
  МИНИСТЕРСТВО ВНУТРЕННИХ ДЕЛ РОССИИ СИБИРСКИЙ ЮРИДИЧЕСКИЙ ИНСТИТУТ П.Л. Сурихин ЗАВЕДОМО НЕЗАКОННОЕ ЗАДЕРЖАНИЕ: вопросы квалификации Учебное пособие КРАСНОЯРСК 2003 ББК 00.000 Сури