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 =))
да кому может не нравится этот влогер ?
сколько ни смотрел обучалок
ты лучший сенсей !!) отвечаю
Спасибо!
Да! Ты абсолютно прав. Поддерживаю обеими руками.
Огромное спасибо Жеке за его труд.
@@taaadj Жаке
На просторах СНГ 2 проблемы Дураки и дороги, думаю Дуракам он и может непонравится.
Поддерживаю !!!!!!
всем кто изучает программирование,успехов братцы и сестры!!!
и тебе бро
Ну как дела?
Спасибо и тебе
спасибо от сестры брату
HTML/CSS это ещё не программирование, а только разметка) Но и её уметь делать надо.
Для тех кому лень писать
*{
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 года
Ну навіщо я зайшов в коменти до того, як написав... Ти забрав можливість прописати руками..
А вот с обнулением, это прям душевно было. Столько наработок и вот так, за раз. Цельномассивный респект
вот обнуление кому нравиться копи-пастить:
* {
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 года назад,но не теряет свою актуальность.
Смотрю обучение с улыбкой и мотивацией работать как никогда.
Спасибо!
Отличная подача! Без воды, мэканий-бэканий и задумчивых пауз. Вот такие уроки и должны быть!
Нинішня ситуація змусила до активного саморозвитку, тому дякує вам за цікавий і доступний контент для даної галузі. Трохи після html-тегів заплутаніше, але я вірю що завдяки вам з усім зможу розібратися. Взагалі дуже зручна манера пояснення і навчання: матеріал змістовний, актуальний, ситематизований, ще й унаочнення на додачу, СУПЕР!!!
Один із небагатьох вчителів якого можна дивитись на швидкості 1. Не жує, не чавкає, не тягне гуму. Приємно слухати одним словом, дякую Євген.
Просто лучший канал, нет чувства что тебе что-то не договаривают, потому что не заплатил)
Спасибо!
Помогите
Создаю 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
Жека, спасибо тебе (или Вам) огромнейшее за уроки, за знания, за подачу, за энергетику! Уже не первый урок смотрю - всё чётко, понятно, по полочкам!
Спасибо Евгений! Просто шикарные уроки!
Вы чудо-человек. Откуда в таком маленьком в Вашем объёме так много нужных , безграничных знаний. Наверно Вы Ангел, сеющий семена знаний, доброты, света. Мы Вас любим.
Бро я твой фанат, честно, ты мне как добрый родной дядя)))
Спасибос!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o У меня в саблайме тоже что то появилось, я внимания не обратил и закрыл просто это окно)
Добрый дядя с чувством юмора)))
@@AndreLLo_o решил проблему?
Спасибо что подходите к занятиям не как "да сами когда-нибудь узнаете".
А реально делитесь своим опытом и показываете как сами работаете
Очень интересно!!! Спасибо, Женя!!! Файл обнуления - супер! 🤩🤩🤩
Спасибо, Женя, ты очень классный преподаватель!
Вы потрясающий человек! Я просто влюблена в ваши видео, и прихожу к уверенности, что веб-разработка это моё. Настоящее наслаждение учиться по вашим урокам. Спасибо огромное!
Я очень очень рад!
Евгений, огромное спасибо за это и все последующие уроки, которые позволяют нам бесплатно получать качественное обучение!!!
Как же я рада, что нашла Ваши уроки. Очень понятно, профессионально. Спасибо.
Супперрррр. Жаль что только сейчас попал сюда. Заново обучаюсь. Спасибо огромное. Дай тебе здоровья и удачи.
Женя, дякую тобі за твою дуже насичену роботу! Я до цього ставився скептично що зможу опанувати знання в IT. Дякую тобі ще раз. Ти єдиний, хто чітко і зрозуміло все розповідаєш! Слава Украіні!
Обожаю тебя очень доходчиво объясняешь
ёооома, ё не закрывай хотя бы то, что есть у тебя на канале!! это просто шикарнейший контент!!
Реально в кайф у тебя учиться! Однозначно - есть талант! Благодарю!🙏
Я только начал изучать вестку и пересмотрел кучу хлама ))) хорошо что я тебя нашел ))) по мне ты лучший в данный момент на ютубе. Спасибо за уроки не останавливайся и продолжай дальше делать крутые уроки ))
Спасибо!
Как успехи через 10 месяцев?
@@MonteCrush. а у тебя как там я только 2 дня назад начал
@@ssdgee9005 почти в совершенстве знаю html и css и скоро начинают учит JavaScript:)
@@MonteCrush. давай успехов тебе а я HTML и CSS сейчас учу
Посмотрел много видео, но все равно после каждого вашего урока нахожу для себя что-то новое. Спасибо Вам огромное !
Спасибо!
Такого подробного обнуления я еще не встречал! Вы лучший. Лайк от души!!!
Ооочень подробно все объясняется да еще и практика, супер! Спасибо!
Вот за такое просто хочется обнять и поцеловать этого рыжего,бородатого дядьку ! Большой лайк тебе СЕНСЕЙ !!!
Пожалуйста!
СПАСИБО!!! Наконец-то у меня есть хороший учитель! За три года это первый, которому я рада! Здоровья вам и вашей семье!
Пожалуйста!
Очень крутая подача инфы!Спасибо тебе за эти уроки!
Ты гениален! Благодарю за твои знания и что так просто делишься!
Уроки понятные. Спасибо) аудио отбивке в конце и в начале уроков неимоверно прикольные
Супер! Я рад!
Лайк за видео без воды! Все понятно и общедоступно, спасибо.
Спасибо, я рад!
Мужик, ты крут!!! Все очень доходчиво объясняешь. Спасибо! Удачи тебе и развитие твоему каналу!)
В очередной раз благодарю за урок и доступное преподношение информации. Спасибо , Евгений !!!
Спасибо за потраченные усилия!Благодаря твоим урокам в моей голове информация начала систематизироваться.
Отлично! Я рад!
Ой мать моя женщина, как же приятно слушать твои лекции. Бесподобно!
Спасибо! Я рад!
Спасибо тебе за такие уроки, особенно когда я вижу твои глаза и как ты говоришь, очень помогает как урок с учителем))
лозунг в конце видео - воодушевляет! форма подачи информации радует, спасибо за очередной видос!
Классно объясняешь, все понятно и без воды.
Спасибо!
С каждым новым уроком мозг напрягается все больше))
Спасибо за доступные ролики и подачу материала!
Пожалуйста!
Спасибо большое. Данная серия, как и остальные по этой теме, на высоте!
Знаете что я не знал ничего про html. Но когда брат посоветовал мне смотреть Ютубер, я начал знать и верстать сайт. Спасибо тебе Фрилансер.
Супер, как интересно заниматься программированием!!! Большое спасибо за помощь!
Согласен, хоть вёрстка и не относится к программированию ))...
Огромное спасибо за ваш труд! Ваши уроки намного лучше большинства уроков платных школ!
Пожалуйста! Я рад!
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
Лучшие туториалы у тебя! Успехов!
Спасибо!
Спасибо за урок, круто, что учел обнуление всего-всего важного, а не только типичного, как многие рекомендуют:)
Спасибо!
За обнуление стилей отдельное спасибо! Урок этот смотрел ради освежения уже полученных знаний, а вот про обнуление даже не знал пока, взял на заметку и буду использовать как про. Ты крутой! :)
Женя благодарю за эти уроки, такие эффективные методы обучения как у Тебя, поднимают интерес с каждым уроком
УРА новое видео!!!
Поздравляю, уже почти 5000 подписчиков!!!
Надеюсь будет намного больше)
Хех, я тоже надеюсь))
Уже почти 25к, и только прибавляются)
@@user-ri1ry7sx6p ужу 33к)))
Уже 50 К! И это очень заслуженно!
@@tetienna уже 57 к
Очень много хорошей и качественной информации👍👍👍
Супер! Я рад!
Очень все классно рассказал! Все понятно, без воды и самое главное качевственно! Спасибо большое
Уроки просто класс! Смотрю и учусь с удовольствием! Спасибо за Ваш Труд!👍
Всё очень чётко разжёвывает и объясняет просто респект тебе чувак, даже не знаю что бы делал без тебя!
Я рад!
То что нужно новичку ! Очень хорошая подача материала, так же отдельный лайк за качественный монтаж!
Спасибо!
Женя, вы даёте больше знаний, чем на курсах. За подписку. Большое, человеческое спасибо вам.
Очередной урок на высшем уровне! Спасибо!!!
Супер, спасибо за хорошие уроки.
Пожалуйста!
С нетерпением жду верстку с нуля с подробным объяснением)))
P.S. лайк поставил.
Конечно будет, мы уверенно к этому идем!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o селекторы в css нельзя оставлять пустыми , в них обязательно должно быть хоть одно свойство
Благодарю, за качественный контент. Изучаю HTML, CSS по вашим урокам.
Евгений спасибо за уроки. Ты очень круто объясняешь. Понятным и доступным языком. Желаю удачи и миллион подписчиков)))
Спасибо что такой блогер есть
я не разу таких еще не видел успехов тебе в будущей жизни!!!!
Спасибо!
какой же ты офигенный чувак,спасибо тебе !!!!!!!!!!!!!!
Пожалуйста!
отличный урок! очень рада что нашла Ваш канал! Спасибо Вам огромное!
Молодец-четко,грамотно,без лишних слов!!!
Доступно и с любовью. Годно, но хотелось бы чаще видеть новые видео. Я конечно понимаю, что у каждого свои темпы, все же.
Спасибо! Уроки выходят минимум раз в неделю. Стараюсь делать чаще.
Большое спасибо из 21г.!!!! Подача супер!!!
Пожалуйста!
Обнуление стилей - все гениальное просто. И радует то , что я это слышу от тебя. Плюс мне в копилку . Пошел смотреть следующее видео.
спасибо за ролик. Даже не столько содержание, сколько твой позитив вызывает приятные ощущения от просмотра, ну и воспринимать легко ))
Чувак ты лучший!!! спасибо тебе за все то что ты делаешь
Спасибо, стараюсь!
Клад... Огромная благодарность от новичка... Самая подробная информация из всего что видел.. Просто LIKE.
Спасибо!
Эти уроки - это лучшее, что можно найти на просторах интернета. Спасибо!
Человечище!Такое доброе дело делает.Низкий поклон тебе =)
Не устаю говорить вам большое спасибо.
Пожалуйста!
Все стили обнулились - теперь мы сами управляем реальностью
Именно!
ахахахаха)
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o ты не указал никаких правил для div. И программа считает пустой набор правил {} в css за хлам, бесполезный код,
@@AndreLLo_o о я тоже вс код использую) благо у меня есть друг который в нем разбирается и помогает мне :)
БлагоДарю вас за такой невероятный курс! Он волшебный! У меня все получилось!😍
Евгений, спасибо, всех благ, здоровья и удачи!!!
Серьезно, всю жизнь работал в общепите и начал дико ненавидеть физическую работу,
Пошел сначала на веб-дизайн там чуть не получилось (Но к этому чуть позже вернусь)
Пришлось обратно идти в общепит,
Но купил себе ноут и наткнулся на твои офигенские видео и убиваю в них целые сутки, я тебя обожаю - реально тебе ПАМЯТНИК нужен в центре города, спасибо тебе огромное за эти обучалки, я уже жду с нетерпением когда смогу работать на фрилансе)))))
Просто от душечное тебе спасибо и низкий поклон)))))
Как успехи за 7 месяцев?
Йоу живой как успехи?
Как успехи, получаеться все ?
искал я себе учителя по верстке... искал-искал и нашел ! Ты лучший учитель. Монтаж на уровне,картинка четкая. Смотреть интересно ! спасибо)
Супер! Я рад!
У Вас просто талант! Спасибо огромное. Все четко и ясно! Всем мира и добра!
Спасибо за урок. Учимся дальше.
Женя, ты нереальный)! Так доступно и легко объяснять - это талант) Жалко, что нельзя сразу несколько лайков ставить урокам)
Спасибо большое! Всегда можно сделать репост ;)
Отличное видео 👍
Спасибо! 🤘
Огромная благодарность за наработки!
Спасибо, коммент для поддержки проекта!
Спасибо!
урок зашел, идем дальше)
Супер!
Евгений спасибо за Ваши старания
Где вы раньше были, когда я только начинал все это изучать. Все интересно, доступно и не скучно. Спасибо, вы молодец))
Господи, почему у меня раньше не было такого обнуляющего CSS файла? Сколько боли, сколько страдания... Просто спасибо, от всей души!!! Удачи тебе, никогда не останавливайся иии еще раз спасибо!
Пожалуйста!
Надеюсь, что твои видео наберут миллионы просмотров - они более чем стоят этого.
Спасибо! Я тоже)
Не могу подобрать более подходящего слова чем "Вау"! Видео супер-полезное. Огромное спасибо!
Спасибо за ваши замечательные уроки
- Волнуетесь? - янемного волнуюсь))))))))
Ахах)
спасибо за адекватный файл обнуления, обычно его писала/нормалайз
@@mini8622 закрой рот