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

  Переглядів 23,949

webDev

webDev

3 роки тому

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

КОМЕНТАРІ: 91
@accuso
@accuso 3 роки тому
Как же я рад, что этот курс существует - словами не передать...
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо за поддержку)
@Igor_Kash
@Igor_Kash 23 дні тому
прикольная задачка в конце) никогда не думал о подсчете важности селекторов в таком формате 😊
@YauhenKavalchuk
@YauhenKavalchuk 23 дні тому
😁
@zatokeran
@zatokeran 3 роки тому
За задание в конце отдельное спасибо, помогло реально разобраться!
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста)
@mr.warpunch6007
@mr.warpunch6007 Рік тому
Вот это ролик, очень объемный, спасибо автору, подача топ
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@aleksandrk2012
@aleksandrk2012 3 роки тому
Спасибо! Супер, как всегда! Блин , оказывается с 4го хтмла много чего изменилось )
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста
@Danil-un6bt
@Danil-un6bt 3 роки тому
Большое спасибо, курс отличный!
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста)
@eugenia9999
@eugenia9999 3 роки тому
класс !!)) благодарочка !!)) Очень полезное видео !! Все очень понравилось !!))
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Отлично)
@EugenySubbotin
@EugenySubbotin Рік тому
очень классные подробные уроки!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо
@meliodass4762
@meliodass4762 3 роки тому
Самые понятливые уроки!
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
👍
@nuttyNat
@nuttyNat 3 роки тому
Понятливыми могут быть ученики, а уроки - понятные
@olehyefimenko6693
@olehyefimenko6693 Рік тому
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@user-ke9ic7yq1h
@user-ke9ic7yq1h 3 роки тому
Спасибо, я уже два дня жду это видео урок))
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста
@missisipi9992
@missisipi9992 Рік тому
Очень хорошо объясняешь, братишка, спасибо!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-xd7vj5cf9f
@user-xd7vj5cf9f 3 роки тому
Как всегда на высоте
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Спасибо
@donstacky
@donstacky Рік тому
Спасибо за урок 🙂
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@baytszy
@baytszy 3 роки тому
спасибо. очень хорошо все понятно))
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Пожалуйста
@user-ij3ul4fv1y
@user-ij3ul4fv1y 4 місяці тому
Мега хорош, спасибо
@YauhenKavalchuk
@YauhenKavalchuk 4 місяці тому
Пожалуйста
@rimavedeckiene2203
@rimavedeckiene2203 8 місяців тому
Вы Учитель от Бога. Всё так чётка, ясно, интересно, увлекательно... ❤❤❤❤❤ А Javascript у Вас будет?
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
Спасибо за отзыв. На канале уже есть небольшой, смотрите в плейлистах. В будущем планирую его переснять
@shifronim8950
@shifronim8950 3 роки тому
Ёмко и чётко. Планируете ли вы мастер класс по образцово показательной вёрстке, Евгений?
@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 должно быть, разве не так?
@aleksandrkozowski9717
@aleksandrkozowski9717 2 місяці тому
Кайфушкин
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
Спасибо
@cozafoto
@cozafoto 3 роки тому
Приветствую, а почему на 8:30 у нас не покрасился пункт Six (каждый третий же)? Я смотрел в Opera, там все покрасилось корректно.
@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 роки тому
Это я опечатался, в предыдущих комментариях об этом уже писали
@Grishka48
@Grishka48 Рік тому
9:50 это опечатка? тег span закрыт дивом? div наверно нужен на 54 строке?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Да, опечатка. Должен быть span
@Grishka48
@Grishka48 Рік тому
@@YauhenKavalchuk понял)
@aleksandrk2012
@aleksandrk2012 3 роки тому
Вопрос - не подскажите с чем связано разное отображение цвета на локальной машине и в интернете? цвет- #91BED5
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Это может быть связано только с монитором, разная передача цветов. Но если смотрите на монике, то такого не может быть в принципе, цвета не меняются, не зависимо от того где и как их просматривают
@aleksandrk2012
@aleksandrk2012 3 роки тому
@@YauhenKavalchuk извините за беспокойство, оказалось что у меня в интернет версии оказался другой цвет...
@none1307
@none1307 3 роки тому
Для продвижения.
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
👍
@baytszy
@baytszy 3 роки тому
а есть уроки про грамотную семантику и валидность?
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Я таких уроков не видел, только если поискать ещё вписки конференций Макеева
@lucky-hacky1771
@lucky-hacky1771 Рік тому
Почему актив плохой? Чел старается
@YauhenKavalchuk
@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 Рік тому
Посмотрите предыдущие комментарии, это описка(
@cozafoto
@cozafoto 3 роки тому
В задании пункт 12 не хватает еще одного двоеточия, иначе вес = 2 не получится...))
@YauhenKavalchuk
@YauhenKavalchuk 3 роки тому
Синтаксис псевдо-элементов нормально воспринимается и с одним двоеточием. И вес так же должен быть 2
@Nikitosss91
@Nikitosss91 2 роки тому
А какую проблему решают бефор и афтер что их создали собственно ?
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
Декорирование. Собственно, как и остальные CSS свойства
@nicksakovich6500
@nicksakovich6500 15 днів тому
запятых нету в list1, list2 перед li
@YauhenKavalchuk
@YauhenKavalchuk 13 днів тому
👍
@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
@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 роки тому
Верно
@extremiss1134
@extremiss1134 2 роки тому
я вообще не понял что я должен был посчитать в этом тесте( -мораль
@YauhenKavalchuk
@YauhenKavalchuk 2 роки тому
🤷‍♂️
@extremiss1134
@extremiss1134 2 роки тому
@@YauhenKavalchuk И вообще что это за вес, зачем он нужен и как его посчитать?
@vearlp
@vearlp Місяць тому
сам не понял@@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 тис.
I Trapped Myself in a Box with Colored Smoke!
00:50
A4
Переглядів 16 млн
CSS3 #11 Границы и тени (Borders & Shadows)
9:57
webDev
Переглядів 16 тис.
Изучение CSS для новичков / Урок #4 - Псевдоклассы и псевдоэлементы
26:54
Школа itProger / Программирование
Переглядів 153 тис.
CSS3 #19 Анимации (Animations)
9:11
webDev
Переглядів 14 тис.
I Trapped Myself in a Box with Colored Smoke!
00:50
A4
Переглядів 16 млн