Приднестровская поддержка XOOPS
Задавать стили для элемента, конечно, удобно, однако что делать, если возникает необходимость определения различных стилей для нескольких элементов одного типа, размещенных в различных частях страницы? На помощь придут классы.
Рассмотрим следующий пример, в котором задается синий цвет шрифта для всех абзацев:
p {
color: #0000FF;
}
Отлично! А теперь представьте, что на вашей странице будет расположена боковая панель с голубым фоном. При этом голубой текст на панели сольется с ним, и разобрать что-либо станет просто невозможно. Эту проблему можно решить, определив класс для текста, выводимого на боковой панели, а затем задав для этого класса необходимый стиль с помощью CSS.
Для создания абзаца класса sidebar необходимо вначале добавить атрибут class с соответствующим значением в открывающий тег:
<p class="sidebar">Этот текст будет белым.</p>
Затем можно приступить к описанию стиля для данного класса:
p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
Во втором правиле используется селектор класса, определяющий стиль для любого элемента со значением sidebar атрибута class. Перед именем ставится точка, указывающая, что это класс, а не HTML-элемент.
А если на панели также присутствуют ссылки? По умолчанию все ссылки в вашем документе будут оформлены одинаковым образом. Однако, если добавить в тег ссылки атрибут class=”sidebar”, они также станут белыми:
<p class="sidebar">Этот текст будет белым, <a class="sidebar" href="link.html">ссылка тоже белая</a>.</p>
Прекрасно. Но, возможно, вам хотелось бы, чтобы ссылки отличались от основного текста? К примеру, им можно было бы придать жирное начертание. Добавление описания стиля для жирного начертания текста к набору стилей для класса sidebar приведет к тому, что весь текст на панели будет выведен жирным шрифтом, что противоречит поставленной нами цели. Нужен CSS-селектор для выбора ссылок, размещенных внутри элемента класса sidebar. Далее путем комбинации селектора типа и селектора класса можно добиться желаемого эффекта:
p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
a.sidebar:link, a.sidebar:visited {
font-weight: bold;
}
Обратите внимание, что в данном примере используются псевдоклассы :link и :visited. Мы поговорим о псевдоклассах чуть позже в этой главе.
Если вы добавите приведенные выше стили в таблицу стилей вашего сайта и обновите страницу в браузере, то увидите, что ссылки будут отображены жирным шрифтом белого цвета, поскольку к ним были применены оба определенных для класса sidebar правила стилей. Однако если бы мы добавили в третье правило стиль изменения цвета шрифта, цвет ссылок также был бы изменен, поскольку третий селектор более конкретен, а правила CSS применяются в порядке увеличения конкретности селекторов.
Кстати, процесс применения различных правил стилей к одному и тому же элементу называется каскадированием; отсюда и термин «каскадные таблицы стилей». Ближе к концу главы мы узнаем о степени конкретности различных селекторов и правилах каскадирования.
Отправитель | Нити |
---|
3 пользователь(ей) активно (3 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 3 далее... |