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. На следующей лабораторной работе мы дадим понятие Боксовой модели.

К началу


 

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

23670. Поиск решения со сменой подцелей 33.5 KB
  В процессе работы необходимо реализовать в среде CLIPS программу решения задачи построения башни из блоков. Вводные замечания Задача построения башни из блоков кубиков заключается в последовательном выборе из неупорядоченной кучи блоков и постановки их друг на друга. Процесс решения задачи представляет собой чередование двух фаз: выбора блока из кучи и установки его в башню. При этом больший по размерам блок не может ставиться на меньший по размерам и следовательно на каждом шаге решения задачи необходимо выбирать из кучи самый большой...
23671. Системы искусственного интеллекта. Изучение базовых команд и конструкций CLIPS 91.5 KB
  Решение: defrule datainput initialfact = printout t crlf Vvedite chislo dnei do zacheta tseloe znachenie: bind days read assert days days printout t crlf Vvedite chislo nesdelannyh laboratornyh rabot v bind works read assert works works printout t crlf Vvedite temperaturu na ulitse: bind temper read assert temper temper printout t crlf Est\' li na ulitse osadki da 1 net 0: bind rain read assert rain rain printout t crlf Is there any white rabbit da 1 net...
23672. Разработка гибридных интеллектуальных систем в среде MatLab 174.5 KB
  Постановка задачи: С помощью адаптивной сети нечеткого вывода аппроксимировать функцию: y = 2x2 Ход работы: Исходные данные для обучения нейросети: Структура нейросети имеет вид: Процесс обучения нейронной сети: Результат обучения нейронной сети: Число эпох 40 Значение ошибки 11296 Просмотр поверхности соответствующей системы нечеткого вывода: Правила сгенерированной системы нечеткого вывода: Результаты аппроксимации с помощью сети: x y Y y y δy 04 032 0322 0002000 0006250 16 512 59 0780000 0152344 28 1568 152 0480000...
23673. Изучение основных возможностей и базовых команд среды CLIPS 61 KB
  Исполнение пакетного файла Вызов редактора Инициализация конструкций Запуск МЛВ Выполнение одного шага вывода Активизация окна списка фактов Активизация окна агенды Для сброса среды CLIPS в исходное состояние используется команда clear или соответствующий пункт меню Execution. Представление фактов и работа с ними. Факты являются одной из основных форм представления информации в CLIPSсистемах и используются правилами для вывода новых фактов из имеющихся. Все текущие факты в CLIPS помещаются в список фактов factlist.
23674. КОНТРОЛЬ НАД ТРУДОВЫМ ПРОЦЕССОМ: ДЕЙСТВИЯ УПРАВЛЯЮЩИХ 173 KB
  Социология труда в советский период претендовала на роль ведущей отрасли социологического знания. Более того проявилась тенденция выдвинуть €œтруд€ на роль центральной объясняющей категории и представить вообще всю социологию как социологию труда11. К его основным элементам мы относим следующие: постановка целей; распределение функций между работниками; регулирование ритма и интенсивности труда; оценка объема и качества выполненных работ; дисциплинарные санкции; системы вознаграждения за труд. Втретьих и для нас в данном случае...
23675. ДЕЙСТВИЯ РАБОТОДАТЕЛЕЙ И СПРОС НА ТРУД 138 KB
  Они часто многое знают друг о друге перед тем как вступить в отношения занятости€ Марк Грановеттер €œСоциологические и экономические подходы к анализу рынка труда€ Лекция 12. ДЕЙСТВИЯ РАБОТОДАТЕЛЕЙ И СПРОС НА ТРУД Мы переходим к анализу проблем занятости обширной области притягивающей внимание таких дисциплин как социология труда и индустриальная социология трудовые отношения и социология профессий. Этими проблемами занятости €œведает€ и особый раздел экономической теории экономика труда €œlabor economics€. В отличие скажем от...
23676. ЧЕЛОВЕК В ДОМАШНЕМ ХОЗЯЙСТВЕ 84.5 KB
  Понятие домашнего хозяйства. Для экономистов сфера домашнего хозяйства является €œпериферией€ не первого и даже не второго порядков. Неоклассическая экономическая теория проводила жесткое различие между сферой производства в которой действовали фирмы и сферой потребления к которой безоговорочно относились домашние хозяйства. Тем не менее уже на пороге домашнего хозяйства мы сталкиваемся с проблемой: человек в таком хозяйстве может быть занят полный рабочий день и полную рабочую неделю но вправе ли мы считать его деятельность трудом Как...
23677. ПОДХОДЫ К ПРОБЛЕМАМ СОЦИАЛЬНОГО РАССЛОЕНИЯ 147.5 KB
  ПОДХОДЫ К ПРОБЛЕМАМ СОЦИАЛЬНОГО РАССЛОЕНИЯ В следующих двух лекциях мы рассмотрим проблемы социальной и экономической стратификации. И вроде бы они демонстрируют понимание того что экономические перспективы человека определяются не только уровнем материального благосостояния родителей но и €œсемейным капиталом€ который складывается из общественной репутации и социальных связей профессиональных навыков и культурных ценностей впитанных в соответствующей социальной среде. Какоето значение еще может иметь размер группы а тип социальной...
23678. МИР ХОЗЯЙСТВА: МОДЕЛИ ОДНОЛИНЕЙНОГО РАЗВИТИЯ 116.5 KB
  МИР ХОЗЯЙСТВА: МОДЕЛИ ОДНОЛИНЕЙНОГО РАЗВИТИЯ Экономика и общество связаны множеством прочных нитей. Базируясь на широком основании культурных властных и других социальных отношений экономика выступает таким образом как мир хозяйства. Каким бы конкретным вопросом не занимался исследователь не важно экономист или социолог он волейневолей всегда исходит из неких концептуальных предположений о том что представляет собой исследуемый мир хозяйства какое место занимает он в историческом процессе.