CSS может быть очень удобным интерфейсом дизайна, используемым для придания веб-сайтам чистоты и уникального стиля. Думайте об этом как об одном из ваших друзей, который помогает вам решить, какую одежду или аксессуары покупать и носить и как их носить. Без CSS базовый HTML напомнил бы вам о раннем интернет-формате и тех веб-сайтах, которыми никто не любит пользоваться. Однако, как только вы научитесь нескольким приемам, вы почувствуете себя опытным разработчиком.
Одним из лучших ресурсов в CSS является «display: flex», который можно назначить практически любому элементу. Это позволяет нам контролировать выравнивание, направление, формат и дает вам много информации о том, что добавить к элементам полей и отступов. Он уникален тем, что вы можете видеть из инструментов разработчика прямые изменения и редактировать их прямо на вкладке элементов. Когда у вас будет приблизительное представление о том, что вы хотите использовать в каждом div, просто скопируйте и вставьте дополнения в свой CSS.
Как видите, просто выберите синюю кнопку Flex, и на вкладке стилей вы увидите «display: flex» со значком рядом с ним. Нажмите на нее, и вы сможете поиграть со всеми маленькими опциями. Отсюда добавьте изменения в CSS. Обязательно имейте в виду, что расположение консоли справа от экрана повлияет на восприятие изменений. Размещение его в нижней части экрана позволяет вам видеть все, как оно останется.
Еще один популярный элемент CSS — «margin». Поля используются для создания пространства вокруг элементов за пределами любых определенных границ. Это очень приятно и позволяет вам точно перемещать контент туда, куда вы хотите. «Маржа» сама по себе добавит поля в каждом направлении содержимого. Margin-top, естественно, добавит маржу в направлении сверху. Как вы можете догадаться, есть также «поле-справа», «поле-снизу» и «поле-лево». Существует также «margin:auto», где он автоматически центрирует содержимое по горизонтали внутри контейнера.
Маржа — это весело и в основном безвредно для возни. Не бойтесь совершать ошибки, для чего и создан ярлык отмены!
CSS Padding похож на поля, но позволяет создавать пространство вокруг элементов, внутри любых определенных границ. Поля и отступы идут рука об руку, создавая идеальный баланс внутри контейнера. Padding, как и margin, также имеет спецификаторы, которые позволяют напрямую влиять на изменения. Скажем, вам нужно поместить предмет точно в контейнер. Тогда заполнение будет выглядеть так:
Существует также сокращенное свойство для заполнения и поля, которые следуют одной и той же структуре. В том же порядке, что и на фото выше; padding-top, padding-right, padding-bottom и padding-left можно записать так.
Опять же, вы можете сделать то же самое для маржи, и это сэкономит вашему коду ценное пространство! Эти элементы — отличные стартовые элементы, и как только вы их напишете, вы сможете легко добавлять такие элементы, как тени границ, для создания отступов, переходов, наведения курсора мыши и многого другого!
Надеюсь, вы чему-то научились у одного начинающего программиста у другого! Удачного кодирования! ❤
