CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5
Vložit
- čas přidán 12. 07. 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 проблемы Дураки и дороги, думаю Дуракам он и может непонравится.
Поддерживаю !!!!!!
Для тех кому лень писать
*{
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 это ещё не программирование, а только разметка) Но и её уметь делать надо.
вот обнуление кому нравиться копи-пастить:
* {
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 года назад,но не теряет свою актуальность.
Смотрю обучение с улыбкой и мотивацией работать как никогда.
Спасибо!
Я только начал изучать вестку и пересмотрел кучу хлама ))) хорошо что я тебя нашел ))) по мне ты лучший в данный момент на ютубе. Спасибо за уроки не останавливайся и продолжай дальше делать крутые уроки ))
Спасибо!
Как успехи через 10 месяцев?
@@MonteCrush. а у тебя как там я только 2 дня назад начал
@@ssdgee9005 почти в совершенстве знаю html и css и скоро начинают учит JavaScript:)
@@MonteCrush. давай успехов тебе а я HTML и CSS сейчас учу
Бро я твой фанат, честно, ты мне как добрый родной дядя)))
Спасибос!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o У меня в саблайме тоже что то появилось, я внимания не обратил и закрыл просто это окно)
Добрый дядя с чувством юмора)))
@@AndreLLo_o решил проблему?
Один із небагатьох вчителів якого можна дивитись на швидкості 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
Нинішня ситуація змусила до активного саморозвитку, тому дякує вам за цікавий і доступний контент для даної галузі. Трохи після html-тегів заплутаніше, але я вірю що завдяки вам з усім зможу розібратися. Взагалі дуже зручна манера пояснення і навчання: матеріал змістовний, актуальний, ситематизований, ще й унаочнення на додачу, СУПЕР!!!
Ооочень подробно все объясняется да еще и практика, супер! Спасибо!
Спасибо что подходите к занятиям не как "да сами когда-нибудь узнаете".
А реально делитесь своим опытом и показываете как сами работаете
Спасибо, Женя, ты очень классный преподаватель!
Отличная подача! Без воды, мэканий-бэканий и задумчивых пауз. Вот такие уроки и должны быть!
Молодец-четко,грамотно,без лишних слов!!!
Ты гениален! Благодарю за твои знания и что так просто делишься!
Евгений, огромное спасибо за это и все последующие уроки, которые позволяют нам бесплатно получать качественное обучение!!!
Вы потрясающий человек! Я просто влюблена в ваши видео, и прихожу к уверенности, что веб-разработка это моё. Настоящее наслаждение учиться по вашим урокам. Спасибо огромное!
Я очень очень рад!
Реально в кайф у тебя учиться! Однозначно - есть талант! Благодарю!🙏
В очередной раз благодарю за урок и доступное преподношение информации. Спасибо , Евгений !!!
Обожаю тебя очень доходчиво объясняешь
Посмотрел много видео, но все равно после каждого вашего урока нахожу для себя что-то новое. Спасибо Вам огромное !
Спасибо!
Такого подробного обнуления я еще не встречал! Вы лучший. Лайк от души!!!
Очень все классно рассказал! Все понятно, без воды и самое главное качевственно! Спасибо большое
Вы чудо-человек. Откуда в таком маленьком в Вашем объёме так много нужных , безграничных знаний. Наверно Вы Ангел, сеющий семена знаний, доброты, света. Мы Вас любим.
Лайк за видео без воды! Все понятно и общедоступно, спасибо.
Спасибо, я рад!
лозунг в конце видео - воодушевляет! форма подачи информации радует, спасибо за очередной видос!
Спасибо большое. Данная серия, как и остальные по этой теме, на высоте!
Вот за такое просто хочется обнять и поцеловать этого рыжего,бородатого дядьку ! Большой лайк тебе СЕНСЕЙ !!!
Пожалуйста!
Все стили обнулились - теперь мы сами управляем реальностью
Именно!
ахахахаха)
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o ты не указал никаких правил для div. И программа считает пустой набор правил {} в css за хлам, бесполезный код,
@@AndreLLo_o о я тоже вс код использую) благо у меня есть друг который в нем разбирается и помогает мне :)
Премного благодарен за лучшие уроки. Сенсей.
Благодарю, за качественный контент. Изучаю HTML, CSS по вашим урокам.
Уроки понятные. Спасибо) аудио отбивке в конце и в начале уроков неимоверно прикольные
Супер! Я рад!
С нетерпением жду верстку с нуля с подробным объяснением)))
P.S. лайк поставил.
Конечно будет, мы уверенно к этому идем!
Помогите
Создаю style.css(делаю все как на видео)
Пишу div{
}
Внизу экрана появляется предупреждение Do not use empty rulesets
Использую VS Code
@@AndreLLo_o селекторы в css нельзя оставлять пустыми , в них обязательно должно быть хоть одно свойство
Спасибо за ваши замечательные уроки
Уроки просто класс! Смотрю и учусь с удовольствием! Спасибо за Ваш Труд!👍
Спасибо за потраченные усилия!Благодаря твоим урокам в моей голове информация начала систематизироваться.
Отлично! Я рад!
Классно объясняешь, все понятно и без воды.
Спасибо!
Огромная благодарность за наработки!
Очередной урок на высшем уровне! Спасибо!!!
С каждым новым уроком мозг напрягается все больше))
Спасибо за доступные ролики и подачу материала!
Пожалуйста!
Супер, как интересно заниматься программированием!!! Большое спасибо за помощь!
Согласен, хоть вёрстка и не относится к программированию ))...
Евгений спасибо за Ваши старания
Очень крутая подача инфы!Спасибо тебе за эти уроки!
Лучшие туториалы у тебя! Успехов!
Спасибо!
Женя, дякую тобі за твою дуже насичену роботу! Я до цього ставився скептично що зможу опанувати знання в IT. Дякую тобі ще раз. Ти єдиний, хто чітко і зрозуміло все розповідаєш! Слава Украіні!
Здравствуйте! Благодарю за видео!
Женя благодарю за эти уроки, такие эффективные методы обучения как у Тебя, поднимают интерес с каждым уроком
Супер, спасибо за хорошие уроки.
Пожалуйста!
Ой мать моя женщина, как же приятно слушать твои лекции. Бесподобно!
Спасибо! Я рад!
Обнуление стилей - все гениальное просто. И радует то , что я это слышу от тебя. Плюс мне в копилку . Пошел смотреть следующее видео.
Спасибо за урок. Учимся дальше.
УРА новое видео!!!
Поздравляю, уже почти 5000 подписчиков!!!
Надеюсь будет намного больше)
Хех, я тоже надеюсь))
Уже почти 25к, и только прибавляются)
@@user-ri1ry7sx6p ужу 33к)))
Уже 50 К! И это очень заслуженно!
@@tetienna уже 57 к
СПАСИБО!!! Наконец-то у меня есть хороший учитель! За три года это первый, которому я рада! Здоровья вам и вашей семье!
Пожалуйста!
Дякую за чудове відео! Стільки фішок кожного разу знаходжу в ваших уроках!
Очень много хорошей и качественной информации👍👍👍
Супер! Я рад!
То что нужно новичку ! Очень хорошая подача материала, так же отдельный лайк за качественный монтаж!
Спасибо!
Женя, вы даёте больше знаний, чем на курсах. За подписку. Большое, человеческое спасибо вам.
Евгений, спасибо, всех благ, здоровья и удачи!!!
Спасибо за урок, круто, что учел обнуление всего-всего важного, а не только типичного, как многие рекомендуют:)
Спасибо!
Всё очень чётко разжёвывает и объясняет просто респект тебе чувак, даже не знаю что бы делал без тебя!
Я рад!
ёооома, ё не закрывай хотя бы то, что есть у тебя на канале!! это просто шикарнейший контент!!
Человечище!Такое доброе дело делает.Низкий поклон тебе =)
Огромное спасибо за ваш труд! Ваши уроки намного лучше большинства уроков платных школ!
Пожалуйста! Я рад!
Спасибо что такой блогер есть
я не разу таких еще не видел успехов тебе в будущей жизни!!!!
Спасибо!
БлагоДарю вас за такой невероятный курс! Он волшебный! У меня все получилось!😍
Отличный урок. Благодарб 🙏
Не устаю говорить вам большое спасибо.
Пожалуйста!
какой же ты офигенный чувак,спасибо тебе !!!!!!!!!!!!!!
Пожалуйста!
Эти уроки - это лучшее, что можно найти на просторах интернета. Спасибо!
спасибо за ролик. Даже не столько содержание, сколько твой позитив вызывает приятные ощущения от просмотра, ну и воспринимать легко ))
Отличное видео 👍
Спасибо! 🤘
Клад... Огромная благодарность от новичка... Самая подробная информация из всего что видел.. Просто LIKE.
Спасибо!
У Вас просто талант! Спасибо огромное. Все четко и ясно! Всем мира и добра!
Не могу подобрать более подходящего слова чем "Вау"! Видео супер-полезное. Огромное спасибо!
Доступно и с любовью. Годно, но хотелось бы чаще видеть новые видео. Я конечно понимаю, что у каждого свои темпы, все же.
Спасибо! Уроки выходят минимум раз в неделю. Стараюсь делать чаще.
Спасибо, коммент для поддержки проекта!
Спасибо!
Крутые Уроки и подача, Благодарю👍👍👍
Спасибо тебе за такие уроки, особенно когда я вижу твои глаза и как ты говоришь, очень помогает как урок с учителем))
Серьезно, всю жизнь работал в общепите и начал дико ненавидеть физическую работу,
Пошел сначала на веб-дизайн там чуть не получилось (Но к этому чуть позже вернусь)
Пришлось обратно идти в общепит,
Но купил себе ноут и наткнулся на твои офигенские видео и убиваю в них целые сутки, я тебя обожаю - реально тебе ПАМЯТНИК нужен в центре города, спасибо тебе огромное за эти обучалки, я уже жду с нетерпением когда смогу работать на фрилансе)))))
Просто от душечное тебе спасибо и низкий поклон)))))
Как успехи за 7 месяцев?
Йоу живой как успехи?
Как успехи, получаеться все ?
Большое спасибо из 21г.!!!! Подача супер!!!
Пожалуйста!
Very useful! Thank you so much for these videos you created long time ago!
Спасибо за эту ценную информацию.
Чувак ты лучший!!! спасибо тебе за все то что ты делаешь
Спасибо, стараюсь!
Классные уроки! Очень рад , что есть такие люди которые делятся своими знаниями. Спасибо.
Пожалуйста!
отличный урок! очень рада что нашла Ваш канал! Спасибо Вам огромное!
Вы красавчик! Спасибо что Вы есть!
урок зашел, идем дальше)
Супер!
Женя, ты нереальный)! Так доступно и легко объяснять - это талант) Жалко, что нельзя сразу несколько лайков ставить урокам)
Спасибо большое! Всегда можно сделать репост ;)
За обнуление стилей отдельное спасибо! Урок этот смотрел ради освежения уже полученных знаний, а вот про обнуление даже не знал пока, взял на заметку и буду использовать как про. Ты крутой! :)
искал я себе учителя по верстке... искал-искал и нашел ! Ты лучший учитель. Монтаж на уровне,картинка четкая. Смотреть интересно ! спасибо)
Супер! Я рад!