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

К началу


 

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

33057. Практика пізнання 13.32 KB
  Практика це матеріальна чуттєвопредметна цілепокладаюча діяльність людини що має своїм змістом засвоєння і перетворення природних і соціальних об'єктів і становить загальну основу рушійну силу розвитку людського суспільства і пізнання. Структура практикимістить у собі такі моменти якпотреба мета мотив доцільна діяльність у вигляді її окремих актів предмет до якого спрямована діяльність засоби за допомогою яких досягається мета і нарешті результатдіяльності. ♦ Основним і вихідним видом суспільної практики є насамперед...
33058. Процес абстрактного, логічного мислення 14.88 KB
  Процес пізнання завжди починається з безпосереднього живого споглядання тобто з безпосередньої взаємодії людини в практичній діяльності з предметами і явищами. Основні формичуттєвого пізнання: ♦ відчуття; ♦ сприймання; ♦ уявлення. Першою і початковою формою і джерелом чуттєвого пізнання є відчуття. Тому сприймання це така форма чуттєвого пізнання коли у свідомості людини відбувається цілісне відображення зовнішнього матеріального предмета з усією сукупністю його властивостей якостей сторін які відображені у відчуттях.
33059. Поняття світогляду, його специфіка, структура, функції 13.72 KB
  Поняття світогляду його специфіка структура функції Отже світогляд це сукупність поглядів оцінок принципів що визначають найзагальніше усвідомлення розуміння світу місця в ньому людини а також ціннісні орієнтації людей їх життєві позиції. Світогляд як складне духовне явище поєднує в собі переконання ідеали цілі мотиви поведінки інтереси ціннісні орієнтації принципи пізнання моральні норми естетичні погляди тощо. Структура світогляду залежить від певних чинників. Залежно від співвідношення інтелектуального та емоційного...
33060. Предмет і специфіку філософії 13.27 KB
  Методологічна функція полягає в тому що філософія виступає як загальне вчення про метод і як сукупність найбільш загальних методів пізнання і освоєння дійсності людиною. Прогностична функція філософії формулювання в її рамках гіпотез про загальні тенденції розвитку матерії і свідомості людини і світу. Критична функція філософії.
33061. Зародження філософії 15.38 KB
  Зародження філософії історично співпадає з виникненням зачатків наукового знання з появою громадської потреби в цілісному переконанні на світ і людину у вивченні загальних принципів буття і пізнання. онтос буття суще вчення про буття чи про першооснови усього сущого : проблема буття розуміється тут в універсальному всеосяжному сенсі чому є щось а не ніщо одне з перших філософських питань аналізуються буття сам принцип існування небуття чи можливе неіснування ніщо буття матеріальне природа і ідеальне ідея думка...
33062. Співвідношення філософії та науки 15.18 KB
  Порівняння пізнавальних можливостей філософії і конкретних наук зясування місця філософії в систему людських знань має давні традиції в європейській культурі. Ще в античності Платон і Арістотель намагалися розмежувати особливості науки і філософії. При цьому теоретична міць філософії прагнення логічно обгрунтувати знання висловити його в теоретичній формі виявлялася несумірної з можливостями конкретних наук що давало підстави протягом довгих століть від Аристотеля до Гегеля вважати філософію наукою наук .
33063. Джерела, провідні ідеї та напрями філософії Стародавньої Індії 59.26 KB
  Джерела провідні ідеї та напрями філософії Стародавньої Індії Зародки філософського мислення Індії сягають у глибоку давнину середина І тис. Канонічним духовним джерелом Стародавньої Індії є Веди із їх назвою споріднено наше слово відати знати записані на листях пальми приблизно за 1. Таким чином вже у найдавніших духовних джерелах Стародавньої Індії йдеться про фундаментальні моральні ідеї про певне осмислення становища людини у світі про різні шляхи звільнення від кармінних законів долі найкращим з яких є шлях дійового...
33064. Канонічні джерела, провідні ідеї та напрями філософії Стародавнього Китаю 57.41 KB
  Давньокитайська філософія порівняно з давньоіндійською виглядає стрункішою, деталізованішою (аж до нумерології та побудови вичерпних систем комбінаторики подвійних символічних елементів світобудови) та більше зануреною у глибину суперечливого, парадоксального мислення.
33065. Натурфілософія 13.62 KB
  ntur природа філософія природи умоглядне тлумачення природи що розглядається в її цілісності що спирається на абстрактні поняття що виробляються в ході виникнення і розвитку філософії. фюсис природа або фюсиологами а перші філософські трактати як правило були присвячені дослідженню природи її пристрої трактати Про природу були написані і Фалесом і Гераклитом і Анаксимандром і Анаксименом і Парменидом. філософія ще не існувала окремо від пізнання природи а знання про природу окремо від філософії. У центрі уваги усієї...