Свежее на сайте:

Вопросы (FAQ)

СТАТЬИ Administrator 17098 Hits
Популярные вопросы от новичков

О графическом редакторе Adobe Photoshop CS6

СТАТЬИ Administrator 27377 Hits 1 Comments
ВСЯ ПРАВДА О ADOBE PHOTOSHOP CS6 Краткое описаниеПрежде, чем мы начнем описание, хотелось бы отметить, что…
показать все

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

E-mail

Close

Изучаем CSS - Уроки верстки сайтов

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

Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.
Верстка веб-сайтов с помощью css
Браузер Internet Explorer 6 позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.

Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 1.55 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счет добавления псевдокласса :hover к селектору TR.

Верстка веб-сайтов

Результат примера показан ниже (рис. 1.34).
Верстка веб-сайтов

Псевдоклассы, имеющие отношение к дереву документа

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

:first-child

Применяется к первому дочернему элементу селектора. который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберем небольшой код (пример 1.56).

Верстка веб-сайтов

Результат примера показан ниже (рис. 1.35).

Верстка веб-сайтов

В данном примере псевдокласс :first-child добавляется к селектору P и устанавливает для него рубленый шрифт и красный цвет текста. Хотя тег <P> внутри <div> встречается по два раза, стиль будет применяться только к первым абзацам. В остальных случаях стиль внутри <p> останется исходным. Со следующим тегом <div> все начинается снова, поскольку родительский элемент
поменялся.

Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.
Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, по правилам типографики красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 1.57).

Верстка веб-сайтов

Результат примера показан ниже (рис. 1.36).

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



источник: designjunkie.ru

 

Комментарии:

У Вас недостаточно прав для добавления комментариев.
Возможно, Вам необходимо зарегистрироваться на сайте или пройти авторизацию.

КОММЕНТАРИИ

You are here СТАТЬИ - Псевдоклассы #2
Донор яйцеклетки ссылка. . Смотрите - паркетная доска цены за м2 от 900 рублей.