CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5
HTML-код
- Опубликовано: 5 авг 2024
- 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
🤟 Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
![MURDER DRONES Series Finale [TRAILER]](http://i.ytimg.com/vi/p6mhC5Iatns/mqdefault.jpg)
Новый чат для общения и помощи друг другу по верстке:
t.me/flschat
а что с чатом?
Спасибо за уроки, все супер! Лучшее что есть на ютубе! Если не трудно поясни про обнуление css, это воде как считается плохой практикой. И я вроде как понимаю почему, но у тебя опыт огромный и ты советуешь обнулять. А как быть, если ты сверстал сайт блог, а блогер сует статьи в html, и раз css 1 на все, то у него все отступы =0? Я только изучаю, и у меня нет практики, но хотелось бы понять.
@@user-gq2um4qs2m про лучшее не знаю но могу подсказать что уроки у хаудихо тоже очень нравятся, посмотри
@@hertz3001 Там много не актуальной информации... Сбивающая с толку новичков.
Красавец, каждый видосик супер, спасибо тебе. только если бы музычку потише, после 30-40 минут уже немного приедается как в супермаркетах.
Для тех кому лень писать
*{
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 года
Ну навіщо я зайшов в коменти до того, як написав... Ти забрав можливість прописати руками..
2022 год, а до сих пор самые лучшие видео по вёрстке
Обнуление стиля так только да? В дальнейшем просто эти обнуления написать и все потом можно начать приступать к стилям да?
@@user-nw3iw2ci3x Да
И в 2023))))
і в 2024)))@@Karrit94
@@Karrit94 и в 2024 =))
А вот с обнулением, это прям душевно было. Столько наработок и вот так, за раз. Цельномассивный респект
Сколько пересмотрела разных роликов, но нигде не говорили про обнуление стилей!!!
Вы изменили мой взгляд на многие вещи по верстке сайтов, спасибо за ваш труд!!!
Я рад! Пожалуйста!
@@FreelancerLifeStyle ваш платный курс по верстке который был 30 дней вы там даете весь JavaScript?
Потдерживаю. Преподаватель из фрилансера топовый. Я тоже не видел столько лайфхаков в каждом новом уроке.
да кому может не нравится этот влогер ?
сколько ни смотрел обучалок
ты лучший сенсей !!) отвечаю
Спасибо!
Да! Ты абсолютно прав. Поддерживаю обеими руками.
Огромное спасибо Жеке за его труд.
@@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 спс!
Хорошо, что я сначала в комменты полез. Ты сэкономил мне кучу времени, мэн)
всем кто изучает программирование,успехов братцы и сестры!!!
и тебе бро
Ну как дела?
Спасибо и тебе
спасибо от сестры брату
HTML/CSS это ещё не программирование, а только разметка) Но и её уметь делать надо.
Видео вышло 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 решил проблему?
Спасибо, Женя, ты очень классный преподаватель!
Очень интересно!!! Спасибо, Женя!!! Файл обнуления - супер! 🤩🤩🤩
Обнуление стилей - все гениальное просто. И радует то , что я это слышу от тебя. Плюс мне в копилку . Пошел смотреть следующее видео.
Я только начал изучать вестку и пересмотрел кучу хлама ))) хорошо что я тебя нашел ))) по мне ты лучший в данный момент на ютубе. Спасибо за уроки не останавливайся и продолжай дальше делать крутые уроки ))
Спасибо!
Как успехи через 10 месяцев?
@@MonteCrush. а у тебя как там я только 2 дня назад начал
@@ssdgee9005 почти в совершенстве знаю html и css и скоро начинают учит JavaScript:)
@@MonteCrush. давай успехов тебе а я HTML и CSS сейчас учу
Вы потрясающий человек! Я просто влюблена в ваши видео, и прихожу к уверенности, что веб-разработка это моё. Настоящее наслаждение учиться по вашим урокам. Спасибо огромное!
Я очень очень рад!
Женя благодарю за эти уроки, такие эффективные методы обучения как у Тебя, поднимают интерес с каждым уроком
спасибо за ролик. Даже не столько содержание, сколько твой позитив вызывает приятные ощущения от просмотра, ну и воспринимать легко ))
Нинішня ситуація змусила до активного саморозвитку, тому дякує вам за цікавий і доступний контент для даної галузі. Трохи після html-тегів заплутаніше, але я вірю що завдяки вам з усім зможу розібратися. Взагалі дуже зручна манера пояснення і навчання: матеріал змістовний, актуальний, ситематизований, ще й унаочнення на додачу, СУПЕР!!!
Спасибо Евгений! Просто шикарные уроки!
В очередной раз благодарю за урок и доступное преподношение информации. Спасибо , Евгений !!!
Где вы раньше были, когда я только начинал все это изучать. Все интересно, доступно и не скучно. Спасибо, вы молодец))
Лайк за видео без воды! Все понятно и общедоступно, спасибо.
Спасибо, я рад!
Ой мать моя женщина, как же приятно слушать твои лекции. Бесподобно!
Спасибо! Я рад!
ёооома, ё не закрывай хотя бы то, что есть у тебя на канале!! это просто шикарнейший контент!!
Посмотрел несколько раз и буду смотреть ещё и ещё. Просто получаю удовольствие от всего, что ты делаешь. Спасибо. Лайк.
Спасибо что подходите к занятиям не как "да сами когда-нибудь узнаете".
А реально делитесь своим опытом и показываете как сами работаете
С каждым новым уроком мозг напрягается все больше))
Спасибо за доступные ролики и подачу материала!
Пожалуйста!
За обнуление стилей отдельное спасибо! Урок этот смотрел ради освежения уже полученных знаний, а вот про обнуление даже не знал пока, взял на заметку и буду использовать как про. Ты крутой! :)
Женя, вы даёте больше знаний, чем на курсах. За подписку. Большое, человеческое спасибо вам.
С нетерпением жду верстку с нуля с подробным объяснением)))
P.S. лайк поставил.
Конечно будет, мы уверенно к этому идем!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o селекторы в css нельзя оставлять пустыми , в них обязательно должно быть хоть одно свойство
Спасибо за потраченные усилия!Благодаря твоим урокам в моей голове информация начала систематизироваться.
Отлично! Я рад!
Евгений, огромное спасибо за это и все последующие уроки, которые позволяют нам бесплатно получать качественное обучение!!!
Не могу подобрать более подходящего слова чем "Вау"! Видео супер-полезное. Огромное спасибо!
Огромное спасибо за ваш труд! Ваши уроки намного лучше большинства уроков платных школ!
Пожалуйста! Я рад!
Вот за такое просто хочется обнять и поцеловать этого рыжего,бородатого дядьку ! Большой лайк тебе СЕНСЕЙ !!!
Пожалуйста!
Один із небагатьох вчителів якого можна дивитись на швидкості 1. Не жує, не чавкає, не тягне гуму. Приємно слухати одним словом, дякую Євген.
Огромное спасибо вам за то, что даёте такую уникальную возможность получать знания по вёрстке совершенно бесплатно и качественно! Каждый ролик приятен для просмотра и самое главное содержит в себе внятную для запоминания информацию))
Урок/ один из лучших уроков про обнуление стилей по сути других то и нет/ ничего подобного нет
Спасибо! 👍🤟
мало того я к этому уроку возвращаюсь спустя песколько занятий и восстанавливаю пробелы. Просто восторг, других эмоций не могу передать!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
У Вас просто талант! Спасибо огромное. Все четко и ясно! Всем мира и добра!
Огромное спасибо за замечательные уроки!!! Вы - Супер-Мега Человечищще!!! Даже слов нет , чтобы передать всю благодарность за Ваши труды! Счастья Вам!!! :)
Уроки понятные. Спасибо) аудио отбивке в конце и в начале уроков неимоверно прикольные
Супер! Я рад!
Всё очень чётко разжёвывает и объясняет просто респект тебе чувак, даже не знаю что бы делал без тебя!
Я рад!
Человечище!Такое доброе дело делает.Низкий поклон тебе =)
Мужик, ты крут!!! Все очень доходчиво объясняешь. Спасибо! Удачи тебе и развитие твоему каналу!)
Классно объясняешь, все понятно и без воды.
Спасибо!
Спасибо что такой блогер есть
я не разу таких еще не видел успехов тебе в будущей жизни!!!!
Спасибо!
Жека- красавчик! Одно видео за другим заходит, очень круто и подробно снимаешь! Успехов тебе!
Давно хотел начать обучаться программированию но все никак не мог найти походящий контент, тут все идеально куча полезной информации в сочетании с прекрасной подачей которая не отпускает внимание и мотивацией которая заставляет смотреть урок за уроком. Очень хочу сменить профессию так как в связи с той работой что имею сейчас свободного времени почти нету( спасибо большое за контент!!!!
Спасибо за урок, круто, что учел обнуление всего-всего важного, а не только типичного, как многие рекомендуют:)
Спасибо!
То что нужно новичку ! Очень хорошая подача материала, так же отдельный лайк за качественный монтаж!
Спасибо!
Ооочень подробно все объясняется да еще и практика, супер! Спасибо!
Шикарное преподавание! Я в восторге! Так понятно, а сколько труда вложено в ваши уроки! Благодарю!
Жека, спасибо тебе (или Вам) огромнейшее за уроки, за знания, за подачу, за энергетику! Уже не первый урок смотрю - всё чётко, понятно, по полочкам!
Обожаю тебя очень доходчиво объясняешь
Реально в кайф у тебя учиться! Однозначно - есть талант! Благодарю!🙏
Евгений Вы делаете Великое дело. Логика подачи материала просто бомба включая и этот урок. Спасибо за то что так стараетесь, уверен Вселенная Вас отблагодарит)
СПАСИБО!!! Наконец-то у меня есть хороший учитель! За три года это первый, которому я рада! Здоровья вам и вашей семье!
Пожалуйста!
Клад... Огромная благодарность от новичка... Самая подробная информация из всего что видел.. Просто LIKE.
Спасибо!
Очень полезный урок. Ваши уроки намного лучше платных курсов. Такой подробный и детальный обнуляющий Сss вижу впервые. Спасибо за труд)
Спасибо большое. Данная серия, как и остальные по этой теме, на высоте!
Супер, как интересно заниматься программированием!!! Большое спасибо за помощь!
Согласен, хоть вёрстка и не относится к программированию ))...
Лучшие туториалы у тебя! Успехов!
Спасибо!
Спасибо вам за полезную информацию, как вы ее подаете и как объясняете - интересно и на высоком уровне, по вам видно что вы явно добрый человек и опытный программист
Не ну так не честно, почему только сейчас я смотрю твой курс. Тебя в топ надо блин. Обнуляю свои знания и смотрю все твои курсы. Спасибо добрый и умный рыжий дядька !!!))
Женя, дякую тобі за твою дуже насичену роботу! Я до цього ставився скептично що зможу опанувати знання в IT. Дякую тобі ще раз. Ти єдиний, хто чітко і зрозуміло все розповідаєш! Слава Украіні!
Женя, ты нереальный)! Так доступно и легко объяснять - это талант) Жалко, что нельзя сразу несколько лайков ставить урокам)
Спасибо большое! Всегда можно сделать репост ;)
Обнуление сейчас в моде ) честно говоря ты первый кого я вижу и кто говорит об этом... Это просто взрыв мозга! Супер урок
Дякую за чудове відео! Стільки фішок кожного разу знаходжу в ваших уроках!
Очень много хорошей и качественной информации👍👍👍
Супер! Я рад!
искал я себе учителя по верстке... искал-искал и нашел ! Ты лучший учитель. Монтаж на уровне,картинка четкая. Смотреть интересно ! спасибо)
Супер! Я рад!
Очень хорошие уроки, замечательные по всем аспектам. Мне несказанно повезло, что я натолкнулся именно на этот канал, на самом начальном этапе самообучения. Евгению всяческих успехов и процветания его каналу. Лишь его видео заставили меня почувствовать, что всё получится, а это дорогого стоит!:)
Уроки просто класс! Смотрю и учусь с удовольствием! Спасибо за Ваш Труд!👍
Господи, почему у меня раньше не было такого обнуляющего CSS файла? Сколько боли, сколько страдания... Просто спасибо, от всей души!!! Удачи тебе, никогда не останавливайся иии еще раз спасибо!
Пожалуйста!
Супер, спасибо за хорошие уроки.
Пожалуйста!
БлагоДарю вас за такой невероятный курс! Он волшебный! У меня все получилось!😍
Ты гениален! Благодарю за твои знания и что так просто делишься!
Доступно и с любовью. Годно, но хотелось бы чаще видеть новые видео. Я конечно понимаю, что у каждого свои темпы, все же.
Спасибо! Уроки выходят минимум раз в неделю. Стараюсь делать чаще.
УРА новое видео!!!
Поздравляю, уже почти 5000 подписчиков!!!
Надеюсь будет намного больше)
Хех, я тоже надеюсь))
Уже почти 25к, и только прибавляются)
@@user-ri1ry7sx6p ужу 33к)))
Уже 50 К! И это очень заслуженно!
@@tetienna уже 57 к
Супперрррр. Жаль что только сейчас попал сюда. Заново обучаюсь. Спасибо огромное. Дай тебе здоровья и удачи.
Евгений, спасибо большое за уроки! Вы действительно замечательный преподаватель, без воды, при этом подробно объясняете, все супер понятно, да еще и делитесь файлами) я проходила разные курсы и везде углубленно изучали css, и я не понимала почему так, когда мои знакомые программисты говорят, что вообще не учили css и самое важное это гриды + флексбокс + медиа выражения, про препроцессор тоже говорили. Понятно, что лучше знать как можно больше, но мне кажется, если в работе это не используешь, то зачем забивать голову, она jsом забьется. Вы многим очень экономите время, спасибо вам большое еще раз! Это самый лучший канал с отличным учителем!
Отличное видео 👍
Спасибо! 🤘
Спасибо тебе за такие уроки, особенно когда я вижу твои глаза и как ты говоришь, очень помогает как урок с учителем))
Недавно почав вчитись по твоїх відеоуроках, просто пушка, поки навіть все зрозуміло. Бажаю здоров'я та натхнення.
Не устаю говорить вам большое спасибо.
Пожалуйста!
Чувак ты лучший!!! спасибо тебе за все то что ты делаешь
Спасибо, стараюсь!
Вы очень хороший человек, дай бог вам очень много счастья и здоровья :)
Что могу сказать я очень приятно удивлен !! как все доходчиво.... в каждую деталь.... Спасибо огромное тебе за все, я с 0 начал с тобой, все идет по плану, жалею что раньше не смотрел тебя!! ( очень много инф..... нужно пересматривать и заучать) Еще раз спасибо!!!
какой же ты офигенный чувак,спасибо тебе !!!!!!!!!!!!!!
Пожалуйста!
Замечательный урок)
Кому интересно:
*{
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-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;}
Спасибо! Вы лучший! До Вас забивала голову разной "хренью, вырваными кусками" и в итоге запуталась еще больше. А с Вами все по полочкам внесла ясность. Процветания и здоровья желаю!!!
Евгений, когда разговаривает со зрителем между объяснением материала: 😊
Евгений, когда объясняет материал: 😳⚡
Надеюсь, что твои видео наберут миллионы просмотров - они более чем стоят этого.
Спасибо! Я тоже)
Все стили обнулились - теперь мы сами управляем реальностью
Именно!
ахахахаха)
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o ты не указал никаких правил для div. И программа считает пустой набор правил {} в css за хлам, бесполезный код,
@@AndreLLo_o о я тоже вс код использую) благо у меня есть друг который в нем разбирается и помогает мне :)
Сколько смотрел видео уроков именно по CSS, вы объяснили лучше, проще, короче чем другие дядьки фрилансеры, стало все более менее понятно и доходчиво, была бы возможность ставить не 1 лайк, а хотя бы 10))
Большое спасибо вам за ваш труд и упорство))
Евгений, спасибо за Ваши уроки. Я на днях закончил один курс с большим трудом. Труд заключался не в сложности материала, а в бестолковости его подачи. Информация накидывалась, как определённая субстанция на вентилятор, не систематизирована, хаотична, вобщем что бы понять и усвоить материал приходилось разгребать Авгиевы конюшни, причём в ручную. А Вы супер, всё преподносите очень доходчиво, по порядку и приятно на слух. И всё это бесплатно - спасибо Вам огромное, здоровья и всего самого доброго!!!
Большое спасибо из 21г.!!!! Подача супер!!!
Пожалуйста!