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

К началу


 

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

47813. Сборник клинических задач. Лечебное дело 740 KB
  При осмотре влагалищными зеркалами: слизистая оболочка влагалища и шейки матки синюшная. Устанавливается на основании сомнительных и вероятных признаков беременности: отвращение к запахам тошнота отсутствие менструации синюшность слизистой оболочки влагалища и шейки матки увеличение тела матки. Дополнительные методы диагностики беременности: определение ХГЧ гормона хорионического гонодотропина в сыворотке крови и моче; ультразвуковое исследование матки. по величине тела матки 8 недель небеременная матка имеет размер с крупную...
47816. Физика. Учебно-методический комплекс 1.67 MB
  Общие свойства и характеристики волновых процессов. Заряды одного знака отталкиваются друг от друга заряды разных знаков притягиваются рис. Шелк Стекло = Мех Янтарь = Рис. Величина элементарного заряда по абсолютной величине в СИ: Электрические заряды присущи многим элементарным частицам в частности электронам и протонам входящим в состав различных атомов из которых построены все тела в природе.
47817. ОБЛІК У БЮДЖЕТНИХ УСТАНОВАХ. КОНСПЕКТ ЛЕКЦІЙ 1.48 MB
  Метою вивчення дисципліни є засвоєння теорії і практики бухгалтерського обліку в бюджетних установах оволодіння студентами базовими знаннями з організації і функціонування бюджетних установ формування вміння орієнтуватись у законодавчонормативних документах та інструктивнометодичних матеріалах з організації та методики бухгалтерського обліку в...
47818. ОСНОВЫ ПРАВА 891 KB
  Теория права. Признаки государства: Наличие особой публичной власти не совпадающей с основным населением особый аппарат управления и принуждения Территориальная организация населения государство защищает интересы каждого субъекта находящегося на его территории в отличие от власти в догосударственный период когда интересы субъекта защищались либо по признаку принадлежности к данному сообществу либо по признаку родства Наличие права Налоги обязательные платежи с субъектов идущие в т. на содержание “публичной властиâ€...
47819. Інвестування. Навчально-методичний посібник 789 KB
  Рецензенти: РВВ ЖДТУ Житомир 2005 ВСТУП Мета і завдання дисципліни її місце у навчальному процесі Актуальним завданням на сьогодні є розвиток інвестиційної діяльності спрямованого на створення привабливого інвестиційного середовища та суттєвого нарощування обсягів інвестицій. Разом з тим річні обсяги інвестицій в Україні поки ще залишаються на низькому рівні через велику низку причин: несприятливий інвестиційний клімат нерозвинутість фондового ринку та фінансовокредитної системи високий податковий тиск неефективне використання...
47821. Художественные направления, течения и школы в литературе ХХ века. Модернизм и постмодернизм: проблема соотношения понятий в современном литературоведении 61.5 KB
  Модернизм и постмодернизм: проблема соотношения понятий в современном литературоведении. Открыть и разрешить вопрос соотношения модеонизма и постмодернизма. Воникновение и развитие постмодернизма. Попарт сегодня предстает как переход от модернизма к постмодернизму.