Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 6 из 62

с очередной буквой из алфавита. Добавьте соответствующий id к каждо­
му тегу

:

R
. Чтобы создать ссылку в HTML, добавьте символ решетки и имя идентификатора в конец адреса URL — index html#R
. Эта ссылка указывает непосредственно на элемент с
#R
страницы index.html
(использо­
вание идентификатора таким способом оказывает действие, аналогичное применению якорного тега

в языке HTML:
R
).
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Стилизация групп тегов
Иногда необходимо быстро применить одинаковое форматирование сразу к несколь- ким различным элементам веб-страницы. Например, нужно, чтобы все заголовки имели один и тот же цвет и шрифт. Создание отдельного стиля для каждого заголов- ка определенного уровня — слишком объемная работа. А если вы потом захотите изменить цвет всех заголовков одновременно, то придется все обновлять. Для реше- ния этой задачи лучше использовать групповые селекторы, которые позволяют при- менить стиль, описав его лишь один раз, одновременно ко всем элементам.
Создание групповых селекторов
Для работы с группой селекторов создайте список, в котором один селектор отде- лен от другого запятыми. Таким образом, получаем:
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
Здесь приведены только селекторы типов, но можно использовать любые виды
(или их сочетание). Например, стиль с групповым селектором, который определя- ет одинаковый цвет шрифта для
, и любых других, принадлежащих классу
.copyright
, а также тегу с идентификатором
#banner h1, p, .copyright, #banner { color: #F1CD33; }
ПРИМЕЧАНИЕ
Если вам нужно применить к нескольким элементам веб-страницы одинаковые и в то же время несколько различные форматирующие свойства, то можете создать групповой селектор с общими командами и отдельные стили с уникальным форматированием для каждого индивидуального эле- мента. Другими словами, два (или больше) стиля могут форматировать один и тот же тег. Это и является мощной особенностью языка CSS (по этой теме см. гл. 5).
Универсальный селектор
Групповые селекторы можно рассматривать как подручное средство для примене- ния одинаковых свойств различных элементов. CSS предоставляет универсальный селектор
*
для выборки всех тегов веб-страницы. Например, если вы хотите, чтобы все отображалось полужирным шрифтом, нужно добавить следующий код:
a, p, img, h1, h2, h3, h4, h5 ...... { font-weight: bold; }
Использование символа
*
— более быстрый способ сообщить CSS о выборке
всех HTML-тегов веб-страницы:
* { font-weight: bold; }

Глава 3. Селекторы: определение элементов стилизации
77
Кроме того, вы можете задействовать универсальный селектор в составе селек- тора потомков: применяете стиль ко всем тегам-потомкам, подчиненным опреде- ленному элементу веб-страницы. Например, .
banner *
выбирает все теги внутри элемента, имеющего атрибут class со значением .
banner
(более подробно о селекто- рах потомков вы узнаете чуть позже).
Универсальный селектор не определен как тип тегов, поэтому трудно описать его воздействие на HTML-теги сайта. По этой причине дизайнеры со стажем ис- пользуют для форматирования различных элементов такую особенность языка
CSS, как наследование. Она описана в следующей главе.
Стилизация вложенных тегов
Выбор типа селекторов обусловлен в каждом случае конкретной целью. Селекторы типов можно быстро и просто создать, но они придают всем экземплярам стилизу- емого элемента одинаковый внешний вид. Это бывает необходимо, например, если нужно, чтобы все заголовки второго уровня вашей веб-страницы выглядели одина- ково. Классовые и ID-селекторы обеспечивают большую гибкость независимой сти- лизации отдельно взятых элементов страницы, но создание стилей для селекторов class или
ID
также требует добавления соответствующего class
- или
ID
-атрибута к тегам HTML, которые требуют стилевого оформления. Это добавляет не только работу для вас, но и код для вашего HTML-файла. Все, что нужно в этом случае, — объединить простоту использования селекторов тегов с точностью селекторов клас- сов и идентификаторов. И такое средство в CSS есть, это селекторы потомков.
Их применяют для того, чтобы единообразно отформатировать целый набор тегов, но только когда они расположены в определенном контексте — фрагменте веб-страницы. Их работу можно описать так: «Эй вы,

-теги на панели навигации, прислушайтесь. У меня есть для вас указания по форматированию. А все остальные

-теги проходите мимо, вам здесь нечего смотреть».
Селекторы потомков позволяют форматировать теги в зависимости от их связей с другими тегами. Чтобы разобраться, как они работают, придется немного поко- паться в языке HTML. Понимание работы селекторов потомков поможет получить представление о функционировании других типов селекторов, работа которых опи- сана далее.
ПРИМЕЧАНИЕ
Селекторы потомков могут показаться немного запутанными на первый взгляд, однако это одна из наиболее важных технологий для эффективного и точного применения CSS. Запаситесь терпением, и вы скоро их освоите.
Дерево HTML
Код HTML, на котором написана любая веб-страница, напоминает генеалогическое дерево. Первый используемый HTML-тег —

— похож на главного прароди- теля всех остальных. Из него выходят