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

К началу


 

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

43202. Проектирование смесителя лопастного 3.17 MB
  В гравитационных смесителях в результате подъема и сбрасывания смеси внутри вращающегося барабана рисунок 1. В смесителях непрерывного действия поступление компонентов и выход готовой смеси происходит непрерывно. При переналадке на :смесь новой марки они уступают смесителям циклического действия. а схема смесителя; 1 двигатель; 2 клиноременная передача; 3 редуктор; 4 зубчатая передача; 5 разгрузочный затвор; 6 лопастные валы; 7 лопасть; 8 корыто смесителя.
43203. Синтез и расчёт кулисного механизма 631 KB
  В механизмах привода поперечно строгальных станков используется механизм, обеспечивающий главное возвратно-поступательное движение резания. Основная масса механизмов использующихся в данных станках это кулисные механизмы. Они обеспечивают заданную скорость рабочего хода и повышенную скорость холостого хода. Расчёт и проектирование данных механизмов является важным этапом в образовании инженера. В курсе предмета «Теория машин, механизмов и манипуляторов» получаются навыки расчёта механизмов машин. Комплексным подходом к закреплению полученных знаний является выполнение курсового проекта по данному курсу. В курсовом проекте осуществляется синтез и расчёт кулисного механизма, построение и расчёт зубчатого зацепления и кулачкового механизма. При выполнении работы используются все знания, полученные за курс предмета.
43204. Разработка эскизного проекта автоматической линии 379.5 KB
  Технические требования к детали Технологичность конструкции детали с точки зрения обработки на автоматической линии. Технические требования к детали К данной детали вал-шестерня применяются следующие технические требования: 1. Масса детали 1.
43205. Разработка канала для комплексной скважинной аппаратуры 1.35 MB
  Основная погрешность канала измерения температуры Дополнительная погрешность канала измерения температуры Основная погрешность канала измерения влажности Дополнительная погрешность влагомера Влажность нефти является одним из важнейших технологических параметров. На разных этапах добычи и подготовки нефти она определяет правильность эксплуатации нефтяного пласта, интенсивность эмульгирования водо-нефтяной смеси в процессе ее перекачки, эффективность процессов деэмульсации и качество товарной нефти, поступающей на переработку. С влагосодержанием тесно связано также содержание солей, которые причиняют немалый вред оборудованию нефтеперерабатывающих заводов.
43206. АНДРЕЙ БИТОВ, ЗАХАР ПРИЛЕПИН, МИХАИЛ ЕЛИЗАРОВ: ХУДОЖЕСТВЕННЫЕ (ЛИТЕРАТУРНЫЕ) ПАРАЛЛЕЛИ 450.5 KB
  Объект нашей дипломной работы – литературный экстремизм всех трёх авторов, находящий выражение как в индивидуальных авторских стилях, так и во взаимодействии поэтических и прозаических элементов, так и в определённой философской системе, выстраиваемой в ходе повествования.
43207. Привод шаровой мельницы 2.03 MB
  Выбираем асинхронный электродвигатель закрытый обдуваемый единой серии АИР мощностью = 15 кВт и синхронной частотой вращения = 3000 об/мин
43208. Проектування привіду до стрічкового конвейєра за схемою та графіком навантаження 1.35 MB
  Закриті зубчасті передачі при коловій швидкості змащуються зануренням їх в мастило, а також за рахунок масляного туману, який утворюється за рахунок великої колової швидкості. Контактне напруження при швидкості дорівнює 475 МПа. За цими даними вибираємо необхідну в’язкість мастила і вибираємо мастило: індустріальне леговане, для зубчастих передач ИРП-150. одноступінчатого редуктора.
43209. Определение основных параметров бульдозера ДЗ-171 на базе трактора Т-170 957.5 KB
  Бульдозеры как навесное оборудование на тракторы, тягачи и другие базовые машины широко распространены, что объясняется простотой их конструкции, высокой производительностью, возможностью их использования в самых разнообразных грунтовых и климатических условиях и относитнльно низкой стоимостью выполненных работ. Применяются они в дорожном, железнодорожном, горнорудном, мелиоративном и ирригационном строительстве. Для большинства современных гусеничных бульдозеров экономически выгодная дальность дальность перемещений в настоящее время не превышает 60-80м, колесных 100-150м.
43210. Проектирование станочного приспособления 1.5 MB
  На основании этой комплексной детали будем разрабатывать и проектировать станочное приспособление. Технические характеристики для САТ630 Наибольший диаметр обрабатываемого изделия мм: над станиной 720 над суппортом 560 Расстояние между центрами мм 1 000 1 500 2 500 Максимальное перемещение суппорта мм: по оси Х 400 по оси Z 1 100 1 600 2 600 по оси Y 55 65 Максимальный вес обрабатываемой детали кг: в патроне 300 в центрах 800 Диаметр отверстия в шпинделе мм 102 166 Пределы частот вращения...