Все доброго времени суток и удачного изучения нового материала.(или повторение старого)
Важную роль в изучении CSS составляют псевдоклассы и псевдоэлементы. Они используются при проработке дизайна практически всех сайтов, исключение могут составить только старые сайты. Псевдоклассы и псевдоэлементы очень нужны при составлении красивого оформления.
Синтаксис у них простой и одинаковый: псевдоклассы и псевдоэлементы указываются уже после объявления селектора, затем двоеточие : и название псевдокласса / псевдоэлемента.
Вы, наверное, обращали внимание на то, что на некоторых сайтах при наведении курсора на ссылку она, например, меняет цвет. Это возможно благодаря псевдоклассам и псевдоэлементам. Рассмотрим пример.
Вышеуказанный код обозначает, что при наведении (hover) на ссылку, то есть элемент a (<a>) цвет текста ссылки (color) будет чёрным.
Псевдоклассы
Псевдоклассы - это элементы, которые указывают определённый набор стилей, в случае различных событий и изменений состояния элемента. Например, как изменятся стили в случае наведения, клика и тд на элемент.
Вернёмся к самому простому примеру - ссылке. Выше мы рассмотрели код, в случае которого ссылка меняла цвет при наведении. Как Вы можете догадаться, можно добавить и другие стили - изменение фона, размера шрифта, расположение элемента, возможность добавить или убрать нижнее подчёркивание и многое другое.
Список самых используемых псевдоклассов, которые обязательно пригодятся в работе:
hover - при наведении курсора на элемент
focus - при клике на элемент, например поле для ввода данных
active - при активации элемента пользователем, то есть в момент клика
link - стиль для не посещённых ссылок
visited - стилевое оформление к посещенным ссылкам
target - переход к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
root - определение корневого элемента документа
indeterminate - стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
checked - стиль для radio и checkbox в выбранном положении: input:checked
firstchild - стиль для первого дочернего элемента селектора
lastchild - изменения в последнем элементе родителя
onlychild - для дочерних элементов, единственных у родителя
lang (en) - определение языка элемента, где en выбранный язык
Код CSS Примеры
Псевдоэлементы
Псевдоэлементы - это элементы, которые позволяют генерировать содержимое, не указанное в HTML документе. Например, с помощью псевдоклассов можно какой-либо текст до или после элемента, или назначить стили для выделенного текста.
Список основных используемых псевдоэлементов, которые пригодятся в работе:
after - добавление контента ПОСЛЕ указанного элемента
before - добавление контента ДО указанного элемента
firstletter - стили для первой буквы в контенте элемента
firstline - стилевое оформление первой строки текста в элементе
selection - применение стилей при выделении текста в элементе
Одной из самых распространённых задач является добавление фразы до или после элемента. Рассмотрим на примере цитат. Допустим для определённого элемента нужно добавить текст перед ним.
Также при помощи уже after можно добавить слова после указанного класса. Например, слово Далее или Авторскую подпись.
Обязательно проверьте работу псевдоклассов и псевдоэлементов! Это увлекательно)
Спасибо за внимание!
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
Важную роль в изучении CSS составляют псевдоклассы и псевдоэлементы. Они используются при проработке дизайна практически всех сайтов, исключение могут составить только старые сайты. Псевдоклассы и псевдоэлементы очень нужны при составлении красивого оформления.
Синтаксис у них простой и одинаковый: псевдоклассы и псевдоэлементы указываются уже после объявления селектора, затем двоеточие : и название псевдокласса / псевдоэлемента.
Вы, наверное, обращали внимание на то, что на некоторых сайтах при наведении курсора на ссылку она, например, меняет цвет. Это возможно благодаря псевдоклассам и псевдоэлементам. Рассмотрим пример.
HTML:
/* селектор двоеточие псевдокласс */
a:hover {
color:#000; /* текст ссылки при наведении становится чёрным */
}
Псевдоклассы
Псевдоклассы - это элементы, которые указывают определённый набор стилей, в случае различных событий и изменений состояния элемента. Например, как изменятся стили в случае наведения, клика и тд на элемент.
Вернёмся к самому простому примеру - ссылке. Выше мы рассмотрели код, в случае которого ссылка меняла цвет при наведении. Как Вы можете догадаться, можно добавить и другие стили - изменение фона, размера шрифта, расположение элемента, возможность добавить или убрать нижнее подчёркивание и многое другое.
Список самых используемых псевдоклассов, которые обязательно пригодятся в работе:
hover - при наведении курсора на элемент
focus - при клике на элемент, например поле для ввода данных
active - при активации элемента пользователем, то есть в момент клика
link - стиль для не посещённых ссылок
visited - стилевое оформление к посещенным ссылкам
target - переход к выбранному фрагменту документа, в адресе после # указывается имя идентификатора
root - определение корневого элемента документа
indeterminate - стиль для флажков (radio) и переключателей (checkbox) в неопределенном состоянии
checked - стиль для radio и checkbox в выбранном положении: input:checked
firstchild - стиль для первого дочернего элемента селектора
lastchild - изменения в последнем элементе родителя
onlychild - для дочерних элементов, единственных у родителя
lang (en) - определение языка элемента, где en выбранный язык
Код CSS Примеры
HTML:
a:hover {
color:#000; /* текст ссылки при наведении становится чёрным */
}
a:active {
top:-1px;/* элемент при клике опускается чуть ниже, эффект нажатия */
}
Псевдоэлементы
Псевдоэлементы - это элементы, которые позволяют генерировать содержимое, не указанное в HTML документе. Например, с помощью псевдоклассов можно какой-либо текст до или после элемента, или назначить стили для выделенного текста.
Список основных используемых псевдоэлементов, которые пригодятся в работе:
after - добавление контента ПОСЛЕ указанного элемента
before - добавление контента ДО указанного элемента
firstletter - стили для первой буквы в контенте элемента
firstline - стилевое оформление первой строки текста в элементе
selection - применение стилей при выделении текста в элементе
Одной из самых распространённых задач является добавление фразы до или после элемента. Рассмотрим на примере цитат. Допустим для определённого элемента нужно добавить текст перед ним.
HTML:
.quote:before {
content:"Цитата ";/* Перед классом .quote будет добавлено слово Цитата и пробел */
}
Обязательно проверьте работу псевдоклассов и псевдоэлементов! Это увлекательно)
Спасибо за внимание!
Основной источник >тут<
Отдельное спасибо за содержательность статьи Сергею Касаткину
Последнее редактирование: