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

К началу


 

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

43706. УКРАЇНСЬКА МОВА ЗА ПРОФЕСІЙНИМ СПРЯМУВАННЯМ. Модульний курс 4.88 MB
  Містить комплекс вправ і завдань для вироблення навичок грамотного використання засобів української мови у професійній сфері. Розроблено систему вправ, спрямованих на формування умінь аналізу наукового стилю, написання текстів різних жанрів наукового мовлення, виявлення їх особливостей та оформлення, редагування, коригування та перекладу наукових текстів.
43707. Повышение финансовой устойчивости страховой организации на примере ОСАО «РЕСО-гарантия» 22.03 MB
  Дипломная работа построена следующим образом: в первой части рассмотрены теоретические аспекты, а именно: понятие и сущность финансовой устойчивости; во второй части проведен анализ финансово-хозяйственной деятельности организации; в третьей части проведенаработка мероприятий по оптимизации финансовой устойчивости, проведена оценка эффективности внедрения предложенных мероприятий.
43708. Подсистема анализа и контроля информационных блоков автоматической системы радиовещания 984.74 KB
  Рабочая станция должна иметь достаточную производительность, быструю дисковую подсистему, достаточный объем оперативной памяти для функционирования программного обеспечения. Рабочая станция должна содержать манипулятор мышь для удобной навигации в установленном программном обеспечении, так же должна иметься клавиатура для ввода текстовой информации.
43709. ОСОБЛИВОСТІ ПРАВОВОГО СТАТУСУ ОКРЕМИХ КАТЕГОРІЙ ГРОМАДЯН ЯК СУБ’ЄКТІВ АДМІНІСТРАТИВНОГО ПРАВА 165.17 KB
  ПОНЯТТЯ ТА ЗМІСТ ПРАВОВОГО СТАТУСУ ГРОМАДЯНИНА ЯК СУБЄКТА АДМІНІСТРАТИВНОГО ПРАВА Конституція України в преамбулі закріплює прагнення Українського народу розвивати і зміцнювати демократичну соціальну правову державу. Характер їх відносин зумовлюється положенням Конституції України про те що головним обовязком держави є утвердження і забезпечення прав і свобод людини. Термін “фізична особа†ширший за термін “громадянин†оскільки включає не тільки громадян України а й громадян інших держав та осіб без громадянства. Конституція...
43710. Структура дистанционного курса (ДК) «Изготовление и испытание ПТМ» 6.4 MB
  В работе представлена структура дистанционного курса (ДК) «Изготовление и испытание ПТМ»; даны рекомендации по оформлению ДК, предложена информационная, содержательная и контрольно-мониторинговая части ДК «Изготовление и испытание ПТМ».
43711. Розробка моделі цінності інформаційних ресурсів для оптимізації побудови системи захисту інформації 302.91 KB
  Мета роботи розробка моделі цінності інформаційних ресурсів для оптимізації побудови системи захисту інформації. Обєкт дослідження цінність інформації якою володіє організація що в даній роботі позиціонується як інформаційні ресурси та входить до складу активів організації. Результатом роботи є адитивна модель цінності інформації яка включає основні елементи цінності легка для сприйняття та передбачає можливість модернізації в залежності від специфіки області в якій застосовується. Продовжити вдосконалення даної моделі можна більш...
43712. Разработка программного обеспечения для сжатия изображения 4.51 MB
  Особенность изображений состоит в том, что отдельные элементы изображения находятся в определенной связи с соседними элементами. Поэтому большинство алгоритмов преобразования изображений носит групповой характер (то есть группа пикселей)
43713. Разработка мероприятия по совершенствованию системы управления персоналом на ОАО АКБ «РОСБАНК» 17.41 MB
  Управление людьми имеет практически такую же древнюю историю, как и человечество. По мере экономического развития и появления крупных организаций, управление персоналом превратилось в особую управленческую функцию, требующую специальных знаний и навыков.
43714. Повышение технического уровня подземного горношахтного оборудования 91.49 KB
  Запасы угля Вскрытие шахтного поля. Основной базой каменного угля Украины по-прежнему остаётся Донбасс. Обогащение угля не осуществляется. Основными потребителями угля являются ТЭЦ.