Articles
Введение в CSS
CSS свойства, связанные с пользовательским интерфейсом

CSS свойства, связанные с пользовательским интерфейсом

Эта статья объясняет свойства CSS, связанные с пользовательским интерфейсом.

Вы можете узнать о свойствах content, cursor, pointer-events и resize, включая их примеры использования и написания.

YouTube Video

HTML для предварительного просмотра

css-ui.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-ui.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>User Inferface Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>content</h3>
 23            <section>
 24                <h4>Content Examples</h4>
 25                <header><h4>content: "Note: ";</h4></header>
 26                <section class="sample-view">
 27                    <div class="content-note">Solid Red Outline</div>
 28                </section>
 29                <header><h4>content: " (End)";</h4></header>
 30                <section class="sample-view">
 31                    <div class="content-end">Dashed Blue Outline</div>
 32                </section>
 33            </section>
 34        </article>
 35        <article>
 36            <h3>cursor</h3>
 37            <section>
 38                <h4>Cursor Examples</h4>
 39                <header><h4>cursor: default</h4></header>
 40                <section class="sample-view">
 41                    <div class="default-cursor">This is the default cursor.</div>
 42                </section>
 43                <header><h4>cursor: pointer</h4></header>
 44                <section class="sample-view">
 45                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 46                </section>
 47                <header><h4>cursor: text</h4></header>
 48                <section class="sample-view">
 49                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 50                </section>
 51                <header><h4>cursor: wait</h4></header>
 52                <section class="sample-view">
 53                    <div class="wait-cursor">This is the wait cursor (hourglass).</div>
 54                </section>
 55                <header><h4>cursor: not-allowed</h4></header>
 56                <section class="sample-view">
 57                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 58                </section>
 59            </section>
 60        </article>
 61        <article>
 62            <h3>pointer-events</h3>
 63            <section>
 64                <h4>Pointer Events Examples</h4>
 65                <header><h4>pointer-events: auto</h4></header>
 66                <section class="sample-view">
 67                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
 68                        Auto (Clickable)
 69                    </div>
 70                </section>
 71                <header><h4>pointer-events: none</h4></header>
 72                <section class="sample-view">
 73                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
 74                        None (Not Clickable)
 75                    </div>
 76                </section>
 77                <div id="message">Message Box</div>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>resize</h3>
 82            <section>
 83                <header><h4>resize: both</h4></header>
 84                <section class="sample-view">
 85                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
 86                </section>
 87                <header><h4>resize: horizontal</h4></header>
 88                <section class="sample-view">
 89                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
 90                </section>
 91                <header><h4>resize: vertical</h4></header>
 92                <section class="sample-view">
 93                    <textarea class="resizable-vertical">Resizes vertically</textarea>
 94                </section>
 95                <header><h4>resize: none</h4></header>
 96                <section class="sample-view">
 97                    <textarea class="non-resizable">Cannot resize</textarea>
 98                </section>
 99            </section>
100        </article>
101    </main>
102</body>
103</html>

Связано с пользовательским интерфейсом

Свойство content 

 1.content-note::before {
 2    content: "Note: ";
 3    color: red;
 4    background-color: steelblue;
 5  }
 6
 7.content-end::after {
 8    content: " (End)";
 9    color: blue;
10    background-color: lightsteelblue;
11}

Свойство content используется для добавления содержимого к псевдоэлементам, главным образом ::before или ::after. Это свойство используется для определения текста, изображений, счетчиков и т. д., которые не отображаются непосредственно внутри элемента. Его основная роль заключается в управлении декоративным содержанием или дополнительной информацией, которая не прописана напрямую в HTML через таблицы стилей.

В этом примере перед элементом добавляется "Note: ", а после — "(End)". Для этого используются псевдоэлементы ::before и ::after соответственно.

Значения свойства content 

 1/* Text */
 2content: "Hello, world!";
 3
 4/* Image */
 5content: url(image.png);
 6
 7/* Counter */
 8content: counter(item);
 9
10/* Attribute */
11content: attr(title);
12
13/* None */
14content: none;

Свойство content может принимать следующие значения:.

  • Текст: Задается напрямую, заключив строку в кавычки "". Добавляет текст.
  • Изображение: Используйте функцию url() для вставки изображений.
  • Счетчик: Используйте функцию counter() для отображения счетчиков.
  • Атрибут: Используйте функцию attr() для отображения значений атрибутов HTML-элементов. Например, вы можете отобразить атрибут title.
  • none: Указывает, что содержимое отображаться не будет. Это состояние по умолчанию.

Примечания по использованию

  • Свойство content применяется только к псевдоэлементам, а не к обычным элементам.
  • Поскольку оно не добавляется в DOM, им нельзя напрямую управлять с помощью JavaScript.
  • Это может повлиять на макет, поэтому оно часто используется для отображения декоративной или дополнительной информации.

Пример 

1p::before {
2  content: url(icon.png);
3  margin-right: 5px;
4}

Это пример добавления иконки перед тегом <p>. Таким образом, вы можете визуально дополнить содержимое с помощью таблиц стилей.

Свойство cursor 

 1.default-cursor {
 2    cursor: default;
 3}
 4
 5.pointer-cursor {
 6    cursor: pointer;
 7}
 8
 9.text-cursor {
10    cursor: text;
11}
12
13.wait-cursor {
14    cursor: wait;
15}
16
17.not-allowed-cursor {
18    cursor: not-allowed;
19}

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

Основные типы курсоров

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

default 
- `default` — это обычный стрелочный курсор (курсор по умолчанию в браузере).
pointer 
- `pointer` — это курсор в форме руки, отображаемый при наведении на ссылку.
text 
- `text` — это курсор в форме I-балки, отображаемый в областях, где можно выделить текст.
move 
- `move` — это крестовидный курсор, используемый, когда элемент можно перемещать.
crosshair 
- `crosshair` — это курсор в форме перекрестия для точного выбора.
not-allowed 
- `not-allowed` — это курсор для областей или действий, которые не разрешены.
help 
- `help` — это курсор с вопросительным знаком, отображаемый при наведении на элементы, которые могут предоставить справочную информацию.
wait 
- `wait` — это курсор в виде песочных часов или круга, который отображает состояние обработки.
progress 
- `progress` — это курсор, отображающий текущую операцию. Однако он указывает, что пользователь может выполнять другие операции.
grab 
- `grab` — это курсор для захвата перетаскиваемых элементов.
grabbing 
- `grabbing` — это курсор, указывающий, что элемент перетаскивается.
resize 
- `resize` — это курсор, используемый, когда окно или элемент можно изменить в размере. Существуют разные типы в зависимости от направления.
    - **`n-resize`**: изменить размер вверх.
    - **`s-resize`**: изменить размер вниз.
    - **`e-resize`**: изменить размер вправо.
    - **`w-resize`**: изменить размер влево.
    - **`ne-resize`**: изменить размер в правый верхний угол.
    - **`nw-resize`**: изменить размер в левый верхний угол.
    - **`se-resize`**: изменить размер в правый нижний угол.
    - **`sw-resize`**: изменить размер в левый нижний угол.

Пользовательский курсор 

1element {
2    cursor: url('custom-cursor.png'), auto;
3}

Также возможно указать пользовательский курсор с помощью url().

  • В этом примере custom-cursor.png — это файл изображения для курсора. Если это изображение недоступно, отображается стандартный курсор браузера с помощью auto.

Резюме

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

Свойство pointer-events 

 1.pointer-events-auto {
 2    pointer-events: auto;
 3    background-color: lightblue;
 4    cursor: pointer;
 5}
 6
 7.pointer-events-none {
 8    pointer-events: none;
 9    background-color: lightcoral;
10    cursor: pointer;
11}

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

  • В классе pointer-events-auto свойство pointer-events установлено в значение auto, что позволяет обрабатывать обычные события наведения и нажатия. Элемент является кликабельным, поэтому при клике отображается сообщение.
  • В классе pointer-events-auto свойство pointer-events установлено в значение none, поэтому элемент не получает указательных событий. Даже если свойство cursor установлено в значение pointer, курсор мыши не изменяется, и другие элементы под ним становятся кликабельными.

Типы значений

  • Свойство pointer-events определяет, получает ли элемент указательные события и как они обрабатываются. Вы можете указать следующие значения.
auto
  • auto является значением по умолчанию, при котором элемент нормально обрабатывает события указателя.
none
  • Если указано значение none, элемент не обрабатывает события указателя. Элемент выключает взаимодействия, такие как нажатия и наведение, но другие элементы под ним могут обрабатывать события указателя.
visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit 
1pointer-events: visiblePainted;
2pointer-events: visibleFill;
3pointer-events: visibleStroke;
4pointer-events: visible;
5pointer-events: painted;
6pointer-events: fill;
7pointer-events: stroke;
8pointer-events: all;
9pointer-events: inherit;
  • Эти значения в основном используются для элементов SVG. Каждое значение определяет, будут ли определенные части элемента (например, заливка, обводка и т. д.) реагировать на события указателя. Этот параметр редко используется с обычными HTML-элементами.

Основные моменты использования

Вот несколько примеров использования свойства pointer-events.

  1. Выбор элементов, которые вы хотите отключить

    • Значение none полезно для временного отключения таких элементов, как кнопки или ссылки.

  2. Использование с перекрывающими элементами

    • Если свойство position установлено как absolute или элементы накладываются друг на друга с помощью свойства z-index, установка pointer-events в значение none на верхний элемент позволяет направить события указателя на элемент ниже.

Свойство resize 

 1.resizable-both {
 2    resize: both;
 3    overflow: auto;
 4    width: 200px;
 5    height: 100px;
 6    border: 1px solid black;
 7}
 8
 9.resizable-horizontal {
10    resize: horizontal;
11    overflow: auto;
12    width: 200px;
13    height: 100px;
14    border: 1px solid black;
15}
16
17.resizable-vertical {
18    resize: vertical;
19    overflow: auto;
20    width: 200px;
21    height: 100px;
22    border: 1px solid black;
23}
24
25.non-resizable {
26    resize: none;
27    overflow: auto;
28    width: 200px;
29    height: 100px;
30    border: 1px solid black;
31}

Свойство resize — это CSS-свойство, которое указывает направление, в котором пользователь может изменять размер элемента. Используя это свойство, вы можете разрешить изменение размера элементов по вертикали или горизонтали путем перетаскивания, либо полностью отключить изменение размера.

В этом примере направление, в котором можно изменить размер текстового поля, задается с помощью свойства resize.

  • Со значением resize: both; элемент можно изменять как по горизонтали, так и по вертикали.
  • Со значением resize: horizontal; элемент можно изменять только по горизонтали.
  • Со значением resize: vertical; элемент можно изменять только по вертикали.
  • Со значением resize: none; элемент нельзя изменить в размере.

Типы значений

  • Свойству resize присваивается значение, указывающее направление, в котором элемент может изменять размер. Вы можете указать следующие значения.
none
  • Указание значения none отключает возможность изменения размера элемента. Это значение по умолчанию.
both
  • Указание значения both позволяет изменять размер элемента как по вертикали, так и по горизонтали.
horizontal
  • Указание значения horizontal позволяет изменять размер элемента только по горизонтали (ширина).
vertical
  • Указание значения vertical позволяет изменять размер элемента только по вертикали (высота).
inherit
  • Указание значения inherit заставляет элемент унаследовать значение свойства resize от своего родителя.

Примечания

  • Чтобы сделать элемент изменяемым по размеру, нужно задать свойство overflow вместе со свойством resize. Изменяемые по размеру элементы могут требовать полос прокрутки, и обычно устанавливается свойство overflow: auto.
  • Изменение размера обычно используется с блочными элементами, такими как div и textarea.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

CSS-свойства, связанные с 3D-анимацией