Articles
Einführung in CSS
CSS-Eigenschaften im Zusammenhang mit der Benutzeroberfläche

CSS-Eigenschaften im Zusammenhang mit der Benutzeroberfläche

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

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:.

  • Text: Direkt angeben, indem der String in "" eingeschlossen wird. Fügt Text hinzu.
  • Bild: Verwenden Sie die Funktion url(), um Bilder einzufügen.
  • Zähler: Verwenden Sie die Funktion counter(), um Zähler anzuzeigen.
  • Attribut: Verwenden Sie die Funktion attr(), um Attributwerte von HTML-Elementen anzuzeigen. Zum Beispiel können Sie das title-Attribut anzeigen.
  • none: Gibt an, dass kein Inhalt angezeigt wird. Dies ist der Standardzustand.

Hinweise zur Verwendung

  • 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.

Beispiel 

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

Dies ist ein Beispiel für das Hinzufügen eines Symbols vor einem <p>-Tag. Auf diese Weise können Sie Inhalte visuell durch Stylesheets ergänzen.

cursor-Eigenschaft 

 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}

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:.

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`**: Größe nach oben ändern.
    - **`s-resize`**: Größe nach unten ändern.
    - **`e-resize`**: Größe nach rechts ändern.
    - **`w-resize`**: Größe nach links ändern.
    - **`ne-resize`**: Größe nach oben rechts ändern.
    - **`nw-resize`**: Größe nach oben links ändern.
    - **`se-resize`**: Größe nach unten rechts ändern.
    - **`sw-resize`**: Größe nach unten links ändern.

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.

  1. 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.

  2. 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.

In diesem Beispiel wird die Richtung, in der ein Textbereich angepasst werden kann, mit der Eigenschaft resize festgelegt.

  • Mit resize: both; kann ein Element sowohl horizontal als auch vertikal angepasst werden.
  • Mit resize: horizontal; kann ein Element nur horizontal angepasst werden.
  • Mit resize: vertical; kann ein Element nur vertikal angepasst werden.
  • Mit resize: none; kann ein Element nicht angepasst werden.

Werttypen

  • Der Eigenschaft resize wird ein Wert zugewiesen, der die Richtung angibt, in der ein Element angepasst werden kann. Sie können die folgenden Werte angeben.
none
  • Die Angabe von none deaktiviert die Anpassung des Elements. Dies ist der Standardwert.
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.
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