Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
1. ОСНОВЫ CSS, часть 3
1.4. Особенности описания и применения селекторов
При создании стилей для сайта, когда одновременно используется множество
селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять
дважды одни и те же элементы, их можно сгруппировать для удобства представления и
сокращения кода. Для этого используются различные способы описания нескольких
селекторов одновременно, вложенных селекторов и пр.
Универсальный селектор
Позволяет установить одновременно один стиль для всех элементов веб-страницы,
например, задать шрифт или начертание текста. В этом случае поможет универсальный
селектор, который соответствует любому элементу web-страницы. Для обозначения
универсального селектора применяется символ звездочки (*):
*{
описание правил стиля
}
Группировка селекторов
Используется, чтобы применить один набор правил к нескольким разным селекторам.
Для этого необходимые селекторы перечисляются через запятую:
#d3, table, .classA {
border-width:1px;
}
Также можно указать применение одного набора правил для элемента страницы,
относящегося к определенному тегу и классу или идентификатору одновременно, при этом
селекторы указываются слитно:
table#d3, table.classA {
border-width:1px;
}
В данном случае указанное правила будет применяться только к тем элементам,
описанным тегом
, которые имеют класс classA или имя d3.
Контекстные селекторы
Позволяют описывать стили для тегов, вложенных друг в друга. Например, задать
стиль для тега только когда он располагается внутри тега
. Таким образом можно
одновременно установить стиль для отдельного тега, а также для тега, который находится
внутри другого. Контекстный селектор состоит из простых селекторов разделенных
пробелом. Так, для селектора тега синтаксис будет следующий.
тег1 тег2 { ... }
В этом случае стиль будет применяться к <тег2>, когда он размещается внутри
<тег1>, как показано ниже.
<тег1>
<тег2> ...
Более широкие возможности контекстные селекторы дают при использовании
идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента,
который располагается внутри определенного класса. В следующем примере зеленый цвет
1
установлен для всех ссылок страницы, кроме тех, которые расположены в блоке класса
menu. Для них установлен темно-синий цвет:
CSS-стиль
Страница в браузере
a {color: green;}
.menu {
padding: 7px;
background-color: #CCCCCC;
}
Блочный элемент
Строчный элемент
SPAN
FONT
.menu a {color: navy;}
HTML code
Блочный элемент Строчный элемент
Соседние селекторы
Соседними называются элементы веб-страницы, когда они следуют непосредственно
друг за другом в коде документа. Рассмотрим несколько примеров данного отношения
элементов.
Изучение CSSсвойств и селекторов
В данном примере теги и никак не перекрываются и представляют собой
соседние элементы. То, что они расположены внутри тега
, никак не влияет на их
отношение.
Изучение CSSсвойстви селекторов
Соседними здесь являются теги и , а также и . При этом и
к соседним элементам не относятся из-за того, что между ними расположен элемент
.
Для управления стилем соседних элементов используется символ плюса (+), который
устанавливается между двумя селекторами. Общий синтаксис следующий.
селектор1 + селектор2 { описание правил стиля }
Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к
селектор2, но только в том случае, если он является соседним для селектор1 и следует
сразу после него.
Дочерние селекторы
Дочерним называется элемент, который непосредственно располагается внутри
родительского элемента. Синтаксис применения таких селекторов следующий.
селектор1>селектор2 { описание правил стиля }
Стиль применяется к селектор2, но только в том случае, если он является дочерним
для селектор1.
В следующем примере тег является дочерним по отношению к тегу
,
поскольку он находится внутри этого элемента. Соответственно
выступает в качестве
родителя .
Изучение CSS свойств и селекторов
2
Дочерние селекторы похожи на селекторы контекстные. Разница между ними
следующая. Стиль к дочернему селектору применяется только в том случае, когда он
является прямым потомком, иными словами, непосредственно располагается внутри
родительского элемента. Для контекстного селектора же допустим любой уровень
вложенности.
Селекторы атрибутов
Многие теги различаются по своему действию в зависимости от того, какие в них
используются атрибуты. Например, тег может создавать кнопку, текстовое поле и
другие элементы формы всего лишь за счет изменения значения атрибута type. При этом
создание стиля для селектора input применит стиль одновременно ко всем созданным с
помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS
введены селекторы атрибутов. Они позволяют установить стиль для элемента, если в нем
присутствует определенный атрибут тега или его значение.
Простой селектор атрибута. Устанавливает стиль для элемента, если задан
специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения
такого селектора следующий (селектор атрибута заключается в квадратные скобки) .
[атрибут1]{ описание правил стиля }
селектор1[атрибут1]{ описание правил стиля }
В первом случае стиль применяется к тем тегам, внутри которых добавлен указанный
атрибут. Во втором – только для определенных фрагментов документа, обозначенных
селектором селектор1. Пробел между именем селектора и квадратными скобками не
допускается.
Атрибут со значением. Устанавливает стиль для элемента в том случае, если задано
определённое значение специфичного атрибута. Синтаксис применения следующий.
[атрибут1="значение"]{ описание правил стиля }
селектор1[атрибут1="значение"]{ описание правил стиля }
В первом случае стиль применяется ко всем тегам, которые содержат указанное
значение. А во втором — только к определенным селекторам, атрибут которых содержит
заданное значение.
Псевдокласс
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с
помощью действий пользователя. Примером такого состояния служит текстовая ссылка,
которая меняет свой цвет при наведении на нее курсора мыши. С помощью псевдоклассов
можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий.
селектор:псевдокласс { описание правил стиля }
Вначале указывается селектор, к которому добавляется псевдокласс, затем следует
двоеточие, после которого идет имя псевдокласса. Допускается применять псевдоклассы
к именам идентификаторов или классов:
a.menu:hover {
3
color: green
}
К контекстным селекторам
.menu a:hover {
background: #FFCC00;
}
Если псевдокласс указывается без селектора впереди, то он будет применяться ко
всем элементам документа.
:hover{
color: green;
}
Условно все псевдоклассы делятся на две группы:
определяющие состояние элементов;
имеющие отношение к дереву элементов (будут рассмотрены позже).
Псевдоклассы, определяющие состояние элементов. К этой группе относятся
псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только
для этого состояния.
:active. Происходит при активации пользователем элемента. Например, ссылка
становится активной, если навести на нее курсор и кликнуть мышкой. Несмотря на то, что
активным может стать практически любой элемент веб-страницы, псевдокласс :active
используется преимущественно для ссылок.
:hover. Активизируется, когда курсор мыши находится в пределах элемента, но
щелчка по нему не происходит.
:link. Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые
пользователь еще не нажимал. Браузер некоторое время сохраняет историю посещений,
поэтому ссылка может быть помечена как посещенная потому, что по ней был ранее
зафиксирован переход.
:visited. Данный псевдокласс применяется к посещённым ссылкам. Обычно такая
ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие
параметры можно изменить.
:focus. Применяется к элементу при получении им фокуса. Например, для
текстового поля формы получение фокуса означает, что курсор установлен в поле, и с
помощью клавиатуры можно вводить в него текст.
Задания для самостоятельного решения
1. Для страницы с маленькими картинками, реализованной в предыдущем задании,
выполните следующее:
- при наведении курсора на картинку с рамкой – картинка должна увеличиться, а
рамка – пропасть;
- при наведении на картинку без рамки – картинка должна увеличиться, а рамка –
появиться;
- при наведении на центральный блок – должен изменяться его цвет;
- для тех картинок с рамкой, которые являются соседними для картинок без рамок –
выполнить увеличение картинки в два раза.
4
