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

К началу


 

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

46426. Анализ имущества предприятия и источников его финансирования 18.76 KB
  Состав имущества предприятия Имущество находящееся в собственности предприятия подразделяется на недвижимое и движимое. Структура источников финансирования предприятия Источниками собственных средств предприятия являются: уставный капитал добавочный капитал резервный капитал фонд социальной сферы целевые финансирования и поступления нераспределенная прибыль отчетного года и прошлых лет III раздел пассива баланса. Иначе говоря уставный капитал зарегистрированная в уставе предприятия часть собственного капитала.
46427. Отраслевой рынок 18.88 KB
  Закупка продовольствия в экономике ситуация на рынке для которой характерно ограниченное число потребителей и большое число продавцов производителей. На таком рынке продавцы очень чувствительны к политике ценообразования и маркетинговым стратегиям друг друга. Монополия 1 крупная компания корпорация объединяющая несколько компаний и достигающая благодаря этому положения на рынке определенного товара или группы товаров когда рынок имеет только одного продавца и множество покупателей. В ряде случаев...
46428. Ж.Пиаже: «Теория Пиаже» 18.92 KB
  Поэтому проблема познания эпистемологическая проблема не может рассматриваться отдельно от проблемы развития интеллекта. 3 Для теории развития очень важно не упустить из виду активность субъекта. Ассимиляция и аккомодация 5 Фундаментальные психологические связи рождающиеся в ходе развития состоят из ассимиляции как биологической так и интеллектуальной. 8 В развитии интеллекта ребенка существует много типов равновесия между ассимиляцией и аккомодацией которые варьируются вместе с уровнем развития и проблемами подлежащими решению.
46429. Основные закономерности ребенка раннего возраста 18.93 KB
  Именно в ней происходит приобщение ребёнка к культуре в ней формируются главные психологические новообразования этого периода: речь нагляднодейственное и образное мышление познавательная активность целенаправленность и пр. Ещё одним важнейшим направлением развития предметной деятельности является формирование целенаправленности и настойчивости действий ребёнка. Известно что деятельность ребёнка до 2х лет имеет процессуальный характер: малыш получает удовольствие от самого процесса действий их результат ещё не имеет какоголибо...
46430. «Сталинская» конституция 1936 г.: структура, особенности, права и обязанности граждан 18.95 KB
  Проект новой Конституции СССР был подготовлен к середине мая 1936 г. конституционной комиссией избранной на VII съезде Советов СССР. Конституция СССР была принята.: 1 СССР все более превращался в мощную промышленную державу утрачивались черты аграрноиндустриального государства; 2 капиталистические черты экономики были заменены социалистическими; 3 социалистическая собственность на орудия и средства производства окончательно утвердилась; 4 исчезли эскплуататорские классы; 5 образовалось колхозное крестьянство; 6 наметилась дальнейшая...
46431. Function words 18.95 KB
  A composite preposition is indivisible both syntactically and semantically, that is, no element of it can be varied, abbreviated, or extended according to the normal rules of syntax. Thus in the composite preposition for the sake of neither the definite article nor the preposition can be replaced by words of similar meaning
46432. Революция 1905-1907 гг. и ее итоги 18.97 KB
  Россия входила в число пяти крупнейших промышленных держав мира но почти все слои русского общества были недовольны своим положением. РОССИЯ В НАЧАЛЕ XX ВЕКА. Россия вошла в XX век огромной страной с почти неисчерпаемыми людскими и природными ресурсами. Россия была многонациональной империей ее населяли люди говорившие на десятках языков исповедовавшие разные веры православие ислам буддизм католицизм язычество принадлежавшие к разным культурам.
46434. Способы заключения договора 15.59 KB
  Способы заключения договора. даты заключения договора. Для факсимильной связи доказательствами будут являться: для оферента оригинал проекта договора его же факсимильный экземпляр с отметкой о его подписании с протоколом разногласий а также факсимильный экземпляр самого протокола с оригинальными своими подписью и печатью причем в протоколе обязательно указывается дата. Для акцептанта факсимильный экземпляр проекта договора с отметкой о его подписании с протоколом разногласий и оригинальными своими...