- •Урок 3: Цвет и фон
- •Цвет переднего плана : свойство 'color'
- •Свойство 'background-color'
- •Фоновые изображения [background-image]
- •Повторение/мультипликация фонового изображения [background-repeat]
- •Блокировка фонового изображения [background-attachment]
- •Расположение фонового рисунка [background-position]
- •Сокращённая запись [background]
- •Урок 4: Шрифты
- •Семейство шрифта [font-family]
- •Стиль шрифта [font-style]
- •Вариант шрифта [font-variant]
- •Вес шрифта [font-weight]
- •Размер шрифта [font-size]
- •Сокращённая запись [font]
- •Урок 6: Ссылки
- •Что такое псевдокласс?
- •Псевдокласс: link
- •Урок 7: Идентификация и группирование элементов (class и id)
- •Группирование элементов с помощью class
- •Идентификация элемента с помощью id
- •Урок 8: Группирование элементов (span и div)
- •Урок 9: Боксовая модель
- •Боксовая модель в css
- •Урок 10: Поля и заполнение
- •Установим поля элемента
- •Установим заполнение элемента
- •Сокращённая запись [border]
- •Свойство clear
- •Урок 14: Позиционирование элементов
- •Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •Урок 15: Наслоение с помощью z-index (Слои)
- •Урок 16: Web-стандарты и проверка кода
- •Css validator/проверщик
Урок 8: Группирование элементов (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>-элементов, как мы говорили в прошлом уроке.
Группирование с помощью <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;
}
Показать пример
В этих примерах мы использовали <div>и<span>для определения очень простых вещей - цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как.... Однако это - не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике.
Резюме
В Уроках 7и 8, вы узнали о селекторахidиclassи об элементахspanиdiv.
Теперь вы должны уметь, более или менее, группировать и идентифицировать все части документа, что уже является большим шагом в освоении CSS. В Уроке 9мы дадим понятие Боксовой модели.
Урок 9: Боксовая модель
Боксовая модель в CSS описывает боксы, генерируемые для HTML-элементов. Боксовая модель также имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На диаграмме далее показано, как построена боксовая модель: