Подробнее про динамические псевдоклассы

Послание № 10

Комбинаторы CSS

Добавим к нашим знаниям про селекторы ряд новшеств. Сегодня мы познакомимся со специальными знаками между селекторами, которые привносят разнообразие в работе селекторов.

Вложенные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут вложенные селекторы. Например, задать стиль для тега <b> только когда он находится внутри контейнера <p>.

Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

Синтаксис:

nav span { Описание правил стиля }

В этом случае стиль будет применяться к тегу <span>, когда соблюдается следующий код <nav> <span> … </span> </nav>.

Не обязательно должно быть два тега, допускается произвольный уровень вложения. При этом конструкция может записываться так: div div ul li {...}.

Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко выяснить с помощью дерева элементов — так называется структура отношений тегов документа между собой.

Синтаксис:

nav > span { Описание правил стиля }

Стиль применяется к элементу span, только когда он является дочерним для элемента nav, то есть, когда будет располагаться на первом уровне вложенности.

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

Синтаксис:

nav + span { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами nav и span.

Стиль при такой записи применяется к элементу span, но только в том случае, если он является соседним для элемента nav и следует сразу после него.

Рассмотрим несколько примеров.

1. <p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

2. <p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

3. <p>Lorem <b>ipsum</b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Родственные селекторы

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида nav + span), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1 ~ p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h1>.

При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

1. Здесь красный цвет текста будет установлен для всех абзацев.

h1 ~ p { color: red; }

<h1>Заголовок</h1>

<p>Абзац 1</p>

<p>Абзац 2</p>

2. Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h1> и <p> не имеют общего родителя.

h1 ~ p { color: red; }

<h1>Заголовок</h1>

<p>Абзац 1</p>

 <div><p>Абзац 2</p></div>

<p>Абзац 3</p>

Синтаксис:

nav ~ span { Описание правил стиля }

Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами.

Псевдоклассы

Псевдоклассы описывают характеристики элементов, такие как динамическое состояние — нажатая ссылка, язык кодировки — абзац на другом языке, расположение в документе и т.д.

Псевдоклассы делятся на статические, например, :last-of-type, и динамические, например, :hover, т.е. появляющиеся у элемента в процессе взаимодействия пользователя с веб-страницей.

Важно!

Имена псевдоклассов чувствительны к регистру.

Виды псевдоклассов:

· Динамические псевдоклассы;

· Псевдоклассы пользовательского интерфейса;

· Структурные псевдоклассы;

· Псевдокласс отрицания:not();

Важно запомнить:

· Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к какому-нибудь селектору.

· Псевдокласс будет определять только определённое состояние этого селектора.

Синтаксис выглядит следующим образом:

селектор:псевдокласс { }, например:

p:hover{

       background-color: red;

}

Этот код сделает фон красным у всех тегов <p>, но только в тот момент, когда на них будет наведен курсор мыши.

Важно!

Пробела между селектором и псевдоклассом нет, это необходимо для того, чтобы показать, что они связаны друг с другом.

Динамические псевдоклассы

В процессе взаимодействия пользователя со страницей html-элементы приобретают динамические характеристики. Например, когда вы переходите по ссылке, html-элемент <a>…</a> приобретает следующие свойства (характеристики):

1. Когда вы наводите на ссылку, она получает a:hover;

2. Когда вы уже перешли по ссылке — a:visited.

Доступ к таким динамическим характеристикам можно получить только с помощью псевдоклассов.

Позиционирование

Поток документа

Давайте еще раз вспомним, что такое поток документа.

Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.

Любой элемент, который находится в потоке, занимает на странице свою собственную площадь и, если надо, отталкивает от себя соседей с помощью маргинов (margin).

Теперь давайте познакомимся с CSS свойствами, которые могут всё немного изменить.

Свойство positions и свойства top, bottom, left, right

Для изменения типа позиционирования применяется свойство position. Само по себе это свойство используется крайне редко и как правило идёт в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.

• left — задаёт координаты левого края элемента от левого края родителя или левого края исходного положения элемента.
• right — задаёт координаты правого края элемента от правого края родителя или правого края исходного положения элемента.
• top — задаёт координаты верхнего края элемента от верхнего края родителя или верхнего края исходного положения элемента.
• bottom — задаёт координаты нижнего края элемента от нижнего края родителя или нижнего края исходного положения элемента.

Заметьте, что напрямую нельзя задать положение правого края элемента от левого края родителя и наоборот. Также нельзя задать положение верхнего края элемента от нижнего края родителя и наоборот.

У position есть пять значений:

• static — нормальное или статичное позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static — это значение по умолчанию для position.
• relative — относительное позиционирование. Изменяет положение элемента от его исходного расположения.
• absolute — абсолютное позиционирование. Элемент при этом не существует в потоке документа и его положение задаётся относительно краёв родителя, но при этом у родителя должно быть установлено свойство position:relative; если его нет то элемент будет спозиционирован относительно краев браузера.
• fixed — фиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
• sticky — липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы.

Свойство position не наследуется, так что для дочерних элементов его требуется указывать явно.

Абсолютное позиционирование

Значение absolute свойства position задаёт элементу абсолютное позиционирование.

Абсолютно позиционированные элементы обладают следующими особенностями:

1. Выпадают из потока документа. Место, которое они занимали, становится как бы пустым и его занимают соседние элементы.

2. Ширина по умолчанию зависит от содержимого (а не растягивается на всю доступную ширину).

3. Остаются на том же месте, где были, если не заданы значения свойств top, left, right, bottom.

На рисунке мы можем наблюдать, что наш блок вышел из потока документа, его место заняли другие, а сам он стал располагаться в зависимости от всей страницы. (при условии простой точки координат)

Свойства left, top, right и bottom по-разному работают для элементов с абсолютным и относительным позиционированием.

Если для «относительных» элементов эти свойства задают смещение относительно исходной позиции, то для «абсолютных» элементов они задают расположение относительно некой системы координат, как для точки на графике.

По умолчанию такой системой координат является окно браузера, а точки начала координат привязаны к его углам.

Свойство left задает отступ от левого края окна браузера. Если свойству задать отрицательное значение, то элемент сместится за левый край браузера (при этом полоса прокрутки не появится).

Свойство top задает отступ от верхнего края окна браузера до верхнего края абсолютно спозиционированного элемента.

Свойство right задает отступ от правого края окна браузера до правого края «абсолютного» элемента.Это свойство позволяет легко прижать элемент любой ширины к правому краю окна. Если задать отрицательное значение для right, то элемент сместится за край окна, но при этом появится полоса прокру тки.

Свойство bottom задает отступ от нижнего края окна браузера до нижнего края «абсолютного» элемента. Отрицательное значение bottom затолкнет элемент за нижний край окна браузера и при этом тоже появится полоса прокрутки.

Точка отсчёта координат

По умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к окну браузера. Однако, систему координат можно изменить.

Если какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование (position:relative), то элемент будет позиционироваться относительно этого родителя.

Неявная точка отсчёта

Неявная точка отсчета — это то место, где находился элемент до того, как ему задали абсолютное позиционирование. Если «абсолютному» элементу не задавать свойства left... bottom, то он выпадет из потока, но останется на прежнем месте.

Липкое позиционирование

Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы.

Как правило, применяется к заголовкам, меню или навигации для быстрого к ним доступа или наглядности.

Липкое позиционирование осуществляется с помощью значения sticky свойства position. При этом с помощью свойства top мы указываем точку, по достижении которой при прокрутке элемент превращается в фиксированный

Следует понимать, что при вертикальной прокрутке для элемента имеет смысл указывать только top и bottom. При горизонтальной прокрутке будут работать только свойства left и right. Также имеет значение, чтобы высота или ширина родительского контейнера была больше размера элемента.

Прилипание элемента можно делать внутри блока с overflow, у которого значение задано как scroll или auto.

О свойстве Overflow

Каждый элемент на странице является прямоугольником. Размеры, позиционирование и поведение может регулироваться через CSS. Под поведением подразумевается то, как элемент обрабатывает события, когда изменяется контент снаружи и внутри. Например, если вы не установили элементу высоту, то она будет увеличиваться пока в элементе не поместится все содержимое. Но что случится, когда вы все-таки установите высоту или ширину для элемента, а содержимое не поместится? Здесь нам понадобится CSS-свойство overflow, которое позволяет вам указать как поступать в таких случаях.

Всего существует четыре значения для этого свойства:

· visible (по умолчанию);

· hidden;

· scroll;

· auto.

Также есть родственные свойства overflow-y и overflow-x, которые используются гораздо реже. Давайте рассмотрим поведение элементов с фиксированными размерами для каждого значения overflow и обсудим общие случаи использования.

Visible

Если вы не укажете свойство overflow, то по умолчанию оно будет равно visible. Итак, в основном, нет смысла явно устанавливать свойство в visible, до тех пор, пока оно не будет переназначено где-нибудь в другом месте, а вам потребуется поведение по умолчанию.

Здесь важно помнить, что даже если снаружи элемента есть видимый контент, этот контент не сместится на странице. Например:

В основном, вам не должно понадобиться устанавливать фиксированную высоту для элементов с текстом в них, поэтому таких ситуаций возникать не должно.

Hidden

Противоположное значение - hidden. В этом случае элемент прячет любой контент, который выходит за его границы.

Такое поведение особенно удобно для использования с динамическим контентом, возможности overflow позволяют избежать серьёзных проблем с вёрсткой макета. Однако, помните, что в этом случае контент скрыт и никаким способом он не станет доступным. Таким образом, если у пользователя размер шрифта по умолчанию больше, чем вы ожидали, текст может оказаться за пределами элемента и оказаться спрятанным от его глаз.

Scroll

Если элементу установлено значение scroll, то он будет скрывать не поместившееся содержимое, но появятся скроллбары, чтобы была возможность просмотреть весь контент.

Заметьте, что в этом случае вам будут показаны оба скроллбара, как горизонтальный, так и вертикальный, даже если для контента достаточно только одного из них.

Auto

Значение auto похоже на значение scroll, за исключением того, что скроллбары показываются, только там, где они действительно необходимы.

Послание № 10

Комбинаторы CSS

Добавим к нашим знаниям про селекторы ряд новшеств. Сегодня мы познакомимся со специальными знаками между селекторами, которые привносят разнообразие в работе селекторов.

Вложенные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут вложенные селекторы. Например, задать стиль для тега <b> только когда он находится внутри контейнера <p>.

Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.

Синтаксис:

nav span { Описание правил стиля }

В этом случае стиль будет применяться к тегу <span>, когда соблюдается следующий код <nav> <span> … </span> </nav>.

Не обязательно должно быть два тега, допускается произвольный уровень вложения. При этом конструкция может записываться так: div div ul li {...}.

Дочерние селекторы

Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко выяснить с помощью дерева элементов — так называется структура отношений тегов документа между собой.

Синтаксис:

nav > span { Описание правил стиля }

Стиль применяется к элементу span, только когда он является дочерним для элемента nav, то есть, когда будет располагаться на первом уровне вложенности.

Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

Синтаксис:

nav + span { Описание правил стиля }

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами nav и span.

Стиль при такой записи применяется к элементу span, но только в том случае, если он является соседним для элемента nav и следует сразу после него.

Рассмотрим несколько примеров.

1. <p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.

2. <p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.

3. <p>Lorem <b>ipsum</b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.

Родственные селекторы

Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида nav + span), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1 ~ p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h1>.

При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

1. Здесь красный цвет текста будет установлен для всех абзацев.

h1 ~ p { color: red; }

<h1>Заголовок</h1>

<p>Абзац 1</p>

<p>Абзац 2</p>

2. Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку <h1> и <p> не имеют общего родителя.

h1 ~ p { color: red; }

<h1>Заголовок</h1>

<p>Абзац 1</p>

 <div><p>Абзац 2</p></div>

<p>Абзац 3</p>

Синтаксис:

nav ~ span { Описание правил стиля }

Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами.

Псевдоклассы

Псевдоклассы описывают характеристики элементов, такие как динамическое состояние — нажатая ссылка, язык кодировки — абзац на другом языке, расположение в документе и т.д.

Псевдоклассы делятся на статические, например, :last-of-type, и динамические, например, :hover, т.е. появляющиеся у элемента в процессе взаимодействия пользователя с веб-страницей.

Важно!

Имена псевдоклассов чувствительны к регистру.

Виды псевдоклассов:

· Динамические псевдоклассы;

· Псевдоклассы пользовательского интерфейса;

· Структурные псевдоклассы;

· Псевдокласс отрицания:not();

Важно запомнить:

· Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к какому-нибудь селектору.

· Псевдокласс будет определять только определённое состояние этого селектора.

Синтаксис выглядит следующим образом:

селектор:псевдокласс { }, например:

p:hover{

       background-color: red;

}

Этот код сделает фон красным у всех тегов <p>, но только в тот момент, когда на них будет наведен курсор мыши.

Важно!

Пробела между селектором и псевдоклассом нет, это необходимо для того, чтобы показать, что они связаны друг с другом.

Динамические псевдоклассы

В процессе взаимодействия пользователя со страницей html-элементы приобретают динамические характеристики. Например, когда вы переходите по ссылке, html-элемент <a>…</a> приобретает следующие свойства (характеристики):

1. Когда вы наводите на ссылку, она получает a:hover;

2. Когда вы уже перешли по ссылке — a:visited.

Доступ к таким динамическим характеристикам можно получить только с помощью псевдоклассов.

Подробнее про динамические псевдоклассы

Псевдокласс: link и :visited выбирают ссылки на странице, которые имеют атрибут href и находятся в определенном состоянии:

· :link — не посещенная ссылка;

· :visited — посещенная ссылка;

a:link {

color: #0000d0; /* Цвет ссылок */

}

a:visited {

color: #900060; /* Цвет посещенных ссылок */

}

Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

· :focus — элементы которые активированы посредством курсора мыши или на которые перешли с помощью клавиатуры (кнопка TAB);

.form-text:focus {

background: #ffe;

border: 1px solid #29B0D9;

}

Псевдокласс :hover Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата. Можно применять к всевозможным элементам.

div:hover {

background: #786b59;

color: #ffe;

}

Псевдокласс :active определяет стиль для активных элементов. Иными словами, стили будут срабатывать, когда на элементе нажата кнопка мыши. Обычно применяется для ссылок, но может отбирать и другие элементы на странице.

Позиционирование

Поток документа

Давайте еще раз вспомним, что такое поток документа.

Порядок отображения элементов на странице называется потоком документа. Блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.

Любой элемент, который находится в потоке, занимает на странице свою собственную площадь и, если надо, отталкивает от себя соседей с помощью маргинов (margin).

Теперь давайте познакомимся с CSS свойствами, которые могут всё немного изменить.

Свойство positions и свойства top, bottom, left, right

Для изменения типа позиционирования применяется свойство position. Само по себе это свойство используется крайне редко и как правило идёт в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.

• left — задаёт координаты левого края элемента от левого края родителя или левого края исходного положения элемента.
• right — задаёт координаты правого края элемента от правого края родителя или правого края исходного положения элемента.
• top — задаёт координаты верхнего края элемента от верхнего края родителя или верхнего края исходного положения элемента.
• bottom — задаёт координаты нижнего края элемента от нижнего края родителя или нижнего края исходного положения элемента.

Заметьте, что напрямую нельзя задать положение правого края элемента от левого края родителя и наоборот. Также нельзя задать положение верхнего края элемента от нижнего края родителя и наоборот.

У position есть пять значений:

• static — нормальное или статичное позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static — это значение по умолчанию для position.
• relative — относительное позиционирование. Изменяет положение элемента от его исходного расположения.
• absolute — абсолютное позиционирование. Элемент при этом не существует в потоке документа и его положение задаётся относительно краёв родителя, но при этом у родителя должно быть установлено свойство position:relative; если его нет то элемент будет спозиционирован относительно краев браузера.
• fixed — фиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
• sticky — липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы.

Свойство position не наследуется, так что для дочерних элементов его требуется указывать явно.