Свойство user-select в CSS || User-select property in CSS || Full CSS course for beginner

Приветствую на курсе CSS.

Меня зовут Дмитрий.

В этом уроке вы узнаете, что такое свойство UserSelect в CSS.

Итак, свойство UserSelect контролирует, может ли пользователь выделять текст.

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

Итак, давайте разберем синтаксис.

Синтаксис у этого свойства следующий.

Применяем это свойство

Например, к заголовкам, параграфу и так далее.

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

И у этого свойства есть следующее значение.

Это Auto, None, All, Text и Contain.

Вот эти значения.

Давайте с ними разбираться по порядку.

Итак, первое значение это Auto.

Значение идет по умолчанию.

То есть текст может быть выбран пользователем.

Давайте сразу на примере.

смотреть, как это все у нас отображается.

Перейдем в Visual Studio Code и здесь, допустим, создадим параграф с произвольным текстом на 15 слов.

Откроем страницу в браузере.

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

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

Это идет значение по умолчанию, то есть если мы перейдем в стиле, обратимся к параграфу и здесь добавим свойство User Select, укажем значение Auto, то такой эффект и останется.

Следующее значение это NUM.

Пользователь не может выбрать текст, то есть он не может выделить этот текст при необходимости.

Итак, давайте проверим как оно работает.

Здесь для User Select устанавливаем значение NUM.

Переходим на страницу и теперь нельзя выделить этот текст, то есть мы можем запретить пользователю выделять текст и какой-то определенный контент.

Следующее значение это All, то есть пользователь может выбирать текст, включая текст внутри других элементов.

Это значение также может быть полезным, если нам нужно выделить сразу весь текст.

Давайте посмотрим, как это работает.

Сюда добавляем значение All этому свойству и кликаем или пытаемся выделить текст, контент, и он выбирает полностью весь контент, который здесь у нас добавлен, то есть просто кликая на

Эти 15 слов у нас выделяются они все сразу.

Мы можем их скопировать и вставить.

Также еще есть значение Text.

Это пользователь может выбрать текст.

И есть еще значение Contain.

Пользователь может выбрать текст, но только внутри элемента и его потомков.

Эти два значения работают точно так же, как и значение Out.

Давайте также это проверим.

Здесь поменяем на Text.

Перейдем на страницу.

И мы также можем выделять

этот контент.

Точно так же, если мы здесь заменим в стилях значение на contain, то точно так же можем выделять этот контент, как при значении auto.

Таким вот образом работает и применяется свойство UserSelect в CSS.

На этом все.

Спасибо за просмотр и успехов в обучении!

Если вам понравился данный видео урок, ставьте лайк и подписывайтесь на мой канал.