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

К началу


 

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

44765. Банковский маркетинг, Краткий конспект лекций 99.59 KB
  Основные понятия банковского маркетинга. Роль маркетинга в банковской деятельности. Концепция банковской технологии маркетинга. Банковская маркетинговая стратегия. Постановка маркетинговой работы в коммерческом банке. Банковская конкуренция. Маркетинг депозитарной деятельности банка. Маркетинг кредитного банковского рынка...
44766. Проект доготовочного цеха блинной на 50 мест в г.Омске 1.04 MB
  Качество обслуживания оказывает непосредственное влияние на результаты хозяйственной деятельности предприятий общественного питания. Повышения качества обслуживания способствует увеличению количества потребителей, росту товарооборота, повышению рентабельности предприятий.
44767. Электроснабжение участка токарного цеха 5.73 MB
  Сегодня на предприятии в трех цехах трудится около полутора тысяч человек - токарей, кузнецов, слесарей, электрогазосварщиков, электриков, электромонтеров, и многих других, которым приходится знать и ремонтировать самое разное горнодобывающее и металлургическое оборудование.
44768. Анализ потребительских свойств и качеств темного пива 486.5 KB
  Пиво — один из древнейших напитков в мире. Пиво известно со времен Древнего Египта (многие считают, что пшеницу и ячмень там начали культивировать для приготовления пива, а изготовление хлеба стало побочным эффектом). В ходе археологических раскопок в Египте был найден самый древний рецепт пива. В Римской империи пиво не пользовалось популярностью, здесь предпочтение отдавалось вину
44769. Изучение ассортимента, конкурентоспособности, показатели качества чая, реализуемого Иркутским Облпотребсоюзом 725 KB
  Древняя китайская мудрость гласит: Лучше обойтись три дня без еды, чем один день без чая. В этой стране чай употребляют более 5 тысяч лет. По сравнению с Китаем, Россия имеет с этим напитком лишь шапочное знакомство 300 лет. Но даже за это время чаепитие стало национальной русской традицией
44770. Изучение ассортимента и качества пряностей, реализуемых в розничном торговом предприятии г. Москвы 289 KB
  Пряностями являются разные части растений со специфическим ароматом, разной степенью жгучести и вкуса. Эти растения относятся более чем к 30 различным ботаническим семействам. Это сухие корни, семена или кора душистых растений. Они могут употребляться в целом либо измельченном виде
44771. Особенностями приготовления блюд немецкой кухни 178.5 KB
  Целью выполнения курсовой работы является ознакомление с особенностями приготовления блюд немецкой кухни, закрепление и углубление знаний будущего инженера, способного не только технически грамотно владеть существующими технологическими процессами, но и совершенствовать их и создавать новые, обеспечивающие повышение качества продукции и эффективность производства.
44772. Анализ технологии приготовления вторых горячих блюд из рыбы 1.85 MB
  Обитатели глубин содержат необходимые нашему организму витамины (особенно А и D), жиры, белки (мясо рыб содержит 18% белков). Белки мяса рыб легче усваиваются организмом человека, чем белки мяса животных. Ценной составной частью рыб, особенно океанических, является жир. Рыбий жир характеризуется высоким содержанием непредельных жирных кислот
44773. Изучение кисломолочных напитков, обогащенных бифидобактериями 309 KB
  Кисломолочные продукты – это молочные продукты, вырабатываемые сквашиванием молока или сливок чистыми культурами молочнокислых бактерий с добавлением или без добавления дрожжей и уксуснокислых бактерий. Кисломолочные напитки пользуются заслуженной популярностью у миллионов людей различных стран мира.