Воскресенье, 17.12.2017, 07:31
Приветствую Вас Гость | rss
Меню сайта
Форма входа

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Урок 8: Группирование элементов


В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.

  •        Группирование с помощью <span>
  •        Группирование с помощью <div>

Группирование с помощью <span>

Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.

Пример - цитата из Бенджамина Франклина:

<p>Кто рано ложится и рано встаёт,
тот будет здоровым, богатым и умным</p>



Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные зелёным цветом. Для этого мы можем отметить эти преимущества с помощью <span>. Каждому блоку spanclass, который затем можно определить в нашей таблице стилей:

В HTML:

<p>Кто рано ложится и рано встаёт,
тот будет <span>здоровым</span>,
<span>богатым</span>
и <span>умным</span>.</p>


В CSS:

span{
color:#21B50B;
}


группирование с помощью span


Разумеется, вы можете также использовать id для определения стиля <span>-элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх <span>-элементов, как мы говорили в прошлом уроке.



 Группирование с помощью <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:LightSkyBlue;
}


#republicans{
background:Pink;
}



группирование с помощью div


В этих примерах мы использовали<div> и <span> для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций. Однако это - не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике.


Поиск
Календарь
«  Декабрь 2017  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031
Архив записей

rss
Яндекс.Метрика Каталог@Mail.ru - каталог ресурсов интернет