Свойство CSS background является сокращением, которое объединяет несколько отдельных свойств, связанных с фоновым оформлением элемента.

Оно позволяет одновременно задавать цвет фона, изображение, положение, размер и поведение (повторение) фонового изображения.

Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

Made in HTML/CSS

Поля и отступы

Свойство CSS margin используется для установки внешних отступов вокруг элементов.
Оно позволяет создать пространство между границами элемента и окружающими его элементами.

В отличие от внутреннего отступа (padding), который добавляет пространство внутри элемента, margin определяет пространство снаружи.



Made in HTML/CSS

Свойство CSS padding используется для задания внутреннего отступа элемента, то есть пространства между содержимым элемента (текстом, изображениями и т. д.) и его границами.

padding помогает обеспечить лучшую читаемость и визуальную отделенность содержимого от фона.



Made in HTML/CSS

Свойство CSS scroll-margin-top используется для задания отступа при прокрутке элемента, который будет применяться, когда элемент выделяется при помощи якорной ссылки (например, при переходе по ссылке, указывающей на определенное место на странице).

Это свойство позволяет контролировать отступ сверху, когда элемент становится видимым в области просмотра.



Made in HTML/CSS

Раздел: Рамки (границы)

Свойство CSS border-color используется для задания цвета границы элемента.

Оно позволяет контролировать цвета границ сверху, справа, снизу и слева, а также задавать цвет границы для всех сторон одновременно.



Made in HTML/CSS

Свойства CSS border-bottom-color, border-left-color, border-right-color и border-top-color предоставляют возможность задания цвета для отдельных сторон границы элемента.

Это может быть полезно для создания уникальных дизайнов с различными цветовыми решениями для каждой стороны.

Made in HTML/CSS

Свойство CSS border-style используется для задания стиля границ элемента.

Оно позволяет управлять внешним видом границ, определяя, как они будут отображаться.

Стиль границы влияет на визуальное оформление и восприятие элементов на странице.

Made in HTML/CSS

Свойства CSS border-bottom-style, border-left-style, border-right-style и border-top-style позволяют задавать стиль границы для каждой стороны элемента отдельно.

Это дает возможность более точно контролировать визуальное оформление границ, создавая уникальные дизайны.



Made in HTML/CSS

Свойство CSS border-width используется для задания ширины границ элемента.

Оно применимо ко всем сторонам границы и позволяет контролировать, насколько толстыми будут границы вокруг элемента.

Это свойство может быть задано для всех сторон одновременно или индивидуально для каждой.



Made in HTML/CSS

Свойство CSS border является сокращенной записью для установки границ элемента.

Оно объединяет три свойства: border-width, border-style и border-color.

Это позволяет задавать все три характеристики границы в одной строке, упрощая процесс стилизации.

Made in HTML/CSS

Свойство CSS border-radius используется для задания радиуса закругления углов элемента.

Это позволяет создавать элементы с округлыми краями, что придаёт им более мягкий и современный вид.

Свойство может применяться ко всем углам одновременно или индивидуально к каждому углу.



Made in HTML/CSS

Свойство CSS border-image-source показывает источник изображения.

Это может быть URL изображения или значение none, чтобы удалить границу.



Made in HTML/CSS

Свойство CSS border-image-slice:
- Определяет, как изображение будет разделено на части. Это значение может быть указано в пикселях, процентах или значении fill.



Made in HTML/CSS

Свойство CSS border-image-width:
- Определяет ширину границы, используя одно или несколько значений



Made in HTML/CSS

Свойство CSS border-image-outset:
- Указывает расстояние, на которое изображение границы будет выступать за элемент, используя одно или несколько значений.



Made in HTML/CSS

Свойство CSS border-image-repeat:
- Определяет, как изображение будет повторяться в границе. Значения могут быть:
- stretch: изображение растягивается для заполнения границы.
- repeat: изображение повторяется.
- round: изображение повторяется и обрезается, чтобы заполнить границу.
- space: изображение повторяется, оставляя равные пробелы между копиями.



Made in HTML/CSS

Сделаем из последних 5 постов один общий код.

Свойство CSS border-image используется для создания сложных границ у элементов с помощью изображений.

Оно позволяет заменять стандартные границы (которые определяются свойствами border-style, border-color и border-width) на изображения, что добавляет уникальности в дизайн веб-страниц.



Made in HTML/CSS

Свойство CSS outline используется для создания обводки вокруг элементов, которая отличается от обычной границы.

В отличие от свойства border, outline не занимает пространство в потоке документа, что позволяет не нарушать Layout элементов. Оно часто используется для выделения элементов при фокусировке или в качестве визуального эффекта.



Made in HTML/CSS

Свойство CSS width используется для определения ширины элемента на веб-странице.

Оно позволяет задавать размеры блоков, изображений, таблиц и других элементов в фиксированных единицах измерения или в процентном соотношении относительно родительского элемента.


Made in HTML/CSS