В этой лекции соберём несколько полезных свойств, которые не вошли в предыдущие разделы.

1. cursor — изменение вида курсора

Меняет внешний вид курсора мыши при наведении на элемент.

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

• auto — по умолчанию
• pointer — рука (как на ссылках)
• grab — рука с захватом
• zoom-in — лупа с плюсом
• zoom-out — лупа с минусом
• help — вопросительный знак
• not-allowed — запрет
• wait — ожидание (песочные часы)
• move — перемещение (крестик)
• crosshair — прицел

.clickable {
    cursor: pointer;
}
.draggable {
    cursor: grab;
}

2. scroll-behavior — плавная прокрутка

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

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

• auto — мгновенная прокрутка (по умолчанию)
• smooth — плавная прокрутка

html {
    scroll-behavior: smooth;
}

3. user-select — запрет выделения текста

Запрещает или разрешает пользователю выделять текст на элементе.

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

• auto — разрешено (по умолчанию)
• none — запрещено
• text — можно выделять только текст

.no-select {
    user-select: none;
}

4. pointer-events — отключение кликов

Определяет, реагирует ли элемент на действия мыши (клики, наведение, курсор).

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

• auto — реагирует (по умолчанию)
• none — не реагирует (клик проходит сквозь элемент)

.no-click {
    pointer-events: none;
}

5. opacity — прозрачность

Задаёт прозрачность элемента. Значения от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Возможные значения: число от 0 до 1 (например, 0, 0.5, 1).

.opacity-1 {
    opacity: 1;     /* полностью непрозрачный */
}
.opacity-0-5 {
    opacity: 0.5;   /* полупрозрачный */
}
.opacity-0 {
    opacity: 0;     /* полностью прозрачный (невидим) */
}

6. visibility — скрытие элемента

Скрывает элемент, но сохраняет занимаемое им место.

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

• visible — элемент видим (по умолчанию)
• hidden — элемент скрыт, но место под ним остаётся
• collapse — для таблиц (скрывает строку или колонку)

.invisible {
    visibility: hidden;
}

7. overflow — обрезка содержимого

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

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

• visible — видно всё (значение по умолчанию, вылезает за границы)
• hidden — скрыть то, что не помещается
• scroll — всегда показывать полосы прокрутки
• auto — полосы прокрутки только при необходимости

.overflow-hidden {
    width: 150px;
    height: 80px;
    overflow: hidden;
}

8. resize — изменение размера пользователем

Позволяет пользователю изменять размер элемента мышкой.

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

• none — нельзя изменить (по умолчанию)
• both — можно изменять по горизонтали и вертикали
• horizontal — только по горизонтали
• vertical — только по вертикали

.resizable {
    resize: both;
    overflow: auto;
}