- •Урок 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/проверщик
Урок 7: Идентификация и группирование элементов (class и id)
Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать classиidдля специфицирования свойств выбранных элементов.
Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.
Группирование элементов с помощью class
Предположим, у нас есть два списка ссылок сортов винограда - для белого и для красного вина. HTML-код может быть таким:
<p>Виноград для белого вина:</p>
<ul>
<li><a href="ri.htm">Рислинг</a></li>
<li><a href="ch.htm">Шардонэ</a></li>
<li><a href="pb.htm">Пино Блан</a></li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li><a href="cs.htm">Кабернэ Совиньон</a></li>
<li><a href="me.htm">Мерло</a></li>
<li><a href="pn.htm">Пино Нуар</a></li>
</ul>
Показать пример
Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино - красного, а остальные ссылки на этой же странице оставались синими.
Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.
Попробуем установить классы для предыдущего примера:
<p>Виноград для белого вина:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Рислинг</a></li>
<li><a href="ch.htm" class="whitewine">Шардонэ</a></li>
<li><a href="pb.htm" class="whitewine">Пино Блан</a></li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li><a href="cs.htm" class="redwine">Кабернэ Совиньон</a></li>
<li><a href="me.htm" class="redwine">Мерло</a></li>
<li><a href="pn.htm" class="redwine">Пино Нуар</a></li>
</ul>
Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Показать пример
Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_классав таблице стилей документа.
Идентификация элемента с помощью id
Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.
Особенность idв том, что в документе не может быть более одного элемента с данным конкретнымid. Каждыйidдолжен быть уникальным. В других случаях используйте атрибутclass. Теперь взглянем на пример использованияid:
<h1>Глава 1</h1>
...
<h2>Глава 1.1</h2>
...
<h2>Глава 1.2</h2>
...
<h1>Глава 2</h1>
...
<h2>Глава 2.1</h2>
...
<h3>Глава 2.1.2</h3>
...
Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить idкаждой главе:
<h1 id="c1">Глава 1</h1>
...
<h2 id="c1-1">Глава 1.1</h2>
...
<h2 id="c1-2">Глава 1.2</h2>
...
<h1 id="c2">Глава 2</h1>
...
<h2 id="c2-1">Глава 2.1</h2>
...
<h3 id="c2-1-2">Глава 2.1.2</h3>
...
Заголовок, скажем, chapter 1.2, должен быть красным. Это делается в соответствии с CSS:
#c1-2 {
color: red;
}
Показать пример
Как показано в предыдущем примере, вы можете определять свойства конкретного элемента с помощью #id в таблице стилей документа.
Резюме
В этом уроке мы разобрали, как, с помощью селекторов classиid, вы можете специфицировать свойства конкретных элементов.
В следующем урокемы разберём два HTML-элемента, которые широко используются в сочетании с CSS:<span>и<div>.