Тёмный

Основы CSS - #3 - Box model, margin 

loftblog
Подписаться 384 тыс.
Просмотров 94 тыс.
50% 1

Пройди БЕСПЛАТНО профориентацию в IT - bit.ly/2NLILne
В этом видео мы приступим к практике. Начнем познавать азы верстки. Рассмотрим box model блочных элементов, поймем для чего нужны div и научимся их использовать, а так же рассмотрим на практике свойство margin и горизонтальное позиционирование.
Смотрите курс "HTML для начинающих" : • HTML для начинающих
Школа онлайн-образования: loftschool.com/
Telegram: telegram.me/loftblog
Slack: slack.loftblog.ru/
Сайт: loftblog.ru/
Instagram: / loftblog
Группа вконтакте: loftblog
Facebook: / loftblog
Twitter: / loft_blog
Больше уроков от lofblog: #loftblog
Все уроки по хештегу: #loftblogCSS
Полезные уроки для веб-программиста: #вебпрограммист
#CSS
Поставь лайк - смотивируй автора писать еще :)

Опубликовано:

 

20 авг 2014

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 138   
@avent1586
@avent1586 4 года назад
loftblog привет! Даже в 2020 году это очень даже не плохие уроки, спасибо за ваш труд!
@iddev6680
@iddev6680 3 года назад
2020 👍
@user-eu4zu7wf5i
@user-eu4zu7wf5i 3 года назад
2021 =)
@BlackCat-yz3oc
@BlackCat-yz3oc 2 года назад
2022 тоже👍
@miss_excl
@miss_excl Год назад
Ну что ж )) 28 декабря 2022 , скоро 2023 и уроки просто МЕГА МЕГА )))))
@YanaLiechtenstein
@YanaLiechtenstein Год назад
2023 год, 29 мая))
@user-tz7st5gv2u
@user-tz7st5gv2u 7 лет назад
Не понимаю почему такие плохие отзывы. Ведь рассказано все очень понятно и самое главное доходчиво. Спасибо большое за Ваши уроки.
@user-km8xr6zt7f
@user-km8xr6zt7f 3 года назад
Розпочав навчання з loftblog, пройшов курс HTML, все вийшло і дуже зрозуміло. Зараз проходжу CSS, також крута подача інфи і все виходить, головне одразу дублювати у себе на ПК все що тобі диктує лектор. Дякую за доступну та цікаву інформацію!
@purhappiness1083
@purhappiness1083 6 лет назад
Ребят, вы лучшие, есть люди которые обучают то же самое только за бабки, именно за ваш бесплатный подход, вы лучшие ! Бесценный опыт.
@Propytun
@Propytun 7 лет назад
всё, конечно, круто, но почему периодически пропадает картинка на короткий промежуток времени и реже обрывается звук?
@stan_fise2519
@stan_fise2519 7 лет назад
Propytun у меня точно также))
@yuriypetrichenko3815
@yuriypetrichenko3815 7 лет назад
я не один такой)
@keep_down241
@keep_down241 4 года назад
потому что автор несёт полную дичь в это время и на монтаже решил не позориться
@malygos1898
@malygos1898 6 лет назад
Автор хорошо излагает материал. Речь слаженная, без заиканий и подвесаний, это хорошо отражается на восприятии урока.
@gerd5262
@gerd5262 Год назад
уроки замечательные! Для новичков подача информации отличная: плавно и структурированное вводите в курс дела. Спасибо большое вам за труд!
@ilyaefimov99
@ilyaefimov99 7 лет назад
Спасибо за этот урок все ясно и понятно!
@sergeytukhtarov1175
@sergeytukhtarov1175 9 лет назад
Спасибо за видео. Хотелось бы увидеть видео о создании Landing Page
@user-jt7bx8dh3n
@user-jt7bx8dh3n 4 года назад
Спасибо, все объясняется доступно и понятно. Лайк 👍
@GravelTravel
@GravelTravel 3 года назад
Отличный урок! Спасибо!
@alexandrmudry6321
@alexandrmudry6321 8 лет назад
Не парься) Говори все варианты) В официальной спецификации мы сами разберемся...
@Clindatu
@Clindatu 5 лет назад
Спасибо за уроки!
@_Fantom_.
@_Fantom_. 5 лет назад
Норм урок, погнали дальше..
@billimilllgan1766
@billimilllgan1766 4 года назад
У меня вопрос. Зачем создавать тег c атрибутом "class="container"", если точно такой же атрибут можно применить к тегу ?
@tymoorchik5498
@tymoorchik5498 3 года назад
Потому что, если мы воспользуемся селекторами, то это будет работать на весь сайт, а не на отдельный блок
@dan_worldwander
@dan_worldwander 3 года назад
В мы вписываем все значения, которые нам необходимы для сайта, соответственно если прописать в , то значения применятся ко всему, что находится в этом теге. А вот нужен для того, чтобы сгруппировать какие-то значения внутри тега и работать с ними.
@user-wo2np9de1i
@user-wo2np9de1i 7 лет назад
Спасибо, супер уроки!
@loftblog
@loftblog 7 лет назад
Спасибо, что смотрите нас)
@iAMishin
@iAMishin Год назад
Отличные уроки
@ant3413
@ant3413 4 года назад
Привет,подскажи пожалуйста в браузере когда уменьшаю страницу при помощи CTR все элементы смещаются влево,а мне хотелось чтобы в середине смещалось.Спасибо)
@mukhutdinovolegful
@mukhutdinovolegful 5 лет назад
Вах как понятно👍
@naf1388
@naf1388 8 лет назад
спасибо очень нормальные объяснения мне нравиться
@Agent-D
@Agent-D 4 года назад
Вот спасибо большое !!!
@jubastudio301
@jubastudio301 6 лет назад
Извините а какой у вас MacBook или у вас Imac?! Просто я задумываюсь о покупке MacBook
@geazy2738
@geazy2738 6 лет назад
СПАСИБО)
@slar844
@slar844 4 года назад
А как найти сайт(который сделал), если работаешь на сайте?
@lawdriver88
@lawdriver88 Год назад
Спасибо
@savin1977
@savin1977 8 лет назад
спасибо
@vasyltrofumchuk8931
@vasyltrofumchuk8931 5 лет назад
какая функция нижней черточки между слов?
@jubastudio301
@jubastudio301 6 лет назад
подскажите пожалуйста,как сделать текст на картинке?!
@singlebw4065
@singlebw4065 4 года назад
1й div контейнер разве не тег main должен быть?
@vitaliikononenko
@vitaliikononenko 9 лет назад
Люди добрые , дайте совет начинающему верстальщику. Скажите, какую использовать css сетку - grid 360 или брать с Bootstrapa, либо есть ещё какая-то??
@danilbalaxnin2657
@danilbalaxnin2657 7 лет назад
Видео очень классное. Но у меня такая проблема: на видео показывает одни отступы, а у меня совсем другие. Почему?
@user-lx9vb8po8s
@user-lx9vb8po8s 4 года назад
*{padding:0;margin:0;} //убирает отступы которые задаёт сайт
@danilbalaxnin2657
@danilbalaxnin2657 7 лет назад
На видео там по 53 px со всех сторон, а у меня по 96 500. Почему так??
@iva5996
@iva5996 7 лет назад
что значит ? и у меня ошибки выдает брекетс когда несколько дивов( центрирование не получилось(
@user-pt8mb5wh3u
@user-pt8mb5wh3u 7 лет назад
советую вернутся к html курсу ...
@user-fd5ri6qm5h
@user-fd5ri6qm5h 4 года назад
Lang это атрибут который указывает на каком языке написан страница. Если значение en страница на английском.....
@andreiegorov556
@andreiegorov556 4 года назад
Почему нельзя просто указать center без указания отступов и главное размерос блока? Выравнивание ведь и так и так по центру будет.
@user-vm8hv8th7p
@user-vm8hv8th7p 9 лет назад
Ребят помогите, как сделать чтобы при наводке курсора на ссылку, её задний фон изменялся и буквы поменяли цвет? Заранее спасибо.
@user-eg2nv8so8g
@user-eg2nv8so8g 9 лет назад
Вадим Белый Дай ссылке класс, к примеру: a class="silka". Тогда в CSS: .silka:hover { background: #999; color: #eee; }
@guardmedivh1
@guardmedivh1 8 лет назад
Какая горячая клавиша используется для "закомментирования"?
@loftblog
@loftblog 8 лет назад
+guardmedivh1 комбинация "Ctrl" + "/"
@guardmedivh1
@guardmedivh1 8 лет назад
loftblog у меня не работает
@raufhashimov241
@raufhashimov241 8 лет назад
+guardmedivh1 у меня получилось :)
@sergeydanko1999
@sergeydanko1999 7 лет назад
если brackets то Ctrl+/
@yury6188
@yury6188 8 лет назад
приввет, делал все как выше но текст и картинка не маштабируеться может ли это быть изза того что у тебя sublime 2 a у меня sublime 3?
@yuika49
@yuika49 8 лет назад
+Yury Hrytskevich У него 3 вроде-бы
@yury6188
@yury6188 8 лет назад
+ЌǿŦяῥå я по другим путям привязаовал css так работает а так как у него нет думаю у него плагены там разные установле на автомате типо все
@yuika49
@yuika49 8 лет назад
Своими Руками Минимализм Ну профи, что сказать)
@olyakovalchuk769
@olyakovalchuk769 8 лет назад
Если у тебя текст и картинка входит в класс main.content, то поменяй точку на нижнее подчеркивание (main_content)
@Molon__Lave
@Molon__Lave 2 года назад
Странно,почему у меня не работaет margin: 0 auto; Просто не выравнивает
@muzaffaryunusov7032
@muzaffaryunusov7032 6 лет назад
Ну а если серьёзно, то урок крутой
@dinos9716
@dinos9716 5 лет назад
фух, он не отсавил header div (`ом) .. лайк за это .. ибо не фиг везде пихать ваши дивы если есть симатические теги
@antilopa_na_gny4370
@antilopa_na_gny4370 8 лет назад
Не подключаеться .css, пишу все правильно, но почему-то ничего не пашет...
@loftblog
@loftblog 8 лет назад
возможно не правильно указан путь к файлу
@antilopa_na_gny4370
@antilopa_na_gny4370 8 лет назад
Спасибо большое! Уже разобралась
@alenushkaskaska
@alenushkaskaska 2 года назад
а что за программа?)
@muzaffaryunusov7032
@muzaffaryunusov7032 6 лет назад
13:41. Ииии))
@yuika49
@yuika49 8 лет назад
Не подключаеться .css, пишу все правильно, но почему-то ничего не пашет... В одной папке с html
@TheCatalyx
@TheCatalyx 8 лет назад
+ЌǿŦяῥå попробуй полный путь в href поставить, с указанием диска и сётакое.
@yuika49
@yuika49 8 лет назад
Василий Лахов Да пытался уже... С одним другим файлом как-то я там сделал что он подключился, но забыл
@olyakovalchuk769
@olyakovalchuk769 8 лет назад
Смотри, в папке html создаешь папку css и в этой папке создаешь файл style.css. Файл должен подключиться
@antilopa_na_gny4370
@antilopa_na_gny4370 8 лет назад
Такая же проблема, все делаю правильно и тоже не работает
@user-sl5pl6jt8g
@user-sl5pl6jt8g 7 лет назад
в папке с индексом создаете папку css, в ней же style.css то путь в href прописываете такой: "css/style.css"
@maxpower5426
@maxpower5426 8 лет назад
А картинки не через css принято подключать?
@stan_fise2519
@stan_fise2519 7 лет назад
Max Power да, можно и html
@mazka911
@mazka911 5 лет назад
Ребят всё круто, учу код по вашим урокам, спасибо, но хотелось бы попросить чтобы вы сразу объясняли как правильно делать, обходя моменты как НЕ правильно, как НЕ правильно мы итак тысячу раз сделаем во время учебы, может есть смысл сразу верный вариант показывать? В противном случае впитываю в себя всю инфу и потом в голове каша как правильно и как нет.
@nellivello2745
@nellivello2745 2 года назад
Как не правильно тоже надо знать, столкнешься в работе с этим артефактом и будешь потом "а нам это не рассказывали, а я этого не знаю му-му.."
@user-fn6ly9gm9c
@user-fn6ly9gm9c 6 лет назад
люблю улыбающихся собак
@nicolesavich775
@nicolesavich775 2 года назад
Шел 2022 год...
@user-zq8vs9rf5p
@user-zq8vs9rf5p 7 лет назад
Почему у меня не откривается картинка?
@user-cv3wf8zh5c
@user-cv3wf8zh5c 6 лет назад
та же самая проблема,если кто знает в чем может состоять проблема помогите разобратся.
@muzaffaryunusov7032
@muzaffaryunusov7032 6 лет назад
посмотрите уроки по HTML
@avent1586
@avent1586 4 года назад
@@muzaffaryunusov7032 ахахахах)
@chucknorris9067
@chucknorris9067 8 лет назад
как он это делает? пишет начало кода а потом бац весь код выходит?
@chucknorris9067
@chucknorris9067 8 лет назад
+Chuck Norris я работаю на Notepad ++
@user-ir1pn6yq5f
@user-ir1pn6yq5f 8 лет назад
+Chuck Norris Он работает в оболочке Sublime Text, там есть такая возможность.
@alexflash6029
@alexflash6029 8 лет назад
+Вадим Павловський Есть
@alpha-dzhem
@alpha-dzhem 8 лет назад
+Chuck Norris для многих текстовых редакторов (в том числе и для Notepad ++) существует набор плагинов под названием Emmet. Именно он позволяет делать такие штуки. emmet.io/
@chucknorris9067
@chucknorris9067 8 лет назад
Дмитрий Жемчужнов благодарю
@user-jp1ug8ut9b
@user-jp1ug8ut9b 5 лет назад
Всё ясно, только где взять текст, мне 12.
@romashevskiyoleg4407
@romashevskiyoleg4407 5 лет назад
скачай прогу brackets или sublime text 3,установи разширение emmet,дальше напиши lorem и нажми tab
@annaborovaya9599
@annaborovaya9599 7 лет назад
помогите пожалуйста, уже который день бьюсь над этой проблемой : не выравниваются отступы в margin, с правой и левой стороны разные, вроде делаю все как в уроке, буду очень Всем благодарна) код HTML !DOCTYPE html> Путешествуй без границ! "Путешествуй без границ!" это сайт для тех кто никогда не путешествовал но очень хочет это сде код CSS .container {width:1140px; margin:0 auto; } header{ text-align:center; color:red; font-size:16px; } .main_content { width=720px; margin:0 auto; }
@parovoz5990
@parovoz5990 7 лет назад
Anna Borovaya щ
@TV-lr2yh
@TV-lr2yh 6 лет назад
в head добавь
@winstonggsmdy2589
@winstonggsmdy2589 5 лет назад
ты не добавила type ()
@xxxx-el2rb
@xxxx-el2rb 4 года назад
та же проблема ничего не помогает
@user-oj2bw8id9f
@user-oj2bw8id9f 3 года назад
у меня одного экран тухнет?
@lookforward187
@lookforward187 Год назад
не выравнивается посередине ((
@GOrshkOFFCHE
@GOrshkOFFCHE 9 лет назад
И где здесь css3? То, что здесь рассказано относится к любому CSS{1,2,3}
@user-ig3ig3zx7l
@user-ig3ig3zx7l 9 лет назад
ХЗ
@user-ig3ig3zx7l
@user-ig3ig3zx7l 9 лет назад
А нет?
@spodobalos
@spodobalos 8 лет назад
+Юрий Горшков Основы CSS - #3 - Box model, margin урок №3
@user-ds8jx8me7x
@user-ds8jx8me7x 6 лет назад
Уроки хорошие. За это спасибо! Но бл, как бесит писать за тобой, а потом всё стирать, потому что ты понял, что так лучше не делать. >
@pplppc3377
@pplppc3377 6 лет назад
Посмотрел первые 2 урока по css и что то не понял фишки. Зачем делать подобные вещи в css когда можно их сделать в html? По затраченному времени будет одно и тоже.
@purhappiness1083
@purhappiness1083 6 лет назад
ppl ppc на html во первых так давно уже не делают во вторых на html нельзя сделать всего что может сисс в третьих сейчас везде в ит сфере веб проги требуют знаний сисс
@_spektr
@_spektr 3 года назад
Спасибо. Хорошо объясняешь. Мне 11 ахах)
@Mepkur1u
@Mepkur1u 3 года назад
ахахха,советую в 11 наслаждаться детством а не заниматься программированием,все равно деньги сейчас ты не заработаешь,а со временем возможно и наскучит тебе тема и ты забьешь
@_spektr
@_spektr 3 года назад
@@Mepkur1u хз, я значительно продвинулся, дошёл до node js.
@Mepkur1u
@Mepkur1u 3 года назад
@@_spektr детство у тебя проходит,вот,что я имею ввиду
@_spektr
@_spektr 3 года назад
@@Mepkur1u а что в нем такого, наоборот ничего, деньги не заработать, сидишь и учишь уроки, которые потом нигде не пригодятся..
@Mepkur1u
@Mepkur1u 3 года назад
@@_spektr ахахах,почему вы все так считаете? Это базовые знания,которые должен знать любой,ты не изучаешь каждый предмет углубленно,и скорее всего у тебя еще все впереди,где ты можешь передумать,да эти знания не лишние,но лучше сейчас учится на отлично и потом выпуститься из школы и зарабатывать приличные суммы
@roycebracket714
@roycebracket714 8 лет назад
и...
@nelkor3427
@nelkor3427 7 лет назад
и........
@InSpector6666
@InSpector6666 5 лет назад
и...................
@user-it6uu9gn8j
@user-it6uu9gn8j 5 лет назад
И................
@eyfik736
@eyfik736 4 года назад
И.........................
@senpaihayala7491
@senpaihayala7491 4 года назад
И..........................................................
@fyfinity
@fyfinity 4 года назад
Ochen klassniy urok no kak vkluchit russkuyu klavu
@maxqual4578
@maxqual4578 6 лет назад
иииииии
@geousgame9394
@geousgame9394 6 лет назад
иии....)
@user-kp6dn5qt4l
@user-kp6dn5qt4l 7 лет назад
Действительно, боюсь встретить такого верстальщика обученного по вашим видео, копать надо глубже
@miss_excl
@miss_excl Год назад
Так в том то и дело, что это сейчас знакомство. Копать глубже надо ПОЗЖЕ, а не сразу.
@user-vh8tg4cr2f
@user-vh8tg4cr2f 3 года назад
Как все скучно объясняется (
@nellivello2745
@nellivello2745 2 года назад
Да не, вроде норм.
@mma_hack
@mma_hack 6 лет назад
Люблю улыбающихся собак Ты чё, Панин, что ли?
@STan1Z
@STan1Z 8 лет назад
нафига чет делать а потом говорить ЧТО ЭТО ТИПА НЕ ПРАВИЛЬНО..... делай правильно
@mojoooCo
@mojoooCo 7 лет назад
потому что ты должен знать синтаксис и все возможности css
@nellivello2745
@nellivello2745 2 года назад
Потому что есть прогеры которые делают не правильно или код устаревший и тебе потом это искать и исправлять.
@88salamon
@88salamon 7 лет назад
и чем вы учите людей ? если вы не можете рассказать про margin .где объяснение как работают отступы по вертикале ? как работает margin с плавающими элементами ? в топку твое видео !!! по 5ите бальной систем я ставлю вам 1 коллега . ты сам понимаешь как работает блочная система?
@justspartak
@justspartak 7 лет назад
Терпения, мой друг, вы всё сразу хотите знать, а так не бывает.
@miss_excl
@miss_excl Год назад
Во-первых, это сейчас пока только ознакомление со всем. Фишка автора, что видео короткие и за такое количество времени рассказать всё и сразу было бы совсем не очень для восприятия. Благодаря автору полюбила html & css и многое стало получаться, и уже даже грущу, потому что дальше вот не знаю углубленно где найти такие видео короткие и понятные. Практика, практика и ещё раз практика.
@miss_excl
@miss_excl Год назад
+ если у других всё плохо, может сами запишете полезное видео ? Мы послушаем как раз.
@88salamon
@88salamon Год назад
@@miss_excl может когда нибудь, запишу. Могу объяснить за деньги 500руб /час
Далее
ГЕНИИ МАРКЕТИНГА 😂
00:35
Просмотров 1,7 млн
skibidi toilet 74
07:02
Просмотров 18 млн
can you repeat it? #tatyanadiablo ##shorts
00:11
Просмотров 1 млн
CSS Grid - Полное руководство
38:21
Просмотров 343 тыс.
ГЕНИИ МАРКЕТИНГА 😂
00:35
Просмотров 1,7 млн