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

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

  • Tekst: Określ bezpośrednio, umieszczając ciąg w "". Dodaje tekst.
  • Obraz: Użyj funkcji url() do wstawiania obrazów.
  • Licznik: Użyj funkcji counter(), aby wyświetlić liczniki.
  • Atrybut: Użyj funkcji attr(), aby wyświetlić wartości atrybutów elementów HTML. Na przykład możesz wyświetlić atrybut title.
  • none: Określa, że żadna treść nie będzie wyświetlana. Jest to stan domyślny.

Uwagi dotyczące użycia

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

Przykład 

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

To jest przykład dodania ikony przed znacznikiem <p>. W ten sposób możesz wizualnie uzupełnić treść za pomocą arkuszy stylów.

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

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

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`**: zmiana rozmiaru w górę.
    - **`s-resize`**: zmiana rozmiaru w dół.
    - **`e-resize`**: zmiana rozmiaru w prawo.
    - **`w-resize`**: zmiana rozmiaru w lewo.
    - **`ne-resize`**: zmiana rozmiaru w górę i w prawo.
    - **`nw-resize`**: zmiana rozmiaru w górę i w lewo.
    - **`se-resize`**: zmiana rozmiaru w dół i w prawo.
    - **`sw-resize`**: zmiana rozmiaru w dół i w lewo.

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.

W tym przykładzie kierunek, w którym można zmienić rozmiar pola tekstowego, został określony za pomocą właściwości resize.

  • Dzięki resize: both; można zmieniać rozmiar elementu zarówno w poziomie, jak i w pionie.
  • Dzięki resize: horizontal; można zmieniać rozmiar elementu tylko w poziomie.
  • Dzięki resize: vertical; można zmieniać rozmiar elementu tylko w pionie.
  • Dzięki resize: none; nie można zmieniać rozmiaru elementu.

Typy wartości

  • Właściwości resize przypisuje się wartość określającą kierunek, w którym można zmieniać rozmiar elementu. Możesz określić następujące wartości.
none
  • Ustawienie wartości none wyłącza możliwość zmiany rozmiaru elementu. To jest domyślna wartość.
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ść).
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