Articles
Wprowadzenie do CSS
Właściwości CSS związane z interfejsem użytkownika

Właściwości CSS związane z interfejsem użytkownika

Ten artykuł wyjaśnia właściwości CSS związane z interfejsem użytkownika.

Możesz dowiedzieć się o właściwościach content, cursor, pointer-events i resize, w tym o ich zastosowaniach i sposobach ich pisania.

YouTube Video

HTML do podglądu

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>

Związane z interfejsem użytkownika

Właściwość 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}

Właściwość content służy do dodawania treści do pseudo-elementów, głównie ::before lub ::after. Ta właściwość służy do definiowania tekstu, obrazów, liczników itp., które nie są bezpośrednio wyświetlane wewnątrz elementu. Jej główną rolą jest umożliwienie kontroli nad treścią dekoracyjną lub dodatkowymi informacjami, które nie są zapisane bezpośrednio w HTML, za pomocą arkuszy stylów.

W tym przykładzie "Note: " zostało dodane przed elementem, a "(End)" zostało dodane po nim. Używane są tutaj pseudo-elementy ::before oraz ::after odpowiednio.

Wartości właściwości 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;

Właściwość content może przyjmować następujące wartości:.

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}
  • Tekst
    • Możesz dodać tekst, umieszczając ciąg bezpośrednio w podwójnych cudzysłowach ("").
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}
  • Obraz
    • Możesz wstawić obraz za pomocą funkcji 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}
  • Licznik
    • Użyj funkcji counter(), aby wyświetlić licznik.
1/* Attribute */
2.content-attr[title]::before {
3    content: attr(title);
4    display: inline-block;
5    margin-right: 0.5em;
6    color: darkgreen;
7}
  • Atrybut
    • Funkcja attr() może być użyta do wyświetlenia wartości atrybutu elementu HTML. Na przykład możesz wyświetlić atrybut title.
1/* None */
2.content-none::before {
3    content: none;
4}
  • brak
    • Określa, że żadna zawartość nie powinna być wyświetlana. Jest to stan domyślny.

Uwagi dotyczące użycia

Używając właściwości content, pamiętaj o następujących kwestiach:.

  • Właściwość content ma zastosowanie tylko do pseudo-elementów, a nie do zwykłych elementów.
  • Ponieważ nie jest dodana do DOM, nie można jej bezpośrednio manipulować za pomocą JavaScriptu.
  • Może wpłynąć na układ, dlatego jest często używana do wyświetlania treści dekoracyjnych lub dodatkowych informacji.

Właściwość cursor

Właściwość cursor służy do określania rodzaju kursora, który ma być wyświetlany, gdy wskaźnik myszy znajduje się nad elementem. Możesz określić różne style kursora, które często stosuje się do interaktywnych elementów w celu poprawy doświadczenia użytkownika.

Główne typy kursorów

Następujące wartości mogą być określone jako typy kursorów:.

 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 to normalny kursor w postaci strzałki (domyślny kursor przeglądarki).
pointer
  • pointer to kursor w kształcie dłoni wyświetlany, gdy znajduje się nad linkiem.
text
  • text to kursor w kształcie belki tekstowej wyświetlany w miejscach, gdzie można zaznaczyć tekst.
move 
- `move` to kursor w kształcie krzyża używany, gdy element można przeciągać.
crosshair
  • crosshair to kursor w kształcie celownika do precyzyjnego zaznaczania.
not-allowed
  • not-allowed to kursor wskazujący obszary lub akcje, które są niedozwolone.
help
  • help to kursor z pytajnikiem wyświetlany, gdy znajduje się nad elementami, które mogą zapewnić informacje pomocne.
wait
  • wait to kursor w kształcie klepsydry lub koła reprezentujący stan przetwarzania.
progress
  • progress to kursor wskazujący wykonywanie operacji w toku. Jednak wskazuje, że użytkownik może wykonywać inne operacje.
grab
  • grab to kursor do chwytania przeciągalnych elementów.
grabbing
  • grabbing to kursor wskazujący, że element jest przeciągany.
resize

resize to kursor używany, gdy można zmienić rozmiar okna lub elementu. Istnieją różne typy w zależności od kierunku.

  • n-resize: Kursor zmiany rozmiaru wskazujący w górę.

  • s-resize: Kursor zmiany rozmiaru wskazujący w dół.

  • e-resize: Kursor zmiany rozmiaru wskazujący w prawo.

  • w-resize: Kursor zmiany rozmiaru wskazujący w lewo.

  • ne-resize: Kursor zmiany rozmiaru wskazujący w prawy górny róg.

  • nw-resize: Kursor zmiany rozmiaru wskazujący w lewy górny róg.

  • se-resize: Kursor zmiany rozmiaru wskazujący w prawy dolny róg.

  • sw-resize: Kursor zmiany rozmiaru wskazujący w lewy dolny róg.

Kursor niestandardowy 

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

Można również określić niestandardowy kursor za pomocą url().

  • W tym przykładzie custom-cursor.png jest plikiem obrazu dla kursora. Jeśli ten obraz nie jest dostępny, przeglądarka wyświetli domyślny kursor za pomocą auto.

Podsumowanie

  • Właściwość cursor określa, który kursor powinien być wyświetlany, gdy użytkownik znajduje się nad elementem.
  • Dostępne są różne style kursora w zależności od zastosowania, a także można ustawić kursory niestandardowe.
  • Dobór odpowiednich stylów kursora dla elementów interaktywnych i operacji ograniczonych może zapewnić bardziej przyjazny interfejs użytkownika.

Właściwość 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}

Właściwość pointer-events służy do kontrolowania, w jaki sposób element obsługuje zdarzenia z urządzeń wskazujących, takich jak mysz, ekran dotykowy i rysik. Normalnie, gdy użytkownik kliknie lub najedzie kursorem na element, otrzymuje on zdarzenia wskazujące, ale to zachowanie można zmienić za pomocą tej właściwości.

  • W klasie pointer-events-auto właściwość pointer-events jest ustawiona na auto, co pozwala na przetwarzanie normalnych zdarzeń kliknięcia i najechania kursorem. Element jest klikalny, dlatego po kliknięciu wyświetlany jest komunikat.

  • W klasie pointer-events-auto właściwość pointer-events jest ustawiona na none, więc element nie odbiera zdarzeń wskazujących. Nawet jeśli właściwość cursor jest ustawiona na pointer, kursor myszy się nie zmienia, a inne elementy znajdujące się pod spodem stają się klikalne.

Typy wartości

  • Właściwość pointer-events określa, czy i w jaki sposób element odbiera zdarzenia wskazujące. Możesz określić następujące wartości.
auto
  • auto to domyślna wartość, w której element normalnie reaguje na zdarzenia wskaźnika.
none
  • Gdy jest ustawione none, element nie reaguje na zdarzenia wskaźnika. Element wyłącza interakcje, takie jak klikanie i najeżdżanie, ale inne elementy poniżej mogą odbierać zdarzenia wskaźnika.
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;
  • Te wartości są głównie używane dla elementów SVG. Każda wartość określa, czy konkretne części elementu (takie jak wypełnienie, obrys itp.) reagują na zdarzenia wskaźnika. Nie jest to często używane z typowymi elementami HTML.

Kluczowe aspekty użytkowania

Poniżej znajdują się przykłady użycia właściwości pointer-events.

  1. Wybieranie elementów, które chcesz wyłączyć

    • Wartość none jest przydatna do tymczasowego wyłączania elementów, takich jak przyciski lub linki.

  2. Użycie z nakładającymi się elementami

    • Gdy właściwość position jest ustawiona na absolute lub elementy są warstwowane za pomocą właściwości z-index, ustawienie pointer-events na none dla najwyższego elementu pozwala na wysyłanie zdarzeń wskaźnika do elementu poniżej.

Właściwość 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}

Właściwość resize to właściwość CSS, która określa, w jakim kierunku użytkownik może zmienić rozmiar elementu. Korzystając z tej właściwości, możesz pozwolić na zmianę rozmiaru elementów w pionie lub poziomie poprzez przeciąganie, albo całkowicie wyłączyć możliwość zmiany rozmiaru.

Typy wartości

  • Właściwość resize określa kierunki, w których element może być zmieniany rozmiarem. Możesz określić następujące wartości.
both
  • Ustawienie wartości both pozwala na zmianę rozmiaru elementu zarówno w pionie, jak i w poziomie.
horizontal
  • Ustawienie wartości horizontal pozwala na zmianę rozmiaru elementu tylko w kierunku poziomym (szerokość).
vertical
  • Ustawienie wartości vertical pozwala na zmianę rozmiaru elementu tylko w kierunku pionowym (wysokość).
none
  • Ustawienie wartości none wyłącza możliwość zmiany rozmiaru elementu. To jest domyślna wartość.
inherit
  • Określenie wartości inherit powoduje, że element dziedziczy wartość właściwości resize od swojego rodzica.

Notatki

  • Aby umożliwić skalowanie elementu, należy ustawić właściwość overflow razem z właściwością resize. Skalowalne elementy mogą wymagać pasków przewijania, dlatego zazwyczaj ustawiana jest wartość overflow: auto.
  • Skalowanie jest zazwyczaj stosowane w przypadku elementów blokowych, takich jak div i textarea.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z animacją 3DWłaściwości CSS związane z flotowaniem