Продолжаем качать тестировочные скилы.
Сегодня смотрим свойства CSS, которые начинаются на "b".
CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования документов, написанных на языках разметки, таких как HTML или XML. CSS позволяет отделить содержание веб-страницы от её визуального представления, обеспечивая гибкость и удобство в управлении стилями.
1. backdrop-filter
Описание:
Применяет графический фильтр (например, размытие, контраст) к фону за определенным элементом.
Использование:
Используется для создания эффектов фильтрации, таких как размытие, за элементами, что популярно для создания полупрозрачных панелей.
Значения:
- none: Без фильтра.
- blur(px): Применяет размытие.
- brightness(%): Изменяет яркость.
- contrast(%): Изменяет контраст.
- grayscale(%): Применяет серый фильтр.
- hue-rotate(deg): Меняет оттенок.
- и другие CSS фильтры.
Пример:
Этот код размывает и усиливает контраст фона за элементом.
2. background
Описание:
Сокращенное свойство для задания фоновых параметров элемента, таких как цвет, изображение, положение, размер и т.д.
Использование:
Удобно для одновременного задания нескольких фоновых свойств.
Значения:
- background-color: Цвет фона.
- background-image: Изображение фона.
- background-position: Позиция изображения.
- background-size: Размер изображения.
- background-repeat: Повтор изображения.
- background-attachment: Прокрутка фона.
Пример:
Этот код задает желтый цвет фона с изображением, которое не повторяется и центрируется.
3. background-attachment
Описание:
Определяет, будет ли фоновое изображение прокручиваться вместе с содержимым страницы или оставаться на месте.
Использование:
Используется для фиксации фона на месте, независимо от прокрутки страницы.
Значения:
- scroll: Изображение прокручивается вместе с содержимым (по умолчанию).
- fixed: Изображение остается на месте при прокрутке.
- local: Прокручивается вместе с элементом.
Пример:
Этот код фиксирует фоновое изображение на месте при прокрутке.
4. background-blend-mode
Описание:
Определяет, как несколько задних фонов (например, изображение и цвет) будут смешиваться друг с другом.
Использование:
Применяется для создания эффектов наложения и смешивания фона.
Значения:
- normal: Без смешивания (по умолчанию).
- multiply: Умножение значений цветов.
- screen: Перемножает инверсии цвета.
- overlay: Смешивание с учетом яркости.
- Другие режимы смешивания, аналогичные режимам в графических редакторах.
Пример:
Этот код применяет режим multiply, что создает эффект затемнения изображения красным цветом.
5. background-clip
Описание:
Определяет, до каких границ будет применяться фоновое изображение или цвет.
Использование:
Используется для ограничения фона (например, только до границ содержимого или padding).
Значения:
- border-box: Фон распространяется до границы элемента.
- padding-box: Фон ограничивается внутренней отступкой (padding).
- content-box: Фон ограничивается содержимым элемента.
Пример:
Фоновый цвет будет распространяться только до границ содержимого элемента.
6. background-color
Описание:
Устанавливает цвет фона для элемента.
Использование:
Используется для задания однотонного фона.
Значения:
- Любое допустимое значение цвета (например, red, #ff0000, rgb(255, 0, 0)).
Пример:
Элемент получит фон ярко-желтого цвета.
7. background-image
Описание:
Устанавливает изображение фона для элемента.
Использование:
Применяется для добавления изображений в качестве фона.
Значения:
- url('path/to/image'): Путь к изображению.
- none: Без изображения (по умолчанию).
Пример:
Этот код задает изображение в качестве фона.
8. background-origin
Описание:
Определяет начальную точку для позиционирования фонового изображения.
Использование:
Используется для определения, откуда начинается позиционирование фона (от содержимого, padding или границы).
Значения:
- border-box: Позиционирование начинается от границы.
- padding-box: От внутренней отступки (padding).
- content-box: От содержимого.
Пример:
Фоновое изображение будет позиционироваться начиная с области padding элемента.
9. background-position
Описание:
Определяет начальное положение фонового изображения.
Использование:
Используется для указания, где должно находиться изображение внутри элемента.
Значения:
- Определенные ключевые слова: top, right, bottom, left, center.
- Процентные значения или длина: Например, 50% 50% (центр).
Пример:
Изображение будет позиционироваться в центре по горизонтали и сверху по вертикали.
10. background-repeat
Описание:
Определяет, как изображение фона будет повторяться.
Использование:
Применяется для управления повторением фонового изображения по горизонтали и вертикали.
Значения:
- repeat: Повторяется по обеим осям (по умолчанию).
- repeat-x: Повторяется только по горизонтали.
- repeat-y: Повторяется только по вертикали.
- no-repeat: Не повторяется.
Пример:
Изображение будет отображаться только один раз и не будет повторяться.
11. background-size
Описание:
Определяет размер фонового изображения.
Использование:
Применяется для изменения размера фонового изображения, чтобы оно соответствовало элементу.
Значения:
- auto: Изображение сохраняет свои исходные размеры.
- cover: Изображение масштабируется, чтобы полностью покрывать элемент.
- contain: Изображение масштабируется, чтобы полностью поместиться внутри элемента.
- Также можно задавать конкретные размеры, например, в пикселях (100px 200px) или процентах (50% 100%).
Пример:
Изображение будет масштабировано таким образом, чтобы покрыть весь элемент.
12. border
Описание:
Сокращенное свойство для задания всех сторон границы элемента.
Использование:
Позволяет задать ширину, цвет и стиль границы в одном свойстве.
Значения:
- border-width: Ширина границы (например, 1px, thin).
- border-style: Стиль границы (например, solid, dotted, dashed).
- border-color: Цвет границы (например, #000, red).
Пример:
Элемент получит красную сплошную границу шириной 2px.
13. border-bottom
Описание:
Сокращенное свойство для задания нижней границы элемента.
Использование:
Позволяет задать ширину, стиль и цвет нижней границы одновременно.
Значения:
- border-bottom-width: Ширина нижней границы.
- border-bottom-style: Стиль нижней границы.
- border-bottom-color: Цвет нижней границы.
Пример:
Элемент получит нижнюю границу в виде синей пунктирной линии шириной 4px.
4. border-bottom-color
Описание:
Задает цвет нижней границы элемента.
Использование:
Применяется для изменения цвета только нижней границы.
Значения:
- Любые допустимые значения цвета (red, #ff0000, rgba(255, 0, 0, 0.5)).
Пример:
Цвет нижней границы станет зеленым.
15. border-bottom-left-radius
Описание:
Задает радиус закругления нижнего левого угла элемента.
Использование:
Применяется для создания скругленных углов только в нижнем левом углу.
Значения:
- Любое значение в единицах, таких как px, %, em, и т.д.
Пример:
Нижний левый угол будет скруглен на 15px.
16. border-bottom-right-radius
Описание:
Задает радиус закругления нижнего правого угла элемента.
Использование:
Применяется для создания скругленного угла только в нижнем правом углу.
Значения:
- Любое значение в единицах, таких как px, %, em, и т.д.
Пример:
Нижний правый угол будет скруглен на 25px.
17. border-bottom-style
Описание:
Задает стиль нижней границы элемента.
Использование:
Применяется для изменения только стиля нижней границы.
Значения:
- none: Без границы.
- solid: Сплошная линия.
- dashed: Пунктирная линия.
- dotted: Точечная линия.
- Другие стили: double, groove, ridge, inset, outset.
Пример:
Нижняя граница будет точечной.
18. border-bottom-width
Описание:
Определяет ширину нижней границы элемента.
Использование:
Применяется для изменения только ширины нижней границы.
Значения:
- Любое значение ширины в единицах (px, em, и т.д.).
- Ключевые слова: thin, medium, thick.
Пример:
Ширина нижней границы будет 5px.
19. border-collapse
Описание:
Определяет, следует ли схлопывать или разделять границы ячеек таблицы.
Использование:
Применяется для управления отображением границ в таблицах.
Значения:
- collapse: Границы соседних ячеек схлопываются в одну границу.
- separate: Границы ячеек остаются разделенными (по умолчанию).
Пример:
Границы ячеек таблицы будут схлопнуты в одну.
20. border-color
Описание:
Задает цвет границ элемента.
Использование:
Применяется для задания цвета всех четырех границ элемента.
Значения:
- Любые допустимые значения цвета, например, red, #ff0000, rgba(255, 0, 0, 0.5).
- Можно задать до четырех значений для каждой стороны отдельно: верх, правый, низ, левый.
Пример:
Цвет границ будет: верхняя — красная, правая — зеленая, нижняя — синяя, левая — желтая.
21. border-image
Описание:
Позволяет использовать изображение в качестве границы элемента.
Использование:
Применяется для создания границ, состоящих из изображений.
Значения:
- border-image-source: Источник изображения.
- border-image-slice: Срезание изображения.
- border-image-width: Ширина изображения.
- border-image-outset: Внешний отступ изображения.
- border-image-repeat: Повторение изображения.
Пример:
Граница будет состоять из изображения, которое будет повторяться по кругу.
22. border-image-outset
Описание:
Определяет, насколько далеко за элемент выходит изображение границы.
Использование:
Применяется для создания отступа между границей-изображением и элементом.
Значения:
- Любые числовые значения в единицах, таких как px, em, и т.д.
Пример:
Изображение границы будет выходить на 5px за пределы элемента.
23. border-image-repeat
Описание:
Определяет, как изображение для границы будет повторяться.
Использование:
Применяется для управления повторением изображения вдоль границ.
Значения:
- stretch: Изображение растягивается.
- repeat: Изображение повторяется.
- round: Изображение повторяется с подгонкой.
- space: Изображение повторяется с равномерными промежутками.
Пример:
Изображение границы будет повторяться вдоль границы элемента.
24. border-image-slice
Описание:
Определяет, как изображение для границы должно быть разрезано на девять частей (четыре угла, четыре края и середина).
Использование:
Применяется для контроля, какая часть изображения используется для каждой области границы.
Значения:
- Числовые значения в процентах или пикселях, которые указывают, на сколько частей следует разрезать изображение.
- Опционально можно использовать ключевое слово fill для заполнения центральной области.
Пример:
Изображение будет разрезано на части, и центральная область также будет заполнена.
25. border-image-source
Описание:
Задает изображение, которое будет использоваться в качестве границы элемента.
Использование:
Применяется для задания изображения, которое будет растягиваться или повторяться вдоль границы элемента.
Значения:
- url('image.png'): Путь к изображению.
- none: Без изображения (по умолчанию).
Пример:
Граница будет состоять из изображения border.png.
26. border-image-width
Описание:
Определяет ширину изображения, используемого в качестве границы.
Использование:
Применяется для управления шириной изображения вдоль границы элемента.
Значения:
- Любое число в пикселях, процентах или других единицах (например, px, %).
- Также можно задать ключевые слова auto (ширина берется из исходного размера изображения).
Пример:
Ширина изображения, используемого для границы, будет 20px.
27. border-left
Описание:
Сокращенное свойство для задания левой границы элемента.
Использование:
Позволяет задать ширину, стиль и цвет левой границы одновременно.
Значения:
- border-left-width: Ширина левой границы.
- border-left-style: Стиль левой границы.
- border-left-color: Цвет левой границы.
Пример:
Этот код создает левую границу шириной 5px, красного цвета и сплошного стиля.
28. border-left-color
Описание:
Задает цвет левой границы элемента.
Использование:
Применяется для изменения цвета только левой границы.
Значения:
- Любое допустимое значение цвета (#ff0000, rgb(255, 0, 0), red и т.д.).
Пример:
Левая граница будет синего цвета.
29. border-left-style
Описание:
Задает стиль левой границы элемента.
Использование:
Применяется для изменения стиля только левой границы.
Значения:
- none: Без границы.
- solid: Сплошная линия.
- dotted: Точечная линия.
- dashed: Пунктирная линия.
- Другие стили: double, groove, ridge, inset, outset.
Пример:
Левая граница будет точечной.
30. border-left-width
Описание:
Задает ширину левой границы элемента.
Использование:
Применяется для изменения только ширины левой границы.
Значения:
- Любое значение ширины в единицах (px, em, и т.д.).
- Ключевые слова: thin, medium, thick.
Пример:
Ширина левой границы будет 8px.
31. border-radius
Описание:
Определяет радиус скругления углов элемента.
Использование:
Применяется для создания скругленных углов для всех сторон элемента.
Значения:
- Любое значение в единицах, таких как px, %, и т.д.
- Можно задать одно значение для всех углов или четыре значения для каждого угла отдельно.
Пример:
Все углы элемента будут скруглены на 10px.
Также можно задать индивидуальные радиусы для каждого угла:
Этот код задает разные радиусы для каждого угла.
32. border-right
Описание:
Сокращенное свойство для задания правой границы элемента.
Использование:
Позволяет задать ширину, стиль и цвет правой границы одновременно.
Значения:
- border-right-width: Ширина правой границы.
- border-right-style: Стиль правой границы.
- border-right-color: Цвет правой границы.
Пример:
Элемент получит правую границу шириной 3px, зеленого цвета и пунктирного стиля.
33. border-right-color
Описание:
Задает цвет правой границы элемента.
Использование:
Применяется для изменения цвета только правой границы.
Значения:
- Любое допустимое значение цвета (#00ff00, rgb(0, 255, 0), green и т.д.).
Пример:
Правая граница будет фиолетового цвета.
34. border-right-style
Описание:
Задает стиль правой границы элемента.
Использование:
Применяется для изменения стиля только правой границы.
Значения:
- none: Без границы.
- solid: Сплошная линия.
- dotted: Точечная линия.
- dashed: Пунктирная линия.
- Другие стили: double, groove, ridge, inset, outset.
Пример:
Правая граница будет двойной.
35. border-right-width
Описание:
Задает ширину правой границы элемента.
Использование:
Применяется для изменения только ширины правой границы.
Значения:
- Любое значение ширины в единицах (px, em, и т.д.).
- Ключевые слова: thin, medium, thick.
Пример:
Ширина правой границы будет 6px.
36. border-spacing
Описание:
Определяет расстояние между ячейками таблицы, если границы не схлопнуты.
Использование:
Применяется для управления расстоянием между границами ячеек таблицы.
Значения:
- Одно значение (например, 10px) — для задания одинакового расстояния по горизонтали и вертикали.
- Два значения (например, 10px 20px) — первое для горизонтального расстояния, второе для вертикального.
Пример:
Ячейки таблицы будут иметь 10px горизонтального и 20px вертикального отступа между границами.
37. border-style
Описание:
Задает стиль всех четырех границ элемента.
Использование:
Применяется для задания стиля границ элемента.
Значения:
- Можно указать одно значение для всех сторон (solid, dashed, dotted, и т.д.).
- Можно указать до четырех значений для каждой стороны отдельно (например, solid dotted dashed double).
Пример:
Границы будут иметь разные стили: верхняя — сплошная, правая — точечная, нижняя — пунктирная, левая — двойная.
38. border-top
Описание:
Сокращенное свойство для задания верхней границы элемента.
Использование:
Позволяет задать ширину, стиль и цвет верхней границы одновременно.
Значения:
- border-top-width: Ширина верхней границы.
- border-top-style: Стиль верхней границы.
- border-top-color: Цвет верхней границы.
Пример:
Элемент получит верхнюю границу шириной 5px, оранжевого цвета и сплошного стиля.
39. border-top-color
Описание:
Задает цвет верхней границы элемента.
Использование:
Применяется для изменения цвета только верхней границы.
Значения:
- Любое допустимое значение цвета (#ff6600, rgb(255, 102, 0), orange и т.д.).
Пример:
Верхняя граница будет оранжевого цвета.
40. border-top-left-radius
Описание:
Задает радиус закругления верхнего левого угла элемента.
Использование:
Применяется для создания скругления только в верхнем левом углу элемента.
Значения:
- Любое значение в единицах, таких как px, %, и т.д.
Пример:
Верхний левый угол будет скруглен на 20px.
41. border-top-right-radius
Описание:
Задает радиус закругления верхнего правого угла элемента.
Использование:
Применяется для создания скругления только в верхнем правом углу элемента.
Значения:
- Любое значение в единицах (px, %, и т.д.).
Пример:
Верхний правый угол будет скруглен на 15px.
42. border-top-style
Описание:
Задает стиль верхней границы элемента.
Использование:
Применяется для изменения стиля только верхней границы.
Значения:
- none: Без границы.
- solid: Сплошная линия.
- dashed: Пунктирная линия.
- dotted: Точечная линия.
- Другие стили: double, groove, ridge, inset, outset.
Пример:
Верхняя граница будет пунктирной.
43. border-top-width
Описание:
Задает ширину верхней границы элемента.
Использование:
Применяется для изменения только ширины верхней границы.
Значения:
- Любое значение ширины в единицах (px, em, и т.д.).
- Ключевые слова: thin, medium, thick.
Пример:
Ширина верхней границы будет 6px.
44. border-width
Описание:
Задает ширину всех четырех границ элемента.
Использование:
Применяется для задания ширины всех сторон границы одновременно или для каждой стороны отдельно.
Значения:
- Можно указать одно значение для всех сторон (например, 2px).
- Можно указать до четырех значений для каждой стороны отдельно (например, 2px 4px 6px 8px — для верхней, правой, нижней и левой границ соответственно).
- Ключевые слова: thin, medium, thick.
Пример:
Ширина границ будет: верхняя — 2px, правая — 4px, нижняя — 6px, левая — 8px.
45. bottom
Описание:
Определяет положение элемента относительно нижней границы его содержащего блока, если используется абсолютное или фиксированное позиционирование.
Использование:
Применяется для управления вертикальным расположением элемента относительно нижней границы его родительского элемента, когда используется position: absolute, relative, fixed или sticky.
Значения:
- Любое значение длины (px, %, em, и т.д.).
- Ключевые слова: auto (по умолчанию).
Пример:
Элемент будет расположен на 20px выше нижней границы родительского элемента.
46. box-decoration-break
Описание:
Определяет, как обрабатывать фоновое изображение, внутренние отступы и границы элемента, которые разбиваются на несколько строк или страниц.
Использование:
Применяется для управления поведением фона и границ при разбиении элемента на несколько строк, колонок или страниц (например, в случае многострочного текста или при разрыве страницы).
Значения:
- slice: Сохраняет фоновое изображение и границу как единое целое.
- clone: Клонирует фон и границу для каждой новой области.
Пример:
Фон и границы будут клонированы для каждой новой строки, если элемент будет разбит на несколько строк.
47. box-shadow
Описание:
Добавляет тень к элементу.
Использование:
Применяется для создания теней у блоков, кнопок, изображений и других элементов, что добавляет глубину и визуальные эффекты.
Значения:
- none: Без тени (по умолчанию).
- Параметры тени:Смещение по оси X (например, 10px).
Смещение по оси Y (например, 20px).
Размытие тени (например, 15px).
Радиус растушевки тени (например, 5px).
Цвет тени (например, rgba(0, 0, 0, 0.5)).
Пример:
Этот код создает тень со смещением 10px по горизонтали и 20px по вертикали, с размитием 30px и радиусом растушевки 5px.
48. box-sizing
Описание:
Определяет, как рассчитывается ширина и высота элемента: включает ли они padding и границы.
Использование:
Применяется для управления тем, включаются ли внутренние отступы и границы в общую ширину и высоту элемента.
Значения:
- content-box: Размеры элемента задаются только по содержимому (внутренние отступы и границы не включаются).
- border-box: Внутренние отступы и границы включаются в общую ширину и высоту элемента.
Пример:
В этом примере ширина элемента будет 200px, включая padding и границу.
49. break-after
Описание:
Определяет, следует ли создавать разрыв после элемента при печати, разбиении на страницы, или при распределении содержимого по колонкам.
Использование:
Применяется для управления разрывами страниц, колонок или блоков после элемента, особенно при печати или использовании многостолбцовой разметки.
Значения:
- auto: Автоматический разрыв (по умолчанию).
- always: Всегда создается разрыв.
- avoid: Избегать разрыва.
- page, column, left, right: Различные значения для разрыва страниц или колонок.
Пример:
Этот код создаст разрыв страницы сразу после элемента при печати.
50. break-before
Описание:
Определяет, следует ли создавать разрыв перед элементом при печати или разбиении на страницы/колонки.
Использование:
Применяется для управления разрывами перед элементом, полезно при печати или в многостолбцовой разметке.
Значения:
- auto: Автоматический разрыв (по умолчанию).
- always: Всегда создается разрыв.
- avoid: Избегать разрыва.
- page, column, left, right: Различные значения для разрыва страниц или колонок.
Пример:
Этот код создаст разрыв колонки перед элементом.
51. break-inside
Описание:
Определяет, можно ли делать разрыв внутри элемента при разбиении на страницы, колонки или строки.
Использование:
Применяется для управления поведением внутри элемента при разбиении на колонки или страницы.
Значения:
- auto: Автоматическое поведение (по умолчанию).
- avoid: Избежать разрыва внутри элемента.
- avoid-page: Избежать разрыва страницы внутри элемента.
- avoid-column: Избежать разрыва колонки внутри элемента.
Пример:
Этот код предотвращает разрыв внутри элемента, например, при печати или разбиении на колонки.
Это был полный список свойств CSS, начинающихся на букву "b", с подробным описанием, использованием, значениями и примерами. Надеюсь, информация была полезной!
Если Вам интересно, что еще можно найти на канале QA Helper, прочитайте статью: Вместо оглавления. Что вы найдете на канале QA Helper - справочник тестировщика?
Не забудьте подписаться на канал, чтобы не пропустить полезную информацию: QA Helper - справочник тестировщика
Пишите в комментариях какой пункт было бы интересно рассмотреть более подробно.
Обязательно прочитайте: Что должен знать и уметь тестировщик
Также будет интересно почитать: Вопросы которые задают на собеседовании тестировщикам