KZhead

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

webDev
2020 ж. 30 Қар.
24 303 Рет қаралды
Жүктеу

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

Пікірлер

  • Как же я рад, что этот курс существует - словами не передать...

    @accuso@accuso3 жыл бұрын

    • Спасибо за поддержку)

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • прикольная задачка в конце) никогда не думал о подсчете важности селекторов в таком формате 😊

    @Igor_Kash@Igor_KashАй бұрын

    • 😁

      @YauhenKavalchuk@YauhenKavalchukАй бұрын

  • За задание в конце отдельное спасибо, помогло реально разобраться!

    @zatokeran@zatokeran3 жыл бұрын

    • Пожалуйста)

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Вот это ролик, очень объемный, спасибо автору, подача топ

    @mr.warpunch6007@mr.warpunch6007 Жыл бұрын

    • Пожалуйста

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • класс !!)) благодарочка !!)) Очень полезное видео !! Все очень понравилось !!))

    @eugenia9999@eugenia99993 жыл бұрын

    • Отлично)

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Большое спасибо, курс отличный!

    @Danil-un6bt@Danil-un6bt3 жыл бұрын

    • Пожалуйста)

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • очень классные подробные уроки!

    @EugenySubbotin@EugenySubbotin Жыл бұрын

    • Спасибо

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • Спасибо! Супер, как всегда! Блин , оказывается с 4го хтмла много чего изменилось )

    @aleksandrk2012@aleksandrk20123 жыл бұрын

    • Пожалуйста

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Самые понятливые уроки!

    @meliodass4762@meliodass47623 жыл бұрын

    • 👍

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

    • Понятливыми могут быть ученики, а уроки - понятные

      @nuttyNat@nuttyNat3 жыл бұрын

  • Спасибо, я уже два дня жду это видео урок))

    @user-ke9ic7yq1h@user-ke9ic7yq1h3 жыл бұрын

    • Пожалуйста

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Очень хорошо объясняешь, братишка, спасибо!

    @missisipi9992@missisipi9992 Жыл бұрын

    • Пожалуйста

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

    @olehyefimenko6693@olehyefimenko6693 Жыл бұрын

    • 👍

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • Как всегда на высоте

    @user-xd7vj5cf9f@user-xd7vj5cf9f3 жыл бұрын

    • Спасибо

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Спасибо за урок 🙂

    @donstacky@donstacky Жыл бұрын

    • Пожалуйста

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • спасибо. очень хорошо все понятно))

    @baytszy@baytszy3 жыл бұрын

    • Пожалуйста

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Мега хорош, спасибо

    @user-ij3ul4fv1y@user-ij3ul4fv1y5 ай бұрын

    • Пожалуйста

      @YauhenKavalchuk@YauhenKavalchuk5 ай бұрын

  • Ёмко и чётко. Планируете ли вы мастер класс по образцово показательной вёрстке, Евгений?

    @shifronim8950@shifronim89503 жыл бұрын

    • Спасибо. Да, такое планируется. Только скорее всего будет в виде стрима

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Доброе утро, Евгений. спасибо за видео. Подскажите, пожалуйста, почему 9 пункт в задании специфичность 101, а не 110? Как я понял: индификатор 100, псевдокласс :not - не считаем, класс .main - 10.

    @Pavlusha1Kruglik@Pavlusha1Kruglik3 жыл бұрын

    • У меня уже спрашивали этот вопрос несколько раз в личной переписке. Всё наоборот как раз-то not считается, как 1, а класс внутри него не учитывается

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

    • @@YauhenKavalchuk спасибо. Просто везде встречал такую информацию:"Селектор внутри псевдо-класса отрицания (:not) считается как любой другой селектор, но сам псевдо-класс отрицания не участвует в вычислении селектора". developer.mozilla.org/ru/docs/Web/CSS/Specificity И калькулятор подсчёта специфичности тоже 110 выдаёт.

      @Pavlusha1Kruglik@Pavlusha1Kruglik3 жыл бұрын

    • @@Pavlusha1Kruglik как я понял. он просто применил 1-10-100-1000 как единицу измерения. а там в документы используют 0-1-2-3. поэтому у вас не совпадает сумма. А так все верно логически вы мыслите.

      @Drewaka@Drewaka3 жыл бұрын

    • @@user-xg6nf9xc2l ага, только лучше для наглядности в в таблице стилей поставить с not раньше , чем без него.

      @Pavlusha1Kruglik@Pavlusha1Kruglik3 жыл бұрын

    • @@YauhenKavalchuk но ведь в таблице, которую вы приводили в одном из прошлых уроков, специфичность (вес) псевдокласс = 10. В 9 пункте id=100 + псевдокласс not = 10, итого все же 110 должно быть, разве не так?

      @user-ed7op5gg9l@user-ed7op5gg9l Жыл бұрын

  • Приветствую, а почему на 8:30 у нас не покрасился пункт Six (каждый третий же)? Я смотрел в Opera, там все покрасилось корректно.

    @cozafoto@cozafoto3 жыл бұрын

    • Хм, тут как вариант - ошибка монтажа. Не заметил и обрезал покраску элемента.

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Кайфушкин

    @aleksandrkozowski9717@aleksandrkozowski97173 ай бұрын

    • Спасибо

      @YauhenKavalchuk@YauhenKavalchuk3 ай бұрын

  • Вы Учитель от Бога. Всё так чётка, ясно, интересно, увлекательно... ❤❤❤❤❤ А Javascript у Вас будет?

    @rimavedeckiene2203@rimavedeckiene22039 ай бұрын

    • Спасибо за отзыв. На канале уже есть небольшой, смотрите в плейлистах. В будущем планирую его переснять

      @YauhenKavalchuk@YauhenKavalchuk9 ай бұрын

  • Подскажите, ошибся в 9 задании - #test:not(.main). Ведь :not() это псевдокласс и за него даётся 10, а не 1. Если его посчитать как псевдоэлемент, тогда все сходится.

    @quadrat2092@quadrat20922 жыл бұрын

    • Это я опечатался, в предыдущих комментариях об этом уже писали

      @YauhenKavalchuk@YauhenKavalchuk2 жыл бұрын

  • Вопрос - не подскажите с чем связано разное отображение цвета на локальной машине и в интернете? цвет- #91BED5

    @aleksandrk2012@aleksandrk20123 жыл бұрын

    • Это может быть связано только с монитором, разная передача цветов. Но если смотрите на монике, то такого не может быть в принципе, цвета не меняются, не зависимо от того где и как их просматривают

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

    • @@YauhenKavalchuk извините за беспокойство, оказалось что у меня в интернет версии оказался другой цвет...

      @aleksandrk2012@aleksandrk20123 жыл бұрын

  • Чем отличаются по структуре 11 и 12 строки, почему разные баллы? В 11 - псевдокласс, а в 12 - псевдоэлемент?

    @sorokanews5019@sorokanews50193 жыл бұрын

    • Да! У псевдокласса и псевдоэлемента разные специфичности

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

    • да

      @ruanadebastulo8240@ruanadebastulo8240 Жыл бұрын

  • 9:50 это опечатка? тег span закрыт дивом? div наверно нужен на 54 строке?

    @Grishka48@Grishka48 Жыл бұрын

    • Да, опечатка. Должен быть span

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

    • @@YauhenKavalchuk понял)

      @Grishka48@Grishka48 Жыл бұрын

  • а есть уроки про грамотную семантику и валидность?

    @baytszy@baytszy3 жыл бұрын

    • Я таких уроков не видел, только если поискать ещё вписки конференций Макеева

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • А, проходили, тупанул) Я всё правильно ответил, кроме 3 и 9 вопроса, в 3 разобрался чуток загуглив, на mdn написано, что * не влияет на специфичность хотя это тег, а в 9 не пойму почему ответ 101, если , как я прочитал, псевдокласс "not()" - не влияет на специфичность, но то что внутри нём - влияет, в итоге по идее id = 100 + class = 10, 100+10 = 110, а у тебя 101, я вот не пойму , почему так?)

    @missisipi9992@missisipi9992 Жыл бұрын

    • Посмотрите предыдущие комментарии, это описка(

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • Касательно теста, а мы разве проходили уже эту тему в предыдущих 4 уроках?

    @missisipi9992@missisipi9992 Жыл бұрын

    • Проходили

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • Для продвижения.

    @none1307@none13073 жыл бұрын

    • 👍

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Почему актив плохой? Чел старается

    @lucky-hacky1771@lucky-hacky1771 Жыл бұрын

    • Спасибо за поддержку

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

  • В задании пункт 12 не хватает еще одного двоеточия, иначе вес = 2 не получится...))

    @cozafoto@cozafoto3 жыл бұрын

    • Синтаксис псевдо-элементов нормально воспринимается и с одним двоеточием. И вес так же должен быть 2

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • А какую проблему решают бефор и афтер что их создали собственно ?

    @Nikitosss91@Nikitosss913 жыл бұрын

    • Декорирование. Собственно, как и остальные CSS свойства

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • Кто-нибудь, подскажите, правильно ли я трактую некоторые примеры из задания: 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"?

    @quadrat2092@quadrat20922 жыл бұрын

    • Верно

      @YauhenKavalchuk@YauhenKavalchuk2 жыл бұрын

  • запятых нету в list1, list2 перед li

    @nicksakovich6500@nicksakovich6500Ай бұрын

    • 👍

      @YauhenKavalchuk@YauhenKavalchukАй бұрын

  • 7:52 10:40+

    @user-xe4be7iq1q@user-xe4be7iq1q20 күн бұрын

    • 🤔

      @YauhenKavalchuk@YauhenKavalchuk19 күн бұрын

    • @@YauhenKavalchuk как вообще посчитать специфичность (я о тесте в конце)

      @user-xe4be7iq1q@user-xe4be7iq1q13 күн бұрын

  • Can u do it without ads bro

    @alixanmin6586@alixanmin65863 жыл бұрын

    • Sorry, but not.

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

    • @@YauhenKavalchuk though thanxs for video it is great

      @alixanmin6586@alixanmin65863 жыл бұрын

    • You’re welcome

      @YauhenKavalchuk@YauhenKavalchuk3 жыл бұрын

  • я вообще не понял что я должен был посчитать в этом тесте( -мораль

    @extremiss1134@extremiss11342 жыл бұрын

    • 🤷‍♂️

      @YauhenKavalchuk@YauhenKavalchuk2 жыл бұрын

    • @@YauhenKavalchuk И вообще что это за вес, зачем он нужен и как его посчитать?

      @extremiss1134@extremiss11342 жыл бұрын

    • сам не понял@@extremiss1134

      @vearlp@vearlp2 ай бұрын

  • Слишком сложно)

    @atlasua2021@atlasua20212 жыл бұрын

    • Как есть, начнёте применять, будет проще

      @YauhenKavalchuk@YauhenKavalchuk2 жыл бұрын

  • Ничего не понятно, что за балы в конце? Что за специфичность, пересмотрел 2 раза, об этих балах ни слова, пользуясь какой методикой вы их расставляли?

    @user-bi5tl8sj7z@user-bi5tl8sj7z Жыл бұрын

    • Во 2-м уроке я подробно объясняю тему специфичности, в 3-м и 4-ом уроках дополняю. Поэтому лучше всего посмотреть всё

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын

    • @@YauhenKavalchuk понял, спасибо

      @user-bi5tl8sj7z@user-bi5tl8sj7z Жыл бұрын

  • Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

    @olehyefimenko6693@olehyefimenko6693 Жыл бұрын

    • 👍

      @YauhenKavalchuk@YauhenKavalchuk Жыл бұрын
KZhead