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

К началу


 

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

16949. Рефлексы головного мозга 860.01 KB
  И.М.СЕЧЕНОВ Рефлексы головного мозга ИЗДАТЕЛЬСТВО АКАДЕМИИ НАУК СССР МОСКВА 1961 1. Вам конечно случалось любезный читатель присутствовать при спорах о сущности души и ее зависимости от тела. Спорят обыкновенно или молодой человек со стариком если оба натур
16950. Перевод ЭБ из состояния холодный останов в состояние горячий останов 207 KB
  Тема: Перевод ЭБ из состояния холодный останов в состояние горячий останов. План лекции Введение 1.Состояние систем и оборудования при состоянии ЭБ холодный останов при подготовке к разогреву первого контура. 2.Разогрев 1...
16951. Перевод ЭБ из состояния горячий останов в состояние реактор критичен 143 KB
  Тема: Перевод ЭБ из состояния горячий останов в состояние реактор критичен. План лекции Введение. Состояние систем и оборудования при нахождении ЭБ в состоянии горячий останов при подготовки к выходу на МКУ. Вывод реактора в критическое состояние...
16952. Перевод ЭБ из состояния реактор критичен в состояние «Работа на мощности» 78 KB
  Тема: Перевод ЭБ из состояния реактор критичен в состояние Работа на мощности. План лекции 1.Увеличение мощности реактора до 5 Nном. 2. Увеличение мощности реактора до 20 39 Nном. 3.Разворот ТГ и включение в сеть. 4.Увеличение мощности РУ до N = 7580Nном и до номин
16953. Работа ЭБ в состоянии «Работа на мощности» 165.5 KB
  Тема: Работа ЭБ в состоянии Работа на мощности. План лекции Введение 1. Состояние систем и оборудования при состоянии ЭБ Работа на мощности. 2. Эксплуатация и техническое обслуживание оборудования РУ в режиме Работа на мощности. 3. Эксплуатация и техническ...
16954. Работа ЭБ с неполным числом петель 1 контура 51 KB
  Тема: Работа ЭБ с неполным числом петель 1 контура. План лекции Введение 1.Последовательность операций при отключении петли в резерв. 2.Подготовка петли к работе. 3.Ввод петли в работу. 4.Эксплуатация ЭБ в режиме продления компании...
16955. Перевод ЭБ из состояния «Горячий останов» в состояние Холодный останов 147.5 KB
  Лекция № 15 Тема: Перевод ЭБ из состояния Горячий останов в состояние Холодный останов. План лекции Введение 1.Подготовка РУ к расхолаживанию. 2.Расхолаживание 1 контура. 3. Расхолаживание 1 контура системой TQ122232. 4.Окончательное расхолаживание 1 контура
16956. Перевод ЭБ из состояния «работа на мощности» в состояние «горячий останов» 81 KB
  Тема: Перевод ЭБ из состояния работа на мощности в состояние горячий останов. План лекции Введение 1. Подготовка к снижению мощности и снижение мощности реактора. 2. Останов турбогенератора. 3. Разгрузка реактор...
16957. Перевод ЭБ из режима «Холодный останов» в режим «останов для ремонта» и «останов для перегрузки» 83 KB
  Тема: Перевод ЭБ из режима Холодный останов в режим останов для ремонта и останов для перегрузки. План лекции Введение 1.Дренирование 1 контура и консервация ПГ. 2.Подготовка ЭБ к ремонту. 3.Подготовка РУ к перегрузке топлива. ...