CSS / 2. Селекторы

Одно из основных преимуществ CSS – особенно для разработчиков – это возможность легко применять набор стилей ко всем однотипным элементам. Не впечатляет? Представьте, отредактировав всего одну строку CSS, можно изменить цвета всех заголовков в документе. Вам не нравится этот синий цвет? Изменяете одну строку кода, и все заголовки станут фиолетовыми, желтыми, красно-коричневыми или любого другого цвета. Это позволяет разработчику сосредоточиться на дизайне, а не на рутинной работе.

Если кому-то захочется увидеть заголовки в другом оттенке зеленого, просто подправьте стиль и нажмите Reload. Вуаля! Через несколько секунд результат будет представлен на всеобщее обозрение. Конечно, CSS не избавит вас от всех трудностей, например, с его помощью нельзя изменить цвета GIF-изображений, но можно намного упростить внесение некоторых глобальных изменений. Итак, начнем с селекторов и структуры.
Статьи раздела '2. Селекторы':
Выбор дочерних элементов
В некоторых случаях не требуется выбирать любой элемент-потомок; напротив, необходимо сузить диапазон выбора до дочернего элемента другого элемента. Предположим, надо выбрать элемент strong, только если он является дочерним элемен...
Выбор конкретного атрибута
Последний тип селекторов атрибутов, селектор конкретного атрибута (particular attribute selector), проще показать, чем описать. Рассмотрим следующее правило: *[lang|="en"] {color: white;} Это правило будет выбирать любой эле...
Выбор между селектором классов и селектором идентификаторов
Как было показано ранее, назначать классы можно любому количеству элементов; имя класса warning было применено и к элементу p, и к элементу span и могло бы применяться к намного большему количеству элементов. С другой стороны, иде...
Выбор на основании конкретного значения атрибута
В дополнение к выбору элементов по атрибутам можно еще более сузить выбор, чтобы охватить только те элементы, атрибуты которых имеют определенное значение. Например, пусть мы хотим выделить полужирным шрифтом гиперссылку, указываю...
Выбор первого дочернего элемента
Еще один статический псевдокласс, :first-child, применяется для выбора элементов, представляющих собой первые дочерние элементы других элементов. Назначение этого псевдокласса очень легко понять неправильно, поэтому требуется разв...
Выбор по частичному значению атрибута
Любой атрибут, допускающий наличие разделенного пробелами списка слов, допускает и выбор на основании любого из этих слов. Классический пример в HTML – атрибут class, способный принимать в качестве значения несколько слов. Рассмот...
Выбор по языку
Если требуется выбрать элемент на основании его языка, то можно обратиться к псевдоклассу :lang(). С точки зрения шаблонов соответствия псевдокласс :lang() аналогичен селектору атрибутов |=. Например, чтобы выделить курсивом любой...
Выбор сестринских элементов
Скажем, требуется оформить абзац, находящийся в дереве документа на одном уровне с заголовком, или создать специальное обрамление для списка, стоящего на одном уровне с абзацем. Чтобы выбрать элемент, расположенный на одном уровне...
Группировка
На данный момент мы изучили довольно простые методики применения одного стиля к одному селектору. Но что если вы хотите один и тот же стиль применить к нескольким элементам? Тогда понадобятся несколько селекторов или потребуется п...
Группировка объявлений
Селекторы можно группировать в одно правило, а следовательно, также можно группировать и объявления. Предположим, вы хотите, чтобы текст всех элементов h1 был представлен шрифтом Helvetica фиолетового цвета высотой в 18 пикселов н...
Группируем все
Сейчас вы знаете, что можете группировать селекторы и объявления. Сочетая в одном правиле оба типа группировки, можно определять очень сложные стили посредством всего лишь нескольких выражений. Что если вы решили назначить для все...
Динамические псевдоклассы
CSS2.1 определяет три псевдокласса, которые могут изменять внешний вид документа в результате действий пользователя. Эти динамические псевдоклассы традиционно применяются для оформления гиперссылок, но их возможности намного шире....
Использование структуры документа
Как я упоминал ранее, мощь CSS обусловлена тем, что для определения соответствующих стилей и их применения они используют структуру HTML-документов. Но это еще не все, так как подразумевается, что подобные определения – единственн...
Комбинирование псевдоклассов
В CSS2.1 можно комбинировать псевдоклассы в одном селекторе. Например, можно сделать так, чтобы при зависании над ними указателя мыши непосещенные ссылки становились красными, а посещенные ссылки – красно-коричневыми: a:link:ho...
Множественные классы
В предыдущем разделе мы рассматривали значения атрибута class, состоящие из одного слова. В HTML значением class может быть и разделенный пробелами список слов. Например, если вы хотите обозначить конкретный элемент и как важное с...
Объявления и ключевые слова
В блок объявлений входит одно или несколько объявлений. Формат объявлений обычно такой: имя свойства, за которым следует двоеточие, затем значение и точка с запятой. После двоеточия и точки с запятой может быть произвольное количе...
Ограничения :first-letter и :first-line
В CSS2 псевдоэлементы :first-letter и :first-line могут применяться только к блочным элементам, таким как заголовки или абзацы, но не могут быть применены к строчным элементам, таким как гиперссылки.В CSS2.1 :first-letter применяе...
Основные правила
Как я уже упоминал, главная особенность CSS – возможность применять определенные правила ко всему набору типов элементов документа. Предположим, вы хотите установить серый цвет для всех элементов h2. В старом добром HTML это приде...
Применение специальных стилей до и после элементов
Предположим, требуется предварить каждый элемент h2 парой серебряных квадратных скобок: h2:before {content: "]]"; color: silver;} CSS2.1 позволяет вставлять генерируемое содержимое (generated content), а затем применять к не...
Применение специальных стилей к первой букве
Первый псевдоэлемент участвует в стилевом оформлении первой буквы блочного элемента: p:first-letter {color: red;} Согласно этому правилу первая буква каждого абзаца будет окрашена в красный цвет. Вместо этого можно было бы, ...

Страницы: 1 2