Тёмный

CSS3 #4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes) 

webDev
Подписаться 117 тыс.
Просмотров 24 тыс.
50% 1

#YauhenK #webDev #CSS #CSS3
Всех приветствую в курсе «CSS3».
В данном видеокурсе мы с вами рассмотрим CSS, или каскадных таблиц стилей. Начнём с основ: простые и составные селектора, псевдоклассы и псевдоэлементы, позиционирование, блочная модель и т.д. А так же разберём свойства добавленные в третьей версии спецификации: границы и скругления, тени, градиенты, фильтры, трансформации, анимации, плавные переходы и т.д. По окончанию курса вы получите отличную теоретическую базу для создания полноценных статичных веб-страниц.
✒ Репозиторий курса:
✔ github.com/YauhenKavalchuk/css3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ RU-vid: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Опубликовано:

 

30 ноя 2020

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 94   
@accuso
@accuso 3 года назад
Как же я рад, что этот курс существует - словами не передать...
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо за поддержку)
@Igor_Kash
@Igor_Kash 2 месяца назад
прикольная задачка в конце) никогда не думал о подсчете важности селекторов в таком формате 😊
@YauhenKavalchuk
@YauhenKavalchuk 2 месяца назад
😁
@zatokeran
@zatokeran 3 года назад
За задание в конце отдельное спасибо, помогло реально разобраться!
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста)
@mr.warpunch6007
@mr.warpunch6007 Год назад
Вот это ролик, очень объемный, спасибо автору, подача топ
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Пожалуйста
@Danil-un6bt
@Danil-un6bt 3 года назад
Большое спасибо, курс отличный!
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста)
@aleksandrk2012
@aleksandrk2012 3 года назад
Спасибо! Супер, как всегда! Блин , оказывается с 4го хтмла много чего изменилось )
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста
@EugenySubbotin
@EugenySubbotin Год назад
очень классные подробные уроки!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Спасибо
@eugenia9999
@eugenia9999 3 года назад
класс !!)) благодарочка !!)) Очень полезное видео !! Все очень понравилось !!))
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Отлично)
@meliodass4762
@meliodass4762 3 года назад
Самые понятливые уроки!
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
👍
@nuttyNat
@nuttyNat 3 года назад
Понятливыми могут быть ученики, а уроки - понятные
@user-ke9ic7yq1h
@user-ke9ic7yq1h 3 года назад
Спасибо, я уже два дня жду это видео урок))
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста
@missisipi9992
@missisipi9992 Год назад
Очень хорошо объясняешь, братишка, спасибо!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Пожалуйста
@user-xd7vj5cf9f
@user-xd7vj5cf9f 3 года назад
Как всегда на высоте
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо
@olehyefimenko6693
@olehyefimenko6693 Год назад
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
👍
@user-ij3ul4fv1y
@user-ij3ul4fv1y 6 месяцев назад
Мега хорош, спасибо
@YauhenKavalchuk
@YauhenKavalchuk 6 месяцев назад
Пожалуйста
@donstacky
@donstacky Год назад
Спасибо за урок 🙂
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Пожалуйста
@baytszy
@baytszy 3 года назад
спасибо. очень хорошо все понятно))
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Пожалуйста
@shifronim8950
@shifronim8950 3 года назад
Ёмко и чётко. Планируете ли вы мастер класс по образцово показательной вёрстке, Евгений?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Спасибо. Да, такое планируется. Только скорее всего будет в виде стрима
@cozafoto
@cozafoto 3 года назад
Приветствую, а почему на 8:30 у нас не покрасился пункт Six (каждый третий же)? Я смотрел в Opera, там все покрасилось корректно.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Хм, тут как вариант - ошибка монтажа. Не заметил и обрезал покраску элемента.
@Pavlusha1Kruglik
@Pavlusha1Kruglik 3 года назад
Доброе утро, Евгений. спасибо за видео. Подскажите, пожалуйста, почему 9 пункт в задании специфичность 101, а не 110? Как я понял: индификатор 100, псевдокласс :not - не считаем, класс .main - 10.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
У меня уже спрашивали этот вопрос несколько раз в личной переписке. Всё наоборот как раз-то not считается, как 1, а класс внутри него не учитывается
@Pavlusha1Kruglik
@Pavlusha1Kruglik 3 года назад
@@YauhenKavalchuk спасибо. Просто везде встречал такую информацию:"Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора". developer.mozilla.org/ru/docs/Web/CSS/Specificity И калькулятор подсчёта специфичности тоже 110 выдаёт.
@Drewaka
@Drewaka 3 года назад
@@Pavlusha1Kruglik как я понял. он просто применил 1-10-100-1000 как единицу измерения. а там в документы используют 0-1-2-3. поэтому у вас не совпадает сумма. А так все верно логически вы мыслите.
@Pavlusha1Kruglik
@Pavlusha1Kruglik 3 года назад
@@user-xg6nf9xc2l ага, только лучше для наглядности в в таблице стилей поставить с not раньше , чем без него.
@user-ed7op5gg9l
@user-ed7op5gg9l Год назад
@@YauhenKavalchuk но ведь в таблице, которую вы приводили в одном из прошлых уроков, специфичность (вес) псевдокласс = 10. В 9 пункте id=100 + псевдокласс not = 10, итого все же 110 должно быть, разве не так?
@rimavedeckiene2203
@rimavedeckiene2203 9 месяцев назад
Вы Учитель от Бога. Всё так чётка, ясно, интересно, увлекательно... ❤❤❤❤❤ А Javascript у Вас будет?
@YauhenKavalchuk
@YauhenKavalchuk 9 месяцев назад
Спасибо за отзыв. На канале уже есть небольшой, смотрите в плейлистах. В будущем планирую его переснять
@aleksandrkozowski9717
@aleksandrkozowski9717 3 месяца назад
Кайфушкин
@YauhenKavalchuk
@YauhenKavalchuk 3 месяца назад
Спасибо
@sorokanews5019
@sorokanews5019 3 года назад
Чем отличаются по структуре 11 и 12 строки, почему разные баллы? В 11 - псевдокласс, а в 12 - псевдоэлемент?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Да! У псевдокласса и псевдоэлемента разные специфичности
@ruanadebastulo8240
@ruanadebastulo8240 Год назад
да
@quadrat2092
@quadrat2092 2 года назад
Подскажите, ошибся в 9 задании - #test:not(.main). Ведь :not() это псевдокласс и за него даётся 10, а не 1. Если его посчитать как псевдоэлемент, тогда все сходится.
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Это я опечатался, в предыдущих комментариях об этом уже писали
@lucky-hacky1771
@lucky-hacky1771 Год назад
Почему актив плохой? Чел старается
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Спасибо за поддержку
@aleksandrk2012
@aleksandrk2012 3 года назад
Вопрос - не подскажите с чем связано разное отображение цвета на локальной машине и в интернете? цвет- #91BED5
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Это может быть связано только с монитором, разная передача цветов. Но если смотрите на монике, то такого не может быть в принципе, цвета не меняются, не зависимо от того где и как их просматривают
@aleksandrk2012
@aleksandrk2012 3 года назад
@@YauhenKavalchuk извините за беспокойство, оказалось что у меня в интернет версии оказался другой цвет...
@baytszy
@baytszy 3 года назад
а есть уроки про грамотную семантику и валидность?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Я таких уроков не видел, только если поискать ещё вписки конференций Макеева
@Grishka48
@Grishka48 Год назад
9:50 это опечатка? тег span закрыт дивом? div наверно нужен на 54 строке?
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Да, опечатка. Должен быть span
@Grishka48
@Grishka48 Год назад
@@YauhenKavalchuk понял)
@missisipi9992
@missisipi9992 Год назад
Касательно теста, а мы разве проходили уже эту тему в предыдущих 4 уроках?
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Проходили
@missisipi9992
@missisipi9992 Год назад
А, проходили, тупанул) Я всё правильно ответил, кроме 3 и 9 вопроса, в 3 разобрался чуток загуглив, на mdn написано, что * не влияет на специфичность хотя это тег, а в 9 не пойму почему ответ 101, если , как я прочитал, псевдокласс "not()" - не влияет на специфичность, но то что внутри нём - влияет, в итоге по идее id = 100 + class = 10, 100+10 = 110, а у тебя 101, я вот не пойму , почему так?)
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Посмотрите предыдущие комментарии, это описка(
@none1307
@none1307 3 года назад
Для продвижения.
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
👍
@Nikitosss91
@Nikitosss91 3 года назад
А какую проблему решают бефор и афтер что их создали собственно ?
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Декорирование. Собственно, как и остальные CSS свойства
@cozafoto
@cozafoto 3 года назад
В задании пункт 12 не хватает еще одного двоеточия, иначе вес = 2 не получится...))
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Синтаксис псевдо-элементов нормально воспринимается и с одним двоеточием. И вес так же должен быть 2
@quadrat2092
@quadrat2092 2 года назад
Кто-нибудь, подскажите, правильно ли я трактую некоторые примеры из задания: 2 #main .item Потомки тега с id #main и классом .item? 5 li.item.main Теги li с классами item и main одновременно? 10 ul ol+li Теги li идущие за тегом ol внутри родителя ul? Запись "ul ol+li" делает то же самое, что и "ul ol + li"?
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Верно
@user-xe4be7iq1q
@user-xe4be7iq1q Месяц назад
7:52 10:40 10:50+
@YauhenKavalchuk
@YauhenKavalchuk Месяц назад
🤔
@user-xe4be7iq1q
@user-xe4be7iq1q Месяц назад
@@YauhenKavalchuk как вообще посчитать специфичность (я о тесте в конце)
@nicksakovich6500
@nicksakovich6500 Месяц назад
запятых нету в list1, list2 перед li
@YauhenKavalchuk
@YauhenKavalchuk Месяц назад
👍
@alixanmin6586
@alixanmin6586 3 года назад
Can u do it without ads bro
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
Sorry, but not.
@alixanmin6586
@alixanmin6586 3 года назад
@@YauhenKavalchuk though thanxs for video it is great
@YauhenKavalchuk
@YauhenKavalchuk 3 года назад
You’re welcome
@extremiss1134
@extremiss1134 2 года назад
я вообще не понял что я должен был посчитать в этом тесте( -мораль
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
🤷‍♂️
@extremiss1134
@extremiss1134 2 года назад
@@YauhenKavalchuk И вообще что это за вес, зачем он нужен и как его посчитать?
@vearlp
@vearlp 3 месяца назад
сам не понял@@extremiss1134
@atlasua2021
@atlasua2021 2 года назад
Слишком сложно)
@YauhenKavalchuk
@YauhenKavalchuk 2 года назад
Как есть, начнёте применять, будет проще
@user-bi5tl8sj7z
@user-bi5tl8sj7z Год назад
Ничего не понятно, что за балы в конце? Что за специфичность, пересмотрел 2 раза, об этих балах ни слова, пользуясь какой методикой вы их расставляли?
@YauhenKavalchuk
@YauhenKavalchuk Год назад
Во 2-м уроке я подробно объясняю тему специфичности, в 3-м и 4-ом уроках дополняю. Поэтому лучше всего посмотреть всё
@user-bi5tl8sj7z
@user-bi5tl8sj7z Год назад
@@YauhenKavalchuk понял, спасибо
@olehyefimenko6693
@olehyefimenko6693 Год назад
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Год назад
👍
Далее
CSS Pseudo elements Before and After: Examples
11:55
Просмотров 101 тыс.