CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5
ฝัง
- เผยแพร่เมื่อ 12 ก.ค. 2019
- CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5. Продолжаем учить верстку с нуля, и сегодня познакомимся с каскадными таблицами стилей CSS. Изучим cинтаксис CSS, а так же напишем обнуляющий стиль.
🔴 Плейлист с БЕСПЛАТНЫМ курсом и УРОКАМИ по HTML CSS JS верстке:
• БЕСПЛАТНЫЙ курс по вер...
Архив с файлами урока ищи в телеграм канале t.me/freelancer_lifestyle
Или качай по ссылке: fls.guru/files/tutorials/css_...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
Новый чат для общения и помощи друг другу по верстке:
t.me/flschat
а что с чатом?
Спасибо за уроки, все супер! Лучшее что есть на ютубе! Если не трудно поясни про обнуление css, это воде как считается плохой практикой. И я вроде как понимаю почему, но у тебя опыт огромный и ты советуешь обнулять. А как быть, если ты сверстал сайт блог, а блогер сует статьи в html, и раз css 1 на все, то у него все отступы =0? Я только изучаю, и у меня нет практики, но хотелось бы понять.
@@user-gq2um4qs2m про лучшее не знаю но могу подсказать что уроки у хаудихо тоже очень нравятся, посмотри
@@hertz3001 Там много не актуальной информации... Сбивающая с толку новичков.
Красавец, каждый видосик супер, спасибо тебе. только если бы музычку потише, после 30-40 минут уже немного приедается как в супермаркетах.
2022 год, а до сих пор самые лучшие видео по вёрстке
Обнуление стиля так только да? В дальнейшем просто эти обнуления написать и все потом можно начать приступать к стилям да?
@@user-nw3iw2ci3x Да
И в 2023))))
і в 2024)))@@Karrit94
@@Karrit94 и в 2024 =))
Для тех кому лень писать
*{
padding: 0;
margin: 0;
border: 0;
}
*, *:before, *:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus, :active{outline: none;}
a:focus, a:active{outline: none;}
nav,footer,header,aside{display: block;}
html, body{
height: 100%;
width: 100%;
font-style: 100%;
line-height: 1;
font-style: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input, button, textarea{font-family: inherit;}
input::-ms-clear{display:none;}
button{cursor: pointer;}
button::-moz-focus-inner{padding: 0;border: 0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style-type: none;}
img{vertical-align: top;}
h1,h2, h3, h4, h5, h6{font-style: inherit; font-weight: 400;}
Почему я решил посмотреть комментарии только после того как все это написал🥲
@@illiahakh5198 Аналогично🥲
Спасибо, брат, ты лучший
Мы ждали тебя 3 года
Ну навіщо я зайшов в коменти до того, як написав... Ти забрав можливість прописати руками..
всем кто изучает программирование,успехов братцы и сестры!!!
и тебе бро
Ну как дела?
Спасибо и тебе
спасибо от сестры брату
HTML/CSS это ещё не программирование, а только разметка) Но и её уметь делать надо.
А вот с обнулением, это прям душевно было. Столько наработок и вот так, за раз. Цельномассивный респект
да кому может не нравится этот влогер ?
сколько ни смотрел обучалок
ты лучший сенсей !!) отвечаю
Спасибо!
Да! Ты абсолютно прав. Поддерживаю обеими руками.
Огромное спасибо Жеке за его труд.
@@taaadj Жаке
На просторах СНГ 2 проблемы Дураки и дороги, думаю Дуракам он и может непонравится.
Поддерживаю !!!!!!
вот обнуление кому нравиться копи-пастить:
* {
padding: 0;
margin: 0;
border: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:focus,
:active {
outline: none;
}
a:focus,
a:active {
outline: none;
}
nav,
footer,
header,
aside {
display: block;
}
html,
body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
font-family: inherit;
}
input::-ms-clear {
display: none;
}
button {
cursor: pointer;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: 400;
}
Привет!)
Вы случайно не знаете, почему на 16:12 font-size написан дважды?
font-size: 100%;
font-size: 14px;
Заранее спасибо за ответ!
ахахахаххаха а я только дописал все и решил спуститься в комменты
@@Alexander-mh7hy Привет!
Если я не ошибаюсь % задаёт относительный размер.То есть в нашем случае фонт сайз будет 14 шрифт и 100% своего начального размера.Если поменять на 150% значит показатель будет на 50% больше от своего базового значения.Поправьте ,если что не так.
@@SKirill7 спс!
Хорошо, что я сначала в комменты полез. Ты сэкономил мне кучу времени, мэн)
Сколько пересмотрела разных роликов, но нигде не говорили про обнуление стилей!!!
Вы изменили мой взгляд на многие вещи по верстке сайтов, спасибо за ваш труд!!!
Я рад! Пожалуйста!
@@FreelancerLifeStyle ваш платный курс по верстке который был 30 дней вы там даете весь JavaScript?
Видео вышло 2 года назад,но не теряет свою актуальность.
Смотрю обучение с улыбкой и мотивацией работать как никогда.
Спасибо!
Просто лучший канал, нет чувства что тебе что-то не договаривают, потому что не заплатил)
Спасибо!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o во-первых, перестань спамить
@@AndreLLo_o во вторых переводчик в помощь . Do not use empty rulesets = (дословно) не используйте пустые правила(значения). Запишите что то в скобки и ошибка исчезнет.
Бро я твой фанат, честно, ты мне как добрый родной дядя)))
Спасибос!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o У меня в саблайме тоже что то появилось, я внимания не обратил и закрыл просто это окно)
Добрый дядя с чувством юмора)))
@@AndreLLo_o решил проблему?
Нинішня ситуація змусила до активного саморозвитку, тому дякує вам за цікавий і доступний контент для даної галузі. Трохи після html-тегів заплутаніше, але я вірю що завдяки вам з усім зможу розібратися. Взагалі дуже зручна манера пояснення і навчання: матеріал змістовний, актуальний, ситематизований, ще й унаочнення на додачу, СУПЕР!!!
Отличная подача! Без воды, мэканий-бэканий и задумчивых пауз. Вот такие уроки и должны быть!
Урок/ один из лучших уроков про обнуление стилей по сути других то и нет/ ничего подобного нет
Спасибо! 👍🤟
мало того я к этому уроку возвращаюсь спустя песколько занятий и восстанавливаю пробелы. Просто восторг, других эмоций не могу передать!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
Я только начал изучать вестку и пересмотрел кучу хлама ))) хорошо что я тебя нашел ))) по мне ты лучший в данный момент на ютубе. Спасибо за уроки не останавливайся и продолжай дальше делать крутые уроки ))
Спасибо!
Как успехи через 10 месяцев?
@@MonteCrush. а у тебя как там я только 2 дня назад начал
@@ssdgee9005 почти в совершенстве знаю html и css и скоро начинают учит JavaScript:)
@@MonteCrush. давай успехов тебе а я HTML и CSS сейчас учу
Один із небагатьох вчителів якого можна дивитись на швидкості 1. Не жує, не чавкає, не тягне гуму. Приємно слухати одним словом, дякую Євген.
Вы потрясающий человек! Я просто влюблена в ваши видео, и прихожу к уверенности, что веб-разработка это моё. Настоящее наслаждение учиться по вашим урокам. Спасибо огромное!
Я очень очень рад!
Ой мать моя женщина, как же приятно слушать твои лекции. Бесподобно!
Спасибо! Я рад!
Вы чудо-человек. Откуда в таком маленьком в Вашем объёме так много нужных , безграничных знаний. Наверно Вы Ангел, сеющий семена знаний, доброты, света. Мы Вас любим.
Как же я рада, что нашла Ваши уроки. Очень понятно, профессионально. Спасибо.
Женя, дякую тобі за твою дуже насичену роботу! Я до цього ставився скептично що зможу опанувати знання в IT. Дякую тобі ще раз. Ти єдиний, хто чітко і зрозуміло все розповідаєш! Слава Украіні!
Спасибо что подходите к занятиям не как "да сами когда-нибудь узнаете".
А реально делитесь своим опытом и показываете как сами работаете
Жека, спасибо тебе (или Вам) огромнейшее за уроки, за знания, за подачу, за энергетику! Уже не первый урок смотрю - всё чётко, понятно, по полочкам!
Очень интересно!!! Спасибо, Женя!!! Файл обнуления - супер! 🤩🤩🤩
Евгений, огромное спасибо за это и все последующие уроки, которые позволяют нам бесплатно получать качественное обучение!!!
Спасибо, Женя, ты очень классный преподаватель!
Вот за такое просто хочется обнять и поцеловать этого рыжего,бородатого дядьку ! Большой лайк тебе СЕНСЕЙ !!!
Пожалуйста!
Супперрррр. Жаль что только сейчас попал сюда. Заново обучаюсь. Спасибо огромное. Дай тебе здоровья и удачи.
Такого подробного обнуления я еще не встречал! Вы лучший. Лайк от души!!!
СПАСИБО!!! Наконец-то у меня есть хороший учитель! За три года это первый, которому я рада! Здоровья вам и вашей семье!
Пожалуйста!
Спасибо Евгений! Просто шикарные уроки!
Эти уроки - это лучшее, что можно найти на просторах интернета. Спасибо!
Огромное спасибо за ваш труд! Ваши уроки намного лучше большинства уроков платных школ!
Пожалуйста! Я рад!
Посмотрел много видео, но все равно после каждого вашего урока нахожу для себя что-то новое. Спасибо Вам огромное !
Спасибо!
лозунг в конце видео - воодушевляет! форма подачи информации радует, спасибо за очередной видос!
Женя благодарю за эти уроки, такие эффективные методы обучения как у Тебя, поднимают интерес с каждым уроком
Спасибо за потраченные усилия!Благодаря твоим урокам в моей голове информация начала систематизироваться.
Отлично! Я рад!
Все стили обнулились - теперь мы сами управляем реальностью
Именно!
ахахахаха)
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o ты не указал никаких правил для div. И программа считает пустой набор правил {} в css за хлам, бесполезный код,
@@AndreLLo_o о я тоже вс код использую) благо у меня есть друг который в нем разбирается и помогает мне :)
Обнуление стилей - все гениальное просто. И радует то , что я это слышу от тебя. Плюс мне в копилку . Пошел смотреть следующее видео.
ёооома, ё не закрывай хотя бы то, что есть у тебя на канале!! это просто шикарнейший контент!!
Обожаю тебя очень доходчиво объясняешь
Клад... Огромная благодарность от новичка... Самая подробная информация из всего что видел.. Просто LIKE.
Спасибо!
Огромное спасибо за замечательные уроки!!! Вы - Супер-Мега Человечищще!!! Даже слов нет , чтобы передать всю благодарность за Ваши труды! Счастья Вам!!! :)
Огромное спасибо вам за то, что даёте такую уникальную возможность получать знания по вёрстке совершенно бесплатно и качественно! Каждый ролик приятен для просмотра и самое главное содержит в себе внятную для запоминания информацию))
Спасибо за урок, круто, что учел обнуление всего-всего важного, а не только типичного, как многие рекомендуют:)
Спасибо!
Всё очень чётко разжёвывает и объясняет просто респект тебе чувак, даже не знаю что бы делал без тебя!
Я рад!
У Вас просто талант! Спасибо огромное. Все четко и ясно! Всем мира и добра!
Человечище!Такое доброе дело делает.Низкий поклон тебе =)
Уроки понятные. Спасибо) аудио отбивке в конце и в начале уроков неимоверно прикольные
Супер! Я рад!
Лайк за видео без воды! Все понятно и общедоступно, спасибо.
Спасибо, я рад!
Спасибо вам за полезную информацию, как вы ее подаете и как объясняете - интересно и на высоком уровне, по вам видно что вы явно добрый человек и опытный программист
спасибо за ролик. Даже не столько содержание, сколько твой позитив вызывает приятные ощущения от просмотра, ну и воспринимать легко ))
УРА новое видео!!!
Поздравляю, уже почти 5000 подписчиков!!!
Надеюсь будет намного больше)
Хех, я тоже надеюсь))
Уже почти 25к, и только прибавляются)
@@user-ri1ry7sx6p ужу 33к)))
Уже 50 К! И это очень заслуженно!
@@tetienna уже 57 к
То что нужно новичку ! Очень хорошая подача материала, так же отдельный лайк за качественный монтаж!
Спасибо!
В очередной раз благодарю за урок и доступное преподношение информации. Спасибо , Евгений !!!
Не могу подобрать более подходящего слова чем "Вау"! Видео супер-полезное. Огромное спасибо!
С нетерпением жду верстку с нуля с подробным объяснением)))
P.S. лайк поставил.
Конечно будет, мы уверенно к этому идем!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o селекторы в css нельзя оставлять пустыми , в них обязательно должно быть хоть одно свойство
- Волнуетесь? - янемного волнуюсь))))))))
Ахах)
спасибо за адекватный файл обнуления, обычно его писала/нормалайз
@@mini8622 закрой рот
Евгений Вы делаете Великое дело. Логика подачи материала просто бомба включая и этот урок. Спасибо за то что так стараетесь, уверен Вселенная Вас отблагодарит)
Давно хотел начать обучаться программированию но все никак не мог найти походящий контент, тут все идеально куча полезной информации в сочетании с прекрасной подачей которая не отпускает внимание и мотивацией которая заставляет смотреть урок за уроком. Очень хочу сменить профессию так как в связи с той работой что имею сейчас свободного времени почти нету( спасибо большое за контент!!!!
С каждым новым уроком мозг напрягается все больше))
Спасибо за доступные ролики и подачу материала!
Пожалуйста!
Классно объясняешь, все понятно и без воды.
Спасибо!
Где вы раньше были, когда я только начинал все это изучать. Все интересно, доступно и не скучно. Спасибо, вы молодец))
Серьезно, всю жизнь работал в общепите и начал дико ненавидеть физическую работу,
Пошел сначала на веб-дизайн там чуть не получилось (Но к этому чуть позже вернусь)
Пришлось обратно идти в общепит,
Но купил себе ноут и наткнулся на твои офигенские видео и убиваю в них целые сутки, я тебя обожаю - реально тебе ПАМЯТНИК нужен в центре города, спасибо тебе огромное за эти обучалки, я уже жду с нетерпением когда смогу работать на фрилансе)))))
Просто от душечное тебе спасибо и низкий поклон)))))
Как успехи за 7 месяцев?
Йоу живой как успехи?
Как успехи, получаеться все ?
Супер, как интересно заниматься программированием!!! Большое спасибо за помощь!
Согласен, хоть вёрстка и не относится к программированию ))...
Шикарное преподавание! Я в восторге! Так понятно, а сколько труда вложено в ваши уроки! Благодарю!
Самый лучший файл обнуления! Эти уроки лучшее, что я нашла. Вот по делу, без воды, в нужном темпе. Есть нюансы, которые нигде больше не рассказывают! Просто огромное, Вам, спасибо! Даете надежду и стимул учиться и осваивать!
искал я себе учителя по верстке... искал-искал и нашел ! Ты лучший учитель. Монтаж на уровне,картинка четкая. Смотреть интересно ! спасибо)
Супер! Я рад!
Лучшие туториалы у тебя! Успехов!
Спасибо!
Евгений, спасибо большое за уроки! Вы действительно замечательный преподаватель, без воды, при этом подробно объясняете, все супер понятно, да еще и делитесь файлами) я проходила разные курсы и везде углубленно изучали css, и я не понимала почему так, когда мои знакомые программисты говорят, что вообще не учили css и самое важное это гриды + флексбокс + медиа выражения, про препроцессор тоже говорили. Понятно, что лучше знать как можно больше, но мне кажется, если в работе это не используешь, то зачем забивать голову, она jsом забьется. Вы многим очень экономите время, спасибо вам большое еще раз! Это самый лучший канал с отличным учителем!
Женя, вы даёте больше знаний, чем на курсах. За подписку. Большое, человеческое спасибо вам.
Спасибо что такой блогер есть
я не разу таких еще не видел успехов тебе в будущей жизни!!!!
Спасибо!
Очень много хорошей и качественной информации👍👍👍
Супер! Я рад!
Ооочень подробно все объясняется да еще и практика, супер! Спасибо!
Знаете что я не знал ничего про html. Но когда брат посоветовал мне смотреть Ютубер, я начал знать и верстать сайт. Спасибо тебе Фрилансер.
Женя, ты нереальный)! Так доступно и легко объяснять - это талант) Жалко, что нельзя сразу несколько лайков ставить урокам)
Спасибо большое! Всегда можно сделать репост ;)
Супер, спасибо за хорошие уроки.
Пожалуйста!
За обнуление стилей отдельное спасибо! Урок этот смотрел ради освежения уже полученных знаний, а вот про обнуление даже не знал пока, взял на заметку и буду использовать как про. Ты крутой! :)
Ты гениален! Благодарю за твои знания и что так просто делишься!
Доступно и с любовью. Годно, но хотелось бы чаще видеть новые видео. Я конечно понимаю, что у каждого свои темпы, все же.
Спасибо! Уроки выходят минимум раз в неделю. Стараюсь делать чаще.
Господи, почему у меня раньше не было такого обнуляющего CSS файла? Сколько боли, сколько страдания... Просто спасибо, от всей души!!! Удачи тебе, никогда не останавливайся иии еще раз спасибо!
Пожалуйста!
Реально в кайф у тебя учиться! Однозначно - есть талант! Благодарю!🙏
Очень полезный урок. Ваши уроки намного лучше платных курсов. Такой подробный и детальный обнуляющий Сss вижу впервые. Спасибо за труд)
Не устаю говорить вам большое спасибо.
Пожалуйста!
какой же ты офигенный чувак,спасибо тебе !!!!!!!!!!!!!!
Пожалуйста!
Много уже где успел поизучать верстку. Про обнуление вообще никто нигде ничего не упоминал. ВААУ. Спасибо! Это очень круто!
Уроки просто класс! Смотрю и учусь с удовольствием! Спасибо за Ваш Труд!👍
Чувак ты лучший!!! спасибо тебе за все то что ты делаешь
Спасибо, стараюсь!
Отличное видео 👍
Спасибо! 🤘
Сколько смотрел и читал обучалок про обнуление стилей, негде не было так много. Это круто! Спасибо!
Пожалуйста!
Вы очень хороший человек, дай бог вам очень много счастья и здоровья :)
Спасибо, коммент для поддержки проекта!
Спасибо!
Большое спасибо из 21г.!!!! Подача супер!!!
Пожалуйста!
БлагоДарю вас за такой невероятный курс! Он волшебный! У меня все получилось!😍
Спасибо! Вы лучший! До Вас забивала голову разной "хренью, вырваными кусками" и в итоге запуталась еще больше. А с Вами все по полочкам внесла ясность. Процветания и здоровья желаю!!!
урок зашел, идем дальше)
Супер!
Радуюсь новому видео также, как ты радуешься 1000 подписчиков в истаграме :)
Ну, мне до 1000 в инсте еще далеко))
@@FreelancerLifeStyle я имел ввиду видео в инсте, где ты радуешься 1000 подписчиков на ютубе вроде
@@0vercringer993 , это да)))
Евгений, спасибо за Ваши уроки. Я на днях закончил один курс с большим трудом. Труд заключался не в сложности материала, а в бестолковости его подачи. Информация накидывалась, как определённая субстанция на вентилятор, не систематизирована, хаотична, вобщем что бы понять и усвоить материал приходилось разгребать Авгиевы конюшни, причём в ручную. А Вы супер, всё преподносите очень доходчиво, по порядку и приятно на слух. И всё это бесплатно - спасибо Вам огромное, здоровья и всего самого доброго!!!
Дякую за чудове відео! Стільки фішок кожного разу знаходжу в ваших уроках!
Надеюсь, что твои видео наберут миллионы просмотров - они более чем стоят этого.
Спасибо! Я тоже)