CSS свойствах необходимые начинающему / CSS уроки

  Переглядів 87,871

Просто: разработка

Просто: разработка

День тому

CSS свойствах необходимые начинающему / CSS уроки
В этом выпуске: CSS свойства. Что, для чего и как применяется, свойства, которые стоит запомнить в первую очередь, и всё это с примерами!
В прошлом видео мы говорили о том, что нужно знать о html тегах начинающему верстальщику. А в этом видео мы рассмотрим основные css свойства, кастомные css свойства и посмотрим в целом на список свойств css. Помимо этого, рассмотрим порядок свойств в css, это понадобится нам для того, чтобы создать стиль css. Не забывай, что мы пишем сайт с нуля html css, поэтому и проходим уроки по css с нуля. Если тебя интересует веб разработка с чего начать и верстка css для начинающих, то этот контент, именно то, что тебе нужно. На канале мы проходим уроки по верстке сайтов для начинающих, изучаем в css начало работы и разбираем наглядно css свойства примеры. Обращаю твое внимание на то, что команды css стилей разбиты на разные категории. Кроме того, в видео мы разберем в css самые используемые свойства и не обойдем стороной свойство flex в css. Поговорим о том, что такое наследуемые свойства css и как вообще происходит в css наследование свойства. Оставляйте ваши вопросы в комментариях и подписывайтесь на канал, приятного просмотра!
=======================================
Файл со CSS свойствами из видео:
bit.ly/2P4oQA0
=======================================
Полезные ссылки:
bit.ly/2o8yRkE - проверка кроссбраузерности свойства
bit.ly/35TTphV - статья про Flexbox
bit.ly/2VYYy3y - статья про CSS Grid
=======================================
Содержание:
00:00 Вступление
02:01 Background
05:48 Border
10:13 Color (color, opacity)
11:09 Dimension (height, width)
13:21 Generated content (content, counter-increment)
15:17 Font
17:08 List (list-style)
17:44 Margin + Padding
22:17 Outline
22:45 Print
23:24 Table (border-collapse, border-spacing)
24:58 Text (text-align, text-decoration, text-shadow, line-height, vertical-align, letter-spacing, word-spacing)
31:38 Transform
33:11 Transitions
35:01 Visual formatting (display, position, float, visibility, box-shadow, box-sizing)

КОМЕНТАРІ: 193
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/
@dmitriyart2989
@dmitriyart2989 4 роки тому
просмотрел кучу видео о верстке но такую подробную разборку как здесь не встречал. спасибо тебе хороший человек.
@RedMundGames
@RedMundGames 4 роки тому
Вы просто лучший! Спасибо вам огромное, без воды и по делу
@user-ey6is6my8r
@user-ey6is6my8r 5 років тому
Начал смотреть с мыслью "Ха, да я тут всё знаю, ну, повторю". А вот и не всё. Спасибо за видео.
@vitaliybogomazyuk2419
@vitaliybogomazyuk2419 4 роки тому
Хороший контент. Прийшов з інтерв'ю IT boroda
@viktorprytuliuk6177
@viktorprytuliuk6177 4 роки тому
Виталик, как сказала бы какая-нибудь баба Маша: "дай тебе бог здоровья, сынок")))
@justspartak
@justspartak 4 роки тому
Аминь!
@artemhiphop8850
@artemhiphop8850 4 роки тому
Сверстал уже несколько макетов и наткнулся на этот канал . Очень в тему ) даёт понимание что делаеть)
@dustfellsans9705
@dustfellsans9705 2 роки тому
Спасибо большое! Этот канал без преувеличений можно назвать лучшем по вёрстке на всём русском ютубе!
@dimr5001
@dimr5001 2 роки тому
Лучше что я видел по обучению верстки на youtube.
@justspartak
@justspartak 4 роки тому
Спасибо! И отдельное спасибо за файлик в экселе, хорошая шпаргалка!
@Elodia614
@Elodia614 2 роки тому
Все видео просто супер! Никакой воды, все четко и понятно! Очень рада, что нашла канал посмотрев выпуск "Бороды". Продолжай в том же духе и огромнейшее спасибо за труд и старания!
@user-jn4bb2oo5t
@user-jn4bb2oo5t Рік тому
Лучшее видео, автор космос. 👍👍👍
@user-lm6ls7nz2z
@user-lm6ls7nz2z 4 роки тому
Вижу видео на канале автоматически рука тянется к лайку . Спасибо Вам добрый человек 👍💪✌️
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
И к комментарию. Одобряю -)
@igorbondarenko1990
@igorbondarenko1990 4 роки тому
Это просто шикарно! И структурировано отлично, и информация только полезная (воды нет). В ожидании новых обучающих (и не только) видосов!
@evilishant9336
@evilishant9336 4 роки тому
Продолжайте, пожалуйста)
@_GreenSnake_
@_GreenSnake_ 11 місяців тому
Спасибо за Ваш труд
@ladogviniashvili1206
@ladogviniashvili1206 2 роки тому
Вы что гений , чтобы мне с первого раза это все объяснить? Топ контент!
@AleksandrGolrichtGlrcht
@AleksandrGolrichtGlrcht 8 місяців тому
Супер, спасибо. Продвижения каналу!
@vlaga6334
@vlaga6334 4 роки тому
Пожалуй, лучший туториал по css. Спасибо большое!
@pipikanos
@pipikanos 3 роки тому
Спасибо тебе добрый человек, за твой труд!!
@GrUncleFedor
@GrUncleFedor 4 роки тому
Очень круто, лучшая пояснялка по свойствам! Спасибо за труд
@user-nw4tb4ld6u
@user-nw4tb4ld6u 3 роки тому
Очень харизматичный дядька , вот бы больше уроков
@alexisone7.599
@alexisone7.599 4 роки тому
Тайминг: 02:01 - Background 05:48 - Border 10:13 - Color (color, opacity) 11:09 - Dimension (height, width) 13:21 - Generated content (content, counter-increment) 15:17 - Font 17:08 - List (list-style) 17:44 - Margin + Padding 22:17 - Outline 22:45 - Print 23:24 - Table (border-collapse, border-spacing) 24:58 - Text (text-align, text-decoration, text-shadow, line-height, vertical-align, letter-spacing, word-spacing) 31:38 - Transform 33:11 - Transitions 35:01 - Visual formatting (display, position, float, visibility, box-shadow, box-sizing)
@stas9066
@stas9066 4 роки тому
Спасибо тебе добрый человек )
@user-hh7cy8tr6h
@user-hh7cy8tr6h 4 роки тому
Только хотел написать тайминги чтобы возвращаться если что то забуду, а тут уже всё за меня сделали)
@user-sv5fz2bv7z
@user-sv5fz2bv7z 2 роки тому
Про visibility не нашла ничегоиои пропустила, а так отлично для закрепления , спасибо 🙏
@Sync271
@Sync271 4 роки тому
Великолепная подача материала! Спасибо огромное!
@TheTexPro
@TheTexPro 4 роки тому
Спасибо за информативные видео! Успехов в делах!
@senriamiezaru5563
@senriamiezaru5563 4 роки тому
Благодарю Виталий, для повторения и корректировки своих знаний то что надо!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо
@b4bb4b97
@b4bb4b97 2 роки тому
Спасибо огромное - супер подача информации!!! Все четко, понятно и главное интересно!!!
@vivikor4389
@vivikor4389 2 роки тому
Прям то что нужно! Понятно всё и самые важные свойства👏🙏👍
@user-qw9uo4wo5p
@user-qw9uo4wo5p 2 роки тому
Благодарю!!!
@stole-name
@stole-name 4 роки тому
Отныне я опустошил свою чашу для наполнения информации из твоих видео! Браво!
@nik628
@nik628 4 роки тому
Да почему я не нашел Вас раньше? :( Идеальная подача информации! Спасибо!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Благодарю
@user-we9sb4kx5u
@user-we9sb4kx5u 4 роки тому
Спасибо большое.
@NarkotikAsd
@NarkotikAsd 3 роки тому
Крутая подача материала. Лайк . Подписка. Спасибо за труд.!!!!!!!!!!!!!!!!
@crazyadams5775
@crazyadams5775 3 роки тому
Спасибо огромное
@nikolay1875
@nikolay1875 3 роки тому
Почему таких каналов нет в трендах? :D Годная информация, спасибо)
@kirillguryanov4925
@kirillguryanov4925 Рік тому
Cпасибо!
@user-pd4gt9zz9c
@user-pd4gt9zz9c 4 роки тому
спасибо тебе добрый человек..
@placid3495
@placid3495 4 роки тому
Полезнейшая инфа! Четко, кратко, доступно - однозначно лайк)
@QwiniTRON
@QwiniTRON 5 років тому
Огромное спасибо ! Очень полезное видео !
@rus-to1ht
@rus-to1ht 3 роки тому
Очень доходчиво объяснили position: relative&absolute. Большое спасибо!
@alexlll85
@alexlll85 4 роки тому
Спасибо Вам большое за столь понятное и полезное видео для начинающих!!!
@Alex-nu5pw
@Alex-nu5pw 4 роки тому
Cупер!!! Молодчина! Очень подробно и классно обьяснил!!!!
@user-gl1jm2ds5h
@user-gl1jm2ds5h 4 роки тому
Спасибо за труд! Для начинающих лучше не нашёл!
@car_sketch_and_render
@car_sketch_and_render 4 роки тому
Спасибо! Очень удобно! Таймер даже есть! Спасибо!
@deniskyoto4515
@deniskyoto4515 4 роки тому
Большое спасибо
@Murakasi
@Murakasi 3 роки тому
Огромное вам СПАСИБО, так четко расказать, просто супер! Лайк и подписка сразуже!
@kirillriman3611
@kirillriman3611 4 роки тому
Спасибо!
@antonsotnikov4825
@antonsotnikov4825 3 роки тому
Отличный гайд! Лично я заполнил многие пробелы в понимании материала:) Спасибо!
@PsionicD
@PsionicD 4 роки тому
Очень круто. Четко, оперативно. Структурированно. Спасибо большое! 😁 Хочу себе такую же таблицу с пояснениями)
@user-jb3cd5uk2j
@user-jb3cd5uk2j 4 роки тому
Сердечная благодарность. like и подписка
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо -)
@egoregoroff104
@egoregoroff104 4 роки тому
большое спасибо!
@yt9nine243
@yt9nine243 2 роки тому
спасибо!Помогли
@ruslanalimov2856
@ruslanalimov2856 3 роки тому
Отличное видео! Наглядно показано как работать со стилями. Пошел смотреть видео про flex-box
@user-qj5kf4vs9h
@user-qj5kf4vs9h 3 роки тому
Спасибо за видео и за прикреплённый файл)))
@luigichanel89
@luigichanel89 4 роки тому
Спасибо за файл со свойствами!!!
@Roma-ey4yz
@Roma-ey4yz 5 років тому
Спасибо) как по мне - отличное видео, для начинающего
@romanov709
@romanov709 3 роки тому
Очень полезный урок сразу по всем основным тегам. У других на каналах такого не видел, хотя искал именно такое. Спасибо.)
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо
@Alex-nu5pw
@Alex-nu5pw 4 роки тому
Молодчина!!!!!!!!!!!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо
@darkside1429
@darkside1429 4 роки тому
Продолжай пилить видосы очень классно получается!!!
@abaymakhanbetov3787
@abaymakhanbetov3787 4 роки тому
Молодец! все непонятное понял и записал. Лайк!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Благодарю
@wrenchsports1193
@wrenchsports1193 3 роки тому
Спасибо Хитман
@elifas2012
@elifas2012 4 роки тому
Достаточно информативно, лайк.
@samurai-ld7zy
@samurai-ld7zy 3 роки тому
Спасибо я все нашел!!!
@hologramprint6292
@hologramprint6292 4 роки тому
чувачек, ты лучший, среди всех. Спасибо за разъяснения!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Благодарю -)
@darkCoderDev
@darkCoderDev 3 роки тому
Спасибо Профессор)))
@bulatm9699
@bulatm9699 4 роки тому
Хороший контент смотрю на 2 ускорений все равно понятно
@webdevelopment5337
@webdevelopment5337 4 роки тому
Очень крутой контент, спасибо)
@duos198
@duos198 4 роки тому
Уже имею приличный опыт и достаточно проектов за спиной, но решил глянуть на досуге стили, так как все их не запомнить, а когда ты просто просматриваешь что-то и вспоминается. Интересно объясняешь, для новичков прям самое то.
@rustem7756
@rustem7756 4 роки тому
Лучший
@Sergei-wv9it
@Sergei-wv9it 3 роки тому
просто нереальный топ, загорелся) надеюсь, будет много еще видосов!
@GamesServices
@GamesServices 3 роки тому
Thanks
@olesiaay6804
@olesiaay6804 4 роки тому
Спасибо, очень помогло👍
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо
@user-ps6hx3id5i
@user-ps6hx3id5i 4 роки тому
это лучшее что я видел по CSS
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Благодарю
@magerrrr
@magerrrr 4 роки тому
Спасибо огромное! Готовлюсь к собеседованию по Вашим видео!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Круто, надеюсь собеседования удались -)
@magerrrr
@magerrrr 3 роки тому
Даааа, с первого собеседования устроился 😋
@gyros9162
@gyros9162 4 роки тому
Реально работает!
@hoonigan9118
@hoonigan9118 3 роки тому
Очень полезное видео! Как я понял, автора не стоит смотреть тем, кто только 5 минут назад узнал что такое css. Смотрел пару ваших роликов неделю назад, плюнул и выключил. Сейчас смотрю про флексбоксы и многое для себя отмечаю) Спасибо)
@kobetsmatviy
@kobetsmatviy 3 роки тому
*Вотс ап! Сделай пожалуйста видео о том как сделать нестандартный курсор при наведении. Дяка!*
@ilyakrakovskii286
@ilyakrakovskii286 4 роки тому
Вы безумец. За час обычно люди рассказывают 30 минус историю цсс, а потом 30 минут как вставлять и куда картинки. А тут с такими знаниями уже можно начинать копить на штаны за 40 гривень. Спасибо огромное
@stas9066
@stas9066 4 роки тому
Илья, сильно замочила за штаны по 40 гривень)))
@nikolakoval7294
@nikolakoval7294 3 роки тому
@@stas9066 это он еще перестраховывается. уверен, станут доступны штаны за 50 грн.)
@BS-zu1de
@BS-zu1de 3 роки тому
@@nikolakoval7294 ну вы не загинайте)
@NP-wc7ze
@NP-wc7ze 2 роки тому
Я еще курточку в секонде прикупил за 5 евро
@viktor_kobozya
@viktor_kobozya Рік тому
Это из видоса, где чел пролил подсолнечное масло на джинсы.🤣🤣🤣
@vd7533
@vd7533 4 роки тому
Агонь ,спасибо!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Пажар! Не за что -)
@samurai-ld7zy
@samurai-ld7zy 3 роки тому
Здравствуйте, в видео все очень ясно объяснен, СПАСИБО!!! Сделайте еще один такое же видео, но про animation-ы и все align свойств, пожалуйста!!!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Анимация видео есть на канале. Про align не понял. В контексте текста, флекса или грида?
@samurai-ld7zy
@samurai-ld7zy 3 роки тому
@@prosto_razrabotka я имел в виду про align тоже сделать видео align-content align-ite........ и т.д.
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
@@samurai-ld7zy есть целые плейлисты по гриду и флексу, где это все разъяснено. Наслаждайтесь.
@samurai-ld7zy
@samurai-ld7zy 3 роки тому
​@@prosto_razrabotka Спасибо я нашла!!!​
@samurai-ld7zy
@samurai-ld7zy 3 роки тому
@@prosto_razrabotka Спасибо я все нашел
@user-tb3mm6dl3z
@user-tb3mm6dl3z 2 роки тому
Красава 😎
@artsiomklimovich2636
@artsiomklimovich2636 4 роки тому
Очень полезная таблица в экселе, делал-когда то себе такую, давным давно утеряна. Но первые месяца 4 без нее не мог работать)
@darwindominic3518
@darwindominic3518 4 роки тому
Наконецто нормальное обьяснение...Спасибо !
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Подписаться только не забудь тогда -)
@WarriorExiles
@WarriorExiles 2 роки тому
Автор обошёл сложные вещи, например, трансформация в css, лишь показав самое легкое: ниже уровня джуна. А хотелось бы узнать побольше: про 2D и 3D трансформацию. Пропущены практически все функции 2D трансформации. Ну и для эффекта: Вау, нужно было показать как сделать простую ленточку по-верх какого нибудь div с картинкой, что ли.
@alexs8579
@alexs8579 4 роки тому
спасибо
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Не за что)
@ekaterina2073
@ekaterina2073 2 роки тому
Спасибо за урок, очень классный у Вас канал. А можете, пожалуйста пояснить про x 1.5 в line-height? это размер в 1.5 раза больше? Спасибо!
@user-is6hn3hh4p
@user-is6hn3hh4p 3 роки тому
Очень хорошая таблица вначале,может дадите на нее ссылку?
@DmitriiiBaev..
@DmitriiiBaev.. 4 роки тому
Здравствуйте вопрос, какой язык вы здесь используете, спасибо.
@ShortsPageTech
@ShortsPageTech 3 роки тому
*+1 Хотим javascript тоже*
@user-om3mf9yv4y
@user-om3mf9yv4y 3 роки тому
Спасибо, удачки;) p.s Пошёл дальше смотреть
@user-gy5kw5bf4q
@user-gy5kw5bf4q 4 роки тому
Отличное видео!С меня лайк и подписка!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо -)
@user-ht1bv5xq9j
@user-ht1bv5xq9j 4 роки тому
0 дизлайков, думаю полностью заслуженно, не зря перешёл по рекламе у хауди хо
@user-wx3tr3bx2e
@user-wx3tr3bx2e 3 роки тому
Тоже оттуда)
@ErisBlood
@ErisBlood 3 роки тому
@@user-wx3tr3bx2e шел 2020-ый, у видео 18 дизлайков от каких-то безумцев
@self-toughstudy6635
@self-toughstudy6635 3 роки тому
хауди наконец-то принес пользу
@dustfellsans9705
@dustfellsans9705 2 роки тому
Не зря Хауди прорекламировал.
@WarriorExiles
@WarriorExiles 2 роки тому
Если что, то дизлайки, с 01.07.21г., видит только автор. Это так…пища к размышлению
@nijatmehtiyev878
@nijatmehtiyev878 3 роки тому
Привет из Баку!!!
@yuriiyablonskyi6626
@yuriiyablonskyi6626 4 роки тому
в css стоит ли использовать елементы по родству или лучче обращаться через класы например: лучче давать клас елементу p или обращаться " header div p {...}" или этим вобше не стоит заморачиваться
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Этим очень стоит заморачиваться! Смотрите видео по селекторам на канале
@korobyata
@korobyata 3 роки тому
46:44 Объясните почему родительский блок а1 подстраивается под высоту вложеннного блока а2 ?
@t0pc0der
@t0pc0der 2 роки тому
У тебя дети есть?
@user-od7ti4vm1w
@user-od7ti4vm1w 3 роки тому
За таймкод 5+!!!
@user-kz7pp7rm6m
@user-kz7pp7rm6m 3 роки тому
Топчик
@samrybkin9184
@samrybkin9184 4 роки тому
Привет у тебя очень интересные уроки, но чтобы они были еще интересней попробуй на заднем фоне включать спокойную музыку, которая не мешала бы твоей речи, пример хауди хо урок по Django у него там ссылка где он брал ее под видео, засчет музыки получается дольше удерживать внимание. Если задолбали чуваки с советами то заранее извиняюсь и проигнорируй это сообщение.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Я с августа-сентября начал использовать музыку. Это видео было сделано раньше
@samrybkin9184
@samrybkin9184 4 роки тому
@@prosto_razrabotka круто:)
@user-vr8qx9ww9n
@user-vr8qx9ww9n 4 роки тому
Запилите пожалуйста видос по теме проверка кроссбраузерности свойства. Или я там один не разобрался? :(
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
А в чём сложность? 1. Ищите свойство 2. В результатах получаете таблицу с названиями браузеров и различными версиями 3. Находите свой, смотрите на цвет ячейки 4. Смотрите, что этот цвет означает в цветовой легенде
ВСЁ, что нужно знать о CSS Селекторах. Типы селекторы css
42:23
Просто: разработка
Переглядів 55 тис.
I’m fat 🥲💔#shortvideo #lizzyisaeva
00:29
Lizzy Isaeva
Переглядів 5 млн
ОГРОМНАЯ ПАЧКА ЧИПСОВ с КЛУБНИКОЙ
00:59
Sveta Sollar
Переглядів 812 тис.
🎭🎬Акторки vs актори - єПитання-2 з Лесею Нікітюк - Випуск 2
47:49
єПитання з Лесею Нікітюк
Переглядів 374 тис.
How To Make Toggle Button Using HTML & CSS
5:27
MakeTechStuff
Переглядів 53 тис.
Свойство display (inline, block, inline-block, none)
12:15
Vitaliy html
Переглядів 4,9 тис.
[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета
1:06:37
WAYUP & Андрей Гаврилов
Переглядів 728 тис.
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 215 тис.
Верстка сайта основные ошибки начинающих
7:40
Руководство по CSS анимации. Transition / Animation / Keyframes
22:26
Быть Программистом
Переглядів 22 тис.
I’m fat 🥲💔#shortvideo #lizzyisaeva
00:29
Lizzy Isaeva
Переглядів 5 млн