DesignJunkie.ru - Видеоуроки, Шаблоны, Photoshop, КНИГИ / УЧЕБНИКИ, Фотографии, Креатив, Графика

open

Добавить в закладки

 
 

Присоединяйся!

« Подписывайтесь на видеоуроки!

Оставайтесь на связи

 страница на фейсбук
  rss to mail
 группа вконтакте
 rss лента новостей
 следите за нами в twitter
 контакты
 feedburner лента новостей  помочь сайту

ГЛАВНАЯ

toggle shelf

Авторизация






Забыли пароль?
Ещё не зарегистрированы? Регистрация

Комментируют:

  • admin
    10
  • Abe
    5
  • semalion
    3
  • vipeakdrobilka
    2
  • CFIFok
    2

Новые комментарии:

RSS

Есть вопросы?

 

Популярные теги

Голосование

Что нужно сайту?

Псевдоклассы #2 PDF Печать E-mail
Автор Administrator   
04.04.2011 г.



Изучаем 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

 

Похожие новости:
Последние новости:
Старые новости:

 
 

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

Яндекс.Метрика

партнеры: Купить теплицу из сотового поликарбоната. Теплицы из поликарбоната, пластик, навесы.