|
||||||||||
Меню сайта
Реклама на сайте:
|
Псевдоклассы и псевдоэлементыУрок №6 Разница между псевдоклассами и псевдоэлементами Псевдокласс: Используется как селектор для элементов, которые нельзя задать с помощью простых селекторов. Кроме функциональных отличий - псевдоэлементы добавляются к селекторам по отдельности, а псевдоклассов может быть несколько в одном селекторе.Важную роль в изучении CSS составляют псевдоклассы и псевдоэлементы. Они используются при проработке дизайна практически всех сайтов. Псевдоклассы и псевдоэлементы очень нужны при составлении красивого оформления. Синтаксис у них простой и одинаковый: псевдоклассы и псевдоэлементы указываются уже после объявления селектора, затем двоеточие : и название псевдокласса или псевдоэлемента. Вы, наверное не раз обращали внимание на то, что на некоторых сайтах при наведении курсора на ссылку она меняет цвет. Это возможно благодаря псевдоклассам и псевдоэлементам. Пример: /* селектор двоеточие псевдокласс */ a:hover { color: #000; /* текст ссылки при наведении становится чёрным */ } Вышеуказанный код обозначает, что при наведении (hover) на ссылку, то есть элемент a (<a>) цвет текста ссылки (color) будет чёрным. ПсевдоклассыПсевдоклассы предназначены для получения различных динамических эффектов при изменении элементов, которые могут меняться со временем или в результате действий пользователей. При записи в CSS-файле псевдоклассы имеют вид: селектор:псевдокласс {значения} => a:hover{color:red} Если перед псевдоклассом не указывать селектор, то его значения применятся ко всем элементам. Наиболее распространенные псевдоклассы: hover - при наведении курсора на элемент Пример: a:hover {color:blue} Сохранив эту запись в файле стилей, на сайте при наведении на ссылку, она будет менять цвет на голубой. ПсевдоэлементыПсевдоэлементы - это элементы, которые позволяют генерировать содержимое, не указанное в HTML документе. Например, с помощью псевдоклассов можно какой-либо текст до или после элемента, или назначить стили для выделенного текста. Наиболее применяемые псевдоэлементы: after - добавление контента ПОСЛЕ указанного элемента Пример: .new:before {content:"Внимание!"; color:blue;} Сохранив эту запись в файле стилей, на сайте перед элементом с классом new, мы увидим голубой текст
|