CSS-Eigenschaften im Zusammenhang mit der Benutzeroberfläche

Articles

Dieser Artikel erklärt CSS-Eigenschaften im Zusammenhang mit der Benutzeroberfläche.

Sie können mehr über die Eigenschaften content, cursor, pointer-events und resize erfahren, einschließlich ihrer Anwendungsfälle und wie sie geschrieben werden.

YouTube Video

HTML zur Vorschau

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>

Im Zusammenhang mit der Benutzeroberfläche

`content`-Eigenschaft

 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}

Die content-Eigenschaft wird verwendet, um Pseudo-Elementen, hauptsächlich ::before oder ::after, Inhalte hinzuzufügen. Diese Eigenschaft wird verwendet, um Text, Bilder, Counter usw. zu definieren, die nicht direkt innerhalb des Elements angezeigt werden. Ihre Hauptfunktion besteht darin, die Kontrolle über dekorative Inhalte oder ergänzende Informationen zu ermöglichen, die nicht direkt in HTML geschrieben sind, sondern über Stylesheets.

In diesem Beispiel wird „Hinweis: “ vor dem Element hinzugefügt und „(Ende)“ danach. Dabei werden die Pseudo-Elemente ::before und ::after verwendet.

Werte der `content`-Eigenschaft

 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;

Die content-Eigenschaft kann die folgenden Werte annehmen:.

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}

Text
- Sie können Text hinzufügen, indem Sie eine Zeichenkette direkt in doppelte Anführungszeichen ("") einschließen.

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}

Bild
- Sie können ein Bild mit der Funktion url() einfügen.

 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}

Zähler
- Verwenden Sie die Funktion counter(), um einen Zähler anzuzeigen.

1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}

Attribut
- Die Funktion attr() kann verwendet werden, um den Attributwert eines HTML-Elements anzuzeigen. Zum Beispiel können Sie das title-Attribut anzeigen.

1/* None */
2.content-none::before {
3    content: none;
4}

keine
- Gibt an, dass kein Inhalt angezeigt werden soll. Dies ist der Standardzustand.

Hinweise zur Verwendung

Beachten Sie beim Verwenden der Eigenschaft content die folgenden Punkte:.

Die content-Eigenschaft gilt nur für Pseudo-Elemente, nicht für reguläre Elemente.
Da sie nicht zum DOM hinzugefügt wird, kann sie nicht direkt mit JavaScript manipuliert werden.
Sie kann das Layout beeinflussen und wird daher häufig zum Anzeigen von dekorativen oder ergänzenden Informationen verwendet.

`cursor`-Eigenschaft

Die cursor-Eigenschaft wird verwendet, um den Cursor-Typ anzugeben, der angezeigt werden soll, wenn der Mauszeiger über ein Element bewegt wird. Sie können verschiedene Cursor-Stile festlegen, die oft auf interaktive Elemente angewendet werden, um die Benutzererfahrung zu verbessern.

Haupt-Cursor-Typen

Die folgenden Werte können als Cursor-Typen angegeben werden:.

 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 ist der normale Pfeil-Cursor (der Standard-Cursor des Browsers).

`pointer`

pointer ist ein handförmiger Cursor, der angezeigt wird, wenn er über einem Link positioniert wird.

`text`

text ist ein I-Balken-Cursor, der in Bereichen angezeigt wird, in denen Text ausgewählt werden kann.

`move`

- `move` ist ein kreuzförmiger Cursor, der verwendet wird, wenn ein Element gezogen werden kann.

`crosshair`

crosshair ist ein Fadenkreuz-Cursor für präzise Auswahl.

`not-allowed`

not-allowed ist ein Cursor für Bereiche oder Aktionen, die nicht erlaubt sind.

`help`

help ist ein Cursor mit einem Fragezeichen, der angezeigt wird, wenn er über Elemente bewegt wird, die Hilfsinformationen liefern können.

`wait`

wait ist ein Sanduhr- oder kreisförmiger Cursor, der einen Verarbeitungszustand anzeigt.

`progress`

progress ist ein Cursor, der eine laufende Operation darstellt. Es zeigt jedoch an, dass der Benutzer andere Aktionen durchführen kann.

`grab`

grab ist ein Cursor zum Erfassen von ziehbaren Elementen.

`grabbing`

grabbing ist ein Cursor, der anzeigt, dass ein Element gezogen wird.

`resize`

resize ist ein Cursor, der verwendet wird, wenn ein Fenster oder ein Element in der Größe geändert werden kann. Es gibt verschiedene Typen, abhängig von der Richtung.

n-resize: Ein Größenänderungs-Cursor, der nach oben zeigt.
s-resize: Ein Größenänderungs-Cursor, der nach unten zeigt.
e-resize: Ein Größenänderungs-Cursor, der nach rechts zeigt.
w-resize: Ein Größenänderungs-Cursor, der nach links zeigt.
ne-resize: Ein Größenänderungs-Cursor, der nach rechts oben zeigt.
nw-resize: Ein Größenänderungs-Cursor, der nach links oben zeigt.
se-resize: Ein Größenänderungs-Cursor, der nach rechts unten zeigt.
sw-resize: Ein Größenänderungs-Cursor, der nach links unten zeigt.

Benutzerdefinierter Cursor

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

Es ist auch möglich, einen benutzerdefinierten Cursor mit url() anzugeben.

In diesem Beispiel ist custom-cursor.png die Bilddatei für den Cursor. Wenn dieses Bild nicht verfügbar ist, wird mit auto der Standard-Cursor des Browsers angezeigt.

Zusammenfassung

Die Eigenschaft cursor gibt an, welcher Cursor angezeigt werden soll, wenn sich der Benutzer über einem Element befindet.
Es stehen verschiedene Cursorstile zur Verfügung, je nach Verwendung, und benutzerdefinierte Cursor können ebenfalls festgelegt werden.
Durch die Auswahl geeigneter Cursorstile für interaktive Elemente und eingeschränkte Operationen kann eine benutzerfreundlichere Benutzeroberfläche bereitgestellt werden.

Eigenschaft `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}

Die Eigenschaft pointer-events wird verwendet, um zu steuern, wie ein Element Ereignisse von Zeigegeräten wie Maus, Touch und Stylus verarbeitet. Normalerweise empfängt ein Element Zeigereignisse, wenn ein Benutzer darauf klickt oder darüber fährt, aber dieses Verhalten kann mithilfe dieser Eigenschaft geändert werden.

In der Klasse pointer-events-auto ist die Eigenschaft pointer-events auf auto gesetzt, wodurch normale Klick- und Hover-Ereignisse verarbeitet werden können. Das Element ist klickbar, daher wird eine Nachricht angezeigt, wenn darauf geklickt wird.
In der Klasse pointer-events-auto ist die Eigenschaft pointer-events auf none gesetzt, sodass das Element keine Zeigereignisse empfängt. Selbst wenn die Eigenschaft cursor auf pointer gesetzt ist, ändert sich der Mauszeiger nicht, und andere darunterliegende Elemente werden klickbar.

Werttypen

Die Eigenschaft pointer-events gibt an, ob und wie ein Element Zeigereignisse empfängt. Sie können die folgenden Werte angeben.

`auto`

auto ist der Standardwert, bei dem das Element normalerweise Zeigerereignisse empfängt.

`none`

Wenn none angegeben ist, empfängt das Element keine Zeigerereignisse. Das Element deaktiviert Interaktionen wie Klicken und Hovern, aber andere Elemente darunter können Zeigerereignisse empfangen.

`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;

Diese Werte werden hauptsächlich für SVG-Elemente verwendet. Jeder Wert steuert, ob spezifische Teile eines Elements (wie Füllung, Umriss usw.) auf Zeigerereignisse reagieren. Es wird nicht häufig mit regulären HTML-Elementen verwendet.

Wichtige Hinweise zur Anwendung

Hier sind einige Beispiele für die Verwendung der Eigenschaft pointer-events.

Auswahl von Elementen, die Sie deaktivieren möchten
- Der Wert none ist nützlich, um Elemente wie Schaltflächen oder Links vorübergehend zu deaktivieren.
Verwendung mit überlagerten Elementen
- Wenn die Eigenschaft position auf absolute gesetzt ist oder Elemente mit der Eigenschaft z-index gestapelt werden, ermöglicht das Einstellen von pointer-events auf none beim obersten Element, dass Zeigerereignisse an das darunterliegende Element gesendet werden.

Eigenschaft `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}

Die Eigenschaft resize ist eine CSS-Eigenschaft, die angibt, in welche Richtung ein Element vom Benutzer angepasst werden kann. Mit dieser Eigenschaft können Sie Elemente vertikal oder horizontal durch Ziehen anpassen oder die Größenänderung vollständig deaktivieren.

Werttypen

Die Eigenschaft resize legt fest, in welche Richtungen ein Element skalierbar ist. Sie können die folgenden Werte angeben.

`both`

Die Angabe von both ermöglicht es, das Element sowohl in vertikaler als auch in horizontaler Richtung anzupassen.

`horizontal`

Die Angabe von horizontal ermöglicht es, das Element nur in horizontaler Richtung (Breite) anzupassen.

`vertical`

Die Angabe von vertical ermöglicht es, das Element nur in vertikaler Richtung (Höhe) anzupassen.

`none`

Die Angabe von none deaktiviert die Anpassung des Elements. Dies ist der Standardwert.

`inherit`

Die Angabe von inherit bewirkt, dass das Element den Wert der Eigenschaft resize von seinem übergeordneten Element erbt.

Notizen

Um ein Element anpassbar zu machen, müssen Sie die overflow-Eigenschaft zusammen mit der resize-Eigenschaft setzen. Anpassbare Elemente können Scrollbars erfordern, und es wird typischerweise overflow: auto gesetzt.
Die Größenänderung wird in der Regel mit Blockelementen wie div und textarea verwendet.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften im Zusammenhang mit 3D-Animationen Float-bezogene CSS-Eigenschaften

CSS-Eigenschaften im Zusammenhang mit der Benutzeroberfläche

YouTube Video

HTML zur Vorschau

Im Zusammenhang mit der Benutzeroberfläche

content-Eigenschaft

Werte der content-Eigenschaft

Hinweise zur Verwendung

cursor-Eigenschaft

Haupt-Cursor-Typen

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

Benutzerdefinierter Cursor

Zusammenfassung

Eigenschaft pointer-events

Werttypen

auto

none

visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all, inherit

Wichtige Hinweise zur Anwendung

Eigenschaft resize

Werttypen

both

horizontal

vertical

none

inherit

Notizen

YouTube Video

`content`-Eigenschaft

Werte der `content`-Eigenschaft

`cursor`-Eigenschaft

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

Eigenschaft `pointer-events`

`auto`

`none`

`visiblePainted`, `visibleFill`, `visibleStroke`, `visible`, `painted`, `fill`, `stroke`, `all`, `inherit`

Eigenschaft `resize`

`both`

`horizontal`

`vertical`

`none`

`inherit`