Урок 15. Псевдоклассы и псевдоэлементы | Курс Веб разработчик | Академия верстки

Автор Vera Abramova
Урок 15. Псевдоклассы и псевдоэлементы | Курс Веб разработчик | Академия верстки

Привет.

На связи. Артём Исламов это. Академия верстки вы сейчас находитесь в плейлисте который называется web-разработчик 10 поток — это записи нашего закрытого курса мы их бесплатно на YouTube, но мы не выложили домашнее задание и дипломный проект от этого курса для того чтобы получить полный доступ ко всем домашним дипломом и так далее.

Вам необходимо перейти по ссылке в описании или вот там справа в углу будет значок информации.

Вы можете кинуть туда и перейти по ссылке, а затем вы оплачиваете полный доступ ко всем домашку дипломным проектом указывайте свою почту. И после этого получаете доступ полностью к записям курсы веб разработчик 1000 со всеми модулями со всеми заданиями дополнительными заданиями со всеми видео уроками которые здесь есть как мы обычно прикрепляем к каждому нашему уроку и дополнительные документы дополнительные материалы макеты дополнительные ссылки. Поэтому если вы хотите получить полный доступ ко всем записям и не ждать пока они выйдут на YouTube. Вы можете перейти по ссылке в описании и оплатить. Приятного просмотра этого урока. До скорой встречи. Привет На связи. Артём Исламов мы продолжаем изучать основы разработки. Сегодня у нас урок номер 15 и очень очень интересная тема — это псевдоклассы и псевдоэлементы слова привлекает новичков своим магическим непонятным названием меня в своё время — это очень сильно расстраивает то, что я не знаю псевдоклассы псевдоэлементы и их поведение в чём я до самого последнего момента как и любой наверное новичок не задумывался заглянуть в справочник, что же наконец-то, что такое наконец-таки значат эти псевдоклассы и псевдоэлементы псевдоклассы и псевдоэлементы — это вспомогательные элементы при верстке псевдоклассы описывает различные состояния элементов например. А как ведёт себя элемент когда на него находит мышкой как он ведет себя когда на него кликает мышкой и удерживают как он ведёт себя на него уже крикнули и так далее псевдоэлементы же их всего 2 выделяю я конкретно их на самом деле больше, но псевдоэлементы before и After очень часто встречаются на поэтому они на слуху и именно про них мы сегодня будем говорить и так поехали псевдоклассы псевдоэлементы 1. С кем бы я хотел вас познакомить — это псевдоклассы на примере ссылок картинок и других элементов к примеру. Открой мне обычный код HTML нашего примера Lesson и создадим здесь div с классом Xbox Dev моего оформим таким образом, что у него будет ширина например 200 высота 200 и программ Color Red отлично. У нас есть дисковод Xbox если мы откроем сайт то мы видим вот такой вот простейший пример, что же произойдет мы наведем этот элемент ничего не происходит он не. Как меняется потому, что мы эти — это поведение никак не писали, но если мы напишем бокс и pseudo Class Hover, тогда произойдет следующая волшебство мы напишем поиграем например. И теперь когда мы будем наводить на этот элемент помогает становится чёрным — это простейший пример самый простейший пример мнение псевдоклассов — это Hover. То есть если я пропишу псевдокласс Hover то. Цвет будет меняться если я ещё и пропишу транзишн 0,2 секунды, тогда — это всё будет ещё и меняться плавника то есть сочетание транзишн плюс Hover будет весьма мощным элементом при наведении может происходить всё, что угодно может меняться цвет может подчёркивается элемент и, тогда например представим, что — это у нас не. Дефо ссылка причём ссылка которая никуда не ведет отлично есть у нас вот такая вот ссылка в никуда мы сотрём для неё всё, что здесь есть и сделаем так чтобы при наведении она будет подчёркивается, но по умолчанию текст decoration как не подчеркивается, но при наведении. Мы можем написать, что она будет подчеркивается также. Гришин онлайн таком случае она будет подчёркивается — это обычное состояние обычное поведение ссылки. Что произойдет если эту ссылку нажать она в какой-то момент опять с красным цветом — это состояние называется актив. То есть если мы напишем бокс то есть наша ссылка с псевдокласс Active мы напишем, что Color например, что произойдет в этом случае мы. Я кликаю. И держу не отпускаю она становится зеленый в этот момент то есть актив — это когда мы. Нажали на ссылку и держим её или. Нажали на кнопку и держим её. Что произойдёт с этой ссылке. Мы видим, что она какого-то немножко синего там такого фиолетового цвета ведёт себя. Потому, что мы уже по ней пришли и права. России отмечают чтобы мы несколько раз не переходили по темам по одним и тем же ссылкам за — это отвечают псевдокласс visited если мы напишем визита. Это значит, что мы посещали уже эту ссылку и. Например можно покрасить её в жёлтый цвет — это больше относится вот мы видим да она стала жёлтой потому, что мы уже по ней переходили когда. О'кей — это очень много тонкостей большинство псевдоклассов работает именно ссылками. Да, но из блочного некоторыми другими элементами работает псевдокласс например Focus и так далее. Например если у нас есть кнопка или. Давайте возьмём какой-нибудь Input — это очень распространенная ситуация на примере есть очень распространена ситуация когда мы клике на инпут и он находится вот такой вот синей обводкой например нам — это не надо например мы не хотим эту синюю утку и, тогда мы говорим, что Input должен быть без обводки за обводку отвечает состояние outline если мы поставим outline нам, тогда водки не будет, но для этого нужно воспользоваться псевдоклассов фокус фокус — это когда мы нажали на элемент и Focus грубо говоря держится на нём.

0 комментариев
0

Читайте также