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>content</h3>
 37            <section>
 38                <h4>Content Value Examples</h4>
 39                <!-- Text -->
 40                <header><h4>content: "Hello, world!";</h4></header>
 41                <section class="sample-view">
 42                    <div class="content-text">This is a sample element.</div>
 43                </section>
 44                <!-- Image -->
 45                <header><h4>content: url(image.png);</h4></header>
 46                <section class="sample-view">
 47                    <div class="content-image">Image inserted before this text.</div>
 48                </section>
 49                <!-- Counter -->
 50                <header><h4>content: counter(item);</h4></header>
 51                <section class="sample-view">
 52                    <div class="content-counter">This is a counted item.</div>
 53                </section>
 54                <!-- Attribute -->
 55                <header><h4>content: attr(title);</h4></header>
 56                <section class="sample-view">
 57                    <div class="content-attr" title="Tooltip text">This displays title attribute as content.</div>
 58                </section>
 59                <!-- None -->
 60                <header><h4>content: none;</h4></header>
 61                <section class="sample-view">
 62                    <div class="content-none">No generated content is shown.</div>
 63                </section>
 64            </section>
 65        </article>
 66        <article>
 67            <h3>cursor</h3>
 68            <section>
 69                <h4>Cursor Examples</h4>
 70                <header><h4>cursor: default</h4></header>
 71                <section class="sample-view">
 72                    <div class="default-cursor">This is the default cursor.</div>
 73                </section>
 74                <header><h4>cursor: pointer</h4></header>
 75                <section class="sample-view">
 76                    <div class="pointer-cursor">This is the pointer cursor (hand).</div>
 77                </section>
 78                <header><h4>cursor: text</h4></header>
 79                <section class="sample-view">
 80                    <div class="text-cursor">This is the text cursor (I-bar).</div>
 81                </section>
 82                <header><h4>cursor: move</h4></header>
 83                <section class="sample-view">
 84                    <div class="move-cursor">This is the move cursor (cross-shaped).</div>
 85                </section>
 86                <header><h4>cursor: crosshair</h4></header>
 87                <section class="sample-view">
 88                    <div class="crosshair-cursor">This is the crosshair cursor (precision cross).</div>
 89                </section>
 90                <header><h4>cursor: not-allowed</h4></header>
 91                <section class="sample-view">
 92                    <div class="not-allowed-cursor">This is the not-allowed cursor (prohibited).</div>
 93                </section>
 94                <header><h4>cursor: help</h4></header>
 95                <section class="sample-view">
 96                    <div class="help-cursor">This is the help cursor (question mark).</div>
 97                </section>
 98                <header><h4>cursor: wait</h4></header>
 99                <section class="sample-view">
100                    <div class="wait-cursor">This is the wait cursor (hourglass or spinner).</div>
101                </section>
102                <header><h4>cursor: progress</h4></header>
103                <section class="sample-view">
104                    <div class="progress-cursor">This is the progress cursor<br>(loading, but user can still interact).</div>
105                </section>
106                <header><h4>cursor: grab</h4></header>
107                <section class="sample-view">
108                    <div class="grab-cursor">This is the grab cursor (ready to drag).</div>
109                </section>
110                <header><h4>cursor: grabbing</h4></header>
111                <section class="sample-view">
112                    <div class="grabbing-cursor">This is the grabbing cursor<br>(dragging in progress).</div>
113                </section>
114                <header><h4>cursor: resize</h4></header>
115                <section class="sample-view">
116                    <div class="n-resize-cursor">This is the n-resize cursor (resize up).</div>
117                    <div class="s-resize-cursor">This is the s-resize cursor (resize down).</div>
118                    <div class="e-resize-cursor">This is the e-resize cursor (resize right).</div>
119                    <div class="w-resize-cursor">This is the w-resize cursor (resize left).</div>
120                    <div class="ne-resize-cursor">This is the ne-resize cursor (resize top-right).</div>
121                    <div class="nw-resize-cursor">This is the nw-resize cursor (resize top-left).</div>
122                    <div class="se-resize-cursor">This is the se-resize cursor<br>(resize bottom-right).</div>
123                    <div class="sw-resize-cursor">This is the sw-resize cursor<br>(resize bottom-left).</div>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>pointer-events</h3>
129            <section>
130                <h4>Pointer Events Examples</h4>
131                <header><h4>pointer-events: auto</h4></header>
132                <section class="sample-view">
133                    <div class="pointer-events-auto" onclick="document.getElementById('message').innerHTML = 'Auto: This box is clickable!'">
134                        Auto (Clickable)
135                    </div>
136                </section>
137                <header><h4>pointer-events: none</h4></header>
138                <section class="sample-view">
139                    <div class="pointer-events-none" onclick="document.getElementById('message').innerHTML = 'None: This box is not clickable!'">
140                        None (Not Clickable)
141                    </div>
142                </section>
143                <div id="message">Message Box</div>
144            </section>
145        </article>
146        <article>
147            <h3>resize</h3>
148            <section>
149                <header><h4>resize: both</h4></header>
150                <section class="sample-view">
151                    <textarea class="resizable-both">Resizes both horizontally and vertically</textarea>
152                </section>
153                <header><h4>resize: horizontal</h4></header>
154                <section class="sample-view">
155                    <textarea class="resizable-horizontal">Resizes horizontally</textarea>
156                </section>
157                <header><h4>resize: vertical</h4></header>
158                <section class="sample-view">
159                    <textarea class="resizable-vertical">Resizes vertically</textarea>
160                </section>
161                <header><h4>resize: none</h4></header>
162                <section class="sample-view">
163                    <textarea class="non-resizable">Cannot resize</textarea>
164                </section>
165            </section>
166        </article>
167    </main>
168</body>
169</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 может принимать следующие значения:.

1/* Text */
2.content-text::before {
3    content: "Hello, world!";
4    display: inline-block;
5    margin-right: 0.5em;
6    color: #333;
7    font-weight: bold;
8}
  • Текст
    • Вы можете добавить текст, заключив строку непосредственно в двойные кавычки ("").
1/* Image */
2.content-image::before {
3    content: url('custom-bullet.png');
4    display: inline-block;
5    margin-right: 0.5em;
6    vertical-align: middle;
7}
  • Изображение
    • Вы можете вставить изображение с помощью функции url().
 1/* Counter */
 2.content-counter {
 3    counter-reset: item;
 4}
 5.content-counter::before {
 6    counter-increment: item;
 7    content: counter(item) ". ";
 8    margin-right: 0.5em;
 9    font-weight: bold;
10}
  • Счетчик
    • Используйте функцию counter(), чтобы отобразить счетчик.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Атрибут
    • Функция attr() может быть использована для отображения значения атрибута HTML-элемента. Например, вы можете отобразить атрибут title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • нет
    • Указывает, что содержимое не должно отображаться. Это состояние по умолчанию.

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

При использовании свойства content имейте в виду следующие моменты:.

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

Свойство cursor

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

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

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

 1.default-cursor { cursor: default; }
 2.pointer-cursor { cursor: pointer; }
 3.text-cursor { cursor: text; }
 4.move-cursor { cursor: move; }
 5.crosshair-cursor { cursor: crosshair; }
 6.not-allowed-cursor { cursor: not-allowed; }
 7.help-cursor { cursor: help; }
 8.wait-cursor { cursor: wait; }
 9.progress-cursor { cursor: progress; }
10.grab-cursor { cursor: grab; }
11.grabbing-cursor { cursor: grabbing; }
12.n-resize-cursor { cursor: n-resize; }
13.s-resize-cursor { cursor: s-resize; }
14.e-resize-cursor { cursor: e-resize; }
15.w-resize-cursor { cursor: w-resize; }
16.ne-resize-cursor { cursor: ne-resize; }
17.nw-resize-cursor { cursor: nw-resize; }
18.se-resize-cursor { cursor: se-resize; }
19.sw-resize-cursor { cursor: sw-resize; }
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 определяет направления, в которых элемент может быть изменён в размере. Вы можете указать следующие значения.
both
  • Указание значения both позволяет изменять размер элемента как по вертикали, так и по горизонтали.
horizontal
  • Указание значения horizontal позволяет изменять размер элемента только по горизонтали (ширина).
vertical
  • Указание значения vertical позволяет изменять размер элемента только по вертикали (высота).
none
  • Указание значения none отключает возможность изменения размера элемента. Это значение по умолчанию.
inherit
  • Указание значения inherit заставляет элемент унаследовать значение свойства resize от своего родителя.

Примечания

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

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

YouTube Video

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