Изучение CSS для новичков / Урок #7 - Стили для блоков

  Переглядів 90,003

Школа itProger / Программирование

Школа itProger / Программирование

День тому

Любой сайт состоит из блоков. Каждый блок может быть выделен тегом div или же каким-либо специальным тегом по типу: header, footer, aside, main и так далее. За урок мы научимся прописывать стили к подобным блокам.
✅ Полезные ссылки:
🔫 Курс на сайте itProger: itproger.com/course/css/7
⏰ Тайм коды:
00:00 - Начало
00:17 - Создание блока
00:42 - Добавление стилей к блоку
02:28 - Добавление обводки: «border»
06:38 - Округление углов
08:50 - Прозрачность объекта
09:41 - Внешние и внутренние отступы
15:08 - Строчный элемент в формате блока
18:35 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

КОМЕНТАРІ: 61
@user-rq4pp4ss3k
@user-rq4pp4ss3k 3 роки тому
Пожалуйста!!! Выпускай урок чаще,посмотрел все уроки хтмл подряд, а тут ждать))))))))))
@zaminr3400
@zaminr3400 3 роки тому
спасибо тебе большое я целый день мучился с отступами а тут так все просто (margin) для тебя отдельное место в раю)
@main_idler
@main_idler 3 роки тому
Посмотрел старые уроки по CSS теперь новые! Подача гораздо интересней и как то структурировано всё. Спасибо!
@diasoralbekov6465
@diasoralbekov6465 3 роки тому
Солидарен,интереснее на много
@samuelimran3429
@samuelimran3429 3 роки тому
pro tip : you can watch series on Kaldrostream. Been using them for watching lots of of movies these days.
@migelonio292
@migelonio292 2 роки тому
@@main_idler LOndon is capital of the Great Britain.....
@ksenrix
@ksenrix 9 місяців тому
Спасибо ! Выражаю свою благодарность.
@user-mq9kt7pb2l
@user-mq9kt7pb2l 3 роки тому
Все ближе к программированию
@XHuntingX
@XHuntingX 3 місяці тому
Все понятно 👍 теперь осталось запомнить ну и практики
@user-ce2vy8lh1j
@user-ce2vy8lh1j Рік тому
Круто-круто!
@fab4key
@fab4key Рік тому
лучшая серия (пока смотрю)
@piston2801
@piston2801 3 роки тому
Давай еще уроки про адаптив!!!
@user-tv4nj9vx6v
@user-tv4nj9vx6v 2 роки тому
Spasibo vam
@zxs_DEADinside
@zxs_DEADinside 6 місяців тому
спс за урок ты топ
@cypooboy
@cypooboy 2 роки тому
У тебя есть чувство юмора, в конце ты меня рассмешил с лимоном XD
@kirillpareev7334
@kirillpareev7334 2 роки тому
Подскажите, что можно сделать чтобы сама система не отображала кнопку на калькуляторе, как кнопку поиска? И возможно ли использовать тег button несколько раз но с разными характеристиками? Ширина, длина и т.п.
@LEGENDARY192
@LEGENDARY192 Рік тому
А как сделать так что бы эти лимончики были на одной строке? Что бы один был справа, а другой слева?
@user-gu4oo1ts1c
@user-gu4oo1ts1c 6 місяців тому
Спасибо большое! Очень круто и познавательно!
@rufatbilalov3268
@rufatbilalov3268 3 роки тому
А выпуклым лимончик сделать можно ?
@user-np7jz5jm9v
@user-np7jz5jm9v 2 роки тому
класс
@muratbressler6945
@muratbressler6945 Рік тому
здраствуйте , как вы так быстро удалили отступы в atom, какие клавиши использовали?
@teraranime665
@teraranime665 3 роки тому
что сделать, чтобы объект при добавлении внутренних отступов не менял свою форму ? , например у вас этот лимон растянулся
@doctor_risus3941
@doctor_risus3941 2 роки тому
*Вот бы ещё вкус лимончика изменить :3*
@TheBigChannel_
@TheBigChannel_ Рік тому
🙏🏻
@YAMIGE
@YAMIGE 2 роки тому
Я так понял логика последовательностей значения цифр: это циферблат 12,3,6,9 часов
@Pavel_Derevyanko
@Pavel_Derevyanko 3 роки тому
👍
@spectorx7256
@spectorx7256 2 роки тому
Здравствуйте, создал такой же блок, написал там объёмный текст, думал он поместиться , а он вылазит за пределы блока, то есть часть в блоке, а часть СНИЗУ, попробовал overflow: hidden - нижняя часть текста лишь убралась, попробовал word-break: break-all - не помогло, разве такие блоки не предназначены для содержания в них текстов?
@grovestreet2126
@grovestreet2126 2 місяці тому
для этого используются отдельные CSS стили
@newbrunetteforhim2418
@newbrunetteforhim2418 Рік тому
У меня при создании второго блока, исчезает первый, остается только надпись, которая была внутри него. Скажите, пожалуйста, кто-нибудь, почему?
@monstrrrlnx9639
@monstrrrlnx9639 5 місяців тому
а как текст посередине блока сделать? text-align center не работает
@The_man_from_hell22
@The_man_from_hell22 4 місяці тому
А что делает display: flex; ?
@Im_motorist
@Im_motorist 11 місяців тому
А как сделать что бы были отступы в браущере.Когда-то я убрал его,когда учил у другого ютубера,потом забросил,вообщем как устоновить отсупы по умолчанию?
@ismeazey3879
@ismeazey3879 10 місяців тому
Не знаю точно, не проверял, но может быть при удалении отступов( * { margin: 0; padding: 0; }) нужно вместо 0 указать другое значение, типо 20px.
@bleat6333
@bleat6333 Рік тому
Какая комбинация клавишь коментирует всю строчку кода? как ты делаешь это в один клик?
@evfrosa7093
@evfrosa7093 Рік тому
попробуй ctrl + /
@awgoodman
@awgoodman Рік тому
У меня вопрос, как у него получается применять стили к HTML коду, если CSS не подключен в теле head?
@ismeazey3879
@ismeazey3879 10 місяців тому
подключен, просто там скрыт код в , поэтому не видно
@mariiachyrva7588
@mariiachyrva7588 4 місяці тому
почему даже при подключенном файле css не отображаются блоки в google?
@ulyanatrehubava8025
@ulyanatrehubava8025 2 дні тому
Ребят, может кто-то знает как сделать текст внутри блока, но чтобы блок был прозрачным, а текст нет?
@xeither289
@xeither289 2 роки тому
☦❤💕💕🙏☦❤
@mixgametv2373
@mixgametv2373 2 роки тому
у меня индификатор id работает как АЙДИ как исправить?
@mard9304
@mard9304 2 роки тому
Всем пофиг чел
@Virusnik
@Virusnik Рік тому
@@mard9304 говори за себя
@SAMANUELb
@SAMANUELb 10 місяців тому
@@mard9304 чёт душно, пойду форточку открою
@AnderPython-tw3kp
@AnderPython-tw3kp Рік тому
Как у тебя работают стили, если ты их не подключаешь?)
@user-um2eu1dy8t
@user-um2eu1dy8t 10 місяців тому
Магия монтажа )
@ismeazey3879
@ismeazey3879 10 місяців тому
он подключает, просто код в теге скрыт
@mixgametv2373
@mixgametv2373 2 роки тому
у меня блок не саздактся
@ArkiShopggg
@ArkiShopggg 2 роки тому
получилось?
@xeither289
@xeither289 2 роки тому
БОГ ЕСТЬ ЛЮБИТЕ БОГА И СВОИХ БЛИЖНИХ!!!
@shiroe2359
@shiroe2359 2 роки тому
бога нет
@user-mr2pq8cf8e
@user-mr2pq8cf8e Рік тому
@@shiroe2359 тебя нет
@shiroe2359
@shiroe2359 Рік тому
@@user-mr2pq8cf8e я есть. я хожу, дышу, учусь, питаюсь, а Бог просто аымешленная фигура, с помощью которой управляют людьми
@user-mr2pq8cf8e
@user-mr2pq8cf8e Рік тому
@@shiroe2359 Аллах тебя накажет
@SAMANUELb
@SAMANUELb 10 місяців тому
@@user-mr2pq8cf8e откуда ты знаешь, что будет делать аллах? ты его заместитель или доверенное лицо?
@Termux-nazar-antihack-linux
@Termux-nazar-antihack-linux 5 місяців тому
9:11
@salehplay572
@salehplay572 3 роки тому
Первый))
@xeither289
@xeither289 2 роки тому
ИИСУС ХРИСТОС ЕСТЬ МЕССИЯ И ОН ВОСКРЕС!!!
@shiroe2359
@shiroe2359 2 роки тому
фуу гей
@Vlad-sw4zd
@Vlad-sw4zd 2 роки тому
Блин,что это за наркомания? Зачем вообще может понадобиться строчный объект представлять как блок?
@Kuznec822
@Kuznec822 5 місяців тому
Ну может чтобы ссылке сделать больше высоту и ширину
Изучение CSS для новичков / Урок #8 - Позиционирование блоков
20:47
Школа itProger / Программирование
Переглядів 102 тис.
Flexbox CSS3 в одном видео за 20 минут!
19:05
Гоша Дударь
Переглядів 293 тис.
How did CatNap end up in Luca cartoon?🙀
00:16
LOL
Переглядів 6 млн
Learn CSS margins in 5 minutes! ↔️
5:14
Bro Code
Переглядів 34 тис.
Изучение CSS для новичков / Урок #6 - Стили для текста
11:41
Школа itProger / Программирование
Переглядів 84 тис.
Python с нуля за 5 минут | Информатика ЕГЭ для 10 класса | Умскул
6:28
Информатика ЕГЭ для 10 класса Умскул
Переглядів 5 тис.
Изучение CSS для новичков / Урок #5 - Работа с фоновыми картинками
12:31
Школа itProger / Программирование
Переглядів 104 тис.
ASMR Programming - Calculator App Coding - No Talking
34:06
AsmrProg
Переглядів 4,3 млн
УЧИЛСЯ ПРОГРАММИРОВАТЬ ВСЕ ЛЕТО
10:31
Honey Montana
Переглядів 907 тис.