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

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

Свойство CSS white-space устанавливает, как отображать пробелы между словами.

В обычных условиях любое количество пробелов в коде HTML показывается на Web-странице как один. Исключением является тег <pre>: помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем.

Возможные значения:
normal - Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.

nowrap - Переносы строк в коде HTML игнорируются, весь текст отображается одной строкой, вместе с тем, добавление тега <br> переносит текст на новую строку.

pre - Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.

Свойство CSS word-break устанавливает, переносить ли часть слова на новую строку, если слово целиком не помещается по ширине в заданную область.

Возможные значения:
normal - Перенос строк устанавливается по умолчанию.

break-all - Слова, которые не помещаются целиком в заданную область, разрываются переносом строки. Не работает для китайского, корейского и японского текста.

keep-all - Запрещает перенос строк в словах китайского, корейского и японского текста. Для остальных работает как normal.

Свойство CSS word-spacing устанавливает интервал между словами.

Например: p {word-spacing: 10px;}
Можно использовать отрицательные значения.


Made in HTML/CSS

2 группа стилей - для работы с фоном.

Свойство CSS background-color используется для задания цвета фона элемента. Это может быть полезно для выделения элементов на странице, создания визуальных эффектов или улучшения читаемости текста.

Значения цвета:
- background-color может принимать различные значения для цвета:
- Названия цветов (например, red, blue, green).
- Шестнадцатеричные коды (например, #ff0000 для красного).
- RGB цвета (например, rgb(255, 0, 0)).
- RGBA цвета (например, rgba(255, 0, 0, 0.5) — с учетом прозрачности).
- HSL цвета (например, hsl(0, 100%, 50%)).
- HSLA цвета (например, hsla(0, 100%, 50%, 0.5) — с учетом прозрачности).



Made in HTML/CSS

Свойство CSS background-clip clip устанавливает, где будет отображаться фон.

Возможные значения:
border-box - Фон отображается до внешнего края границы элемента.

padding-box - Фон отображается до внутреннего края границы элемента.

content-box - Фон отображается только внутри контента.



Made in HTML/CSS

Свойство CSS opacity определяет уровень прозрачности элемента.

При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
В качестве аргумента выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1 - его непрозрачности.

Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, например, opacity: .6.



Made in HTML/CSS

Свойство CSS background-image устанавливает фоновое изображение для элемента.

Если одновременно для элемента задан цвет фона, то он будет виден, если фоновая картинка меньше, чем сам элемент, или пока фоновая картинка не загрузится полностью.



Made in HTML/CSS

Свойство CSS background-origin устанавливает, где будет начинаться фоновое изображение.

Возможные значения:

border-box - Фоновое изображение начинается от внешнего края границы элемента.
padding-box - Фоновое изображение начинается от внутреннего края границы элемента.
content-box - Фоновое изображение начинается только в зоне контента.


Made in HTML/CSS

Свойство CSS background-position задает начальное положение фонового изображения. По умолчанию - в левом верхнем углу.

У этого свойства два значения: положение по горизонтали (может быть - left, center, right) и вертикали (может быть - top, center, bottom).

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

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


Made in HTML/CSS

Свойство CSS background-repeat определяет, как будет повторяться фоновое изображение. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.

Возможные значения:

no-repeat - Одно фоновое изображение в элементе без его повторений, положение которого определяется атрибутом background-position.
repeat - Фоновое изображение повторяется по горизонтали и вертикали.
repeat-x - Фоновый рисунок повторяется только по горизонтали.
repeat-y - Фоновый рисунок повторяется только по вертикали.



Made in HTML/CSS

Свойство CSS background-size определяет ширину и высоту фонового изображения.

Возможные значения:

значение - Ширина и высота фонового изображения в прямом виде.
проценты - Ширина и высота фонового изображения в процентном отношении от ширины и высоты элемента.
contain - Изображение масштабируется, сохраняя пропорции, по большей стороне так, чтобы картинка целиком поместилась внутрь блока.
cover - Изображение масштабируется, сохраняя пропорции, по меньшей стороне так, чтобы его ширина или высота равнялась ширине или высоте блока.
auto - Если задано для ширины и высоты (auto auto), то размеры фонового изображения остаются исходными (по умолчанию); если только для одной стороны (100px auto), то размер вычисляется автоматически исходя из пропорций изображения.



Made in HTML/CSS

Свойство 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