Sifat CSS Berkaitan dengan Antara Muka Pengguna

Articles

Artikel ini menerangkan sifat CSS berkaitan dengan antara muka pengguna.

Anda boleh mempelajari tentang sifat content, cursor, pointer-events, dan resize, termasuk kes penggunaannya dan cara menulisnya.

YouTube Video

HTML untuk Pratonton

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>

Berkaitan dengan Antara Muka Pengguna

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

Sifat content digunakan untuk menambahkan kandungan kepada pseudo-elemen, terutamanya ::before atau ::after. Sifat ini digunakan untuk mentakrifkan teks, imej, kaunter, dan sebagainya yang tidak dipaparkan secara langsung di dalam elemen. Peranan utamanya adalah untuk membenarkan kawalan kandungan hiasan atau maklumat tambahan yang tidak ditulis secara langsung dalam HTML melalui helaian gaya.

Dalam contoh ini, "Note: " ditambahkan sebelum elemen, dan "(End)" ditambahkan selepas. Ini menggunakan pseudo-elemen ::before dan ::after masing-masing.

Nilai untuk sifat `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;

Sifat content boleh mengambil nilai berikut:.

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}

Teks
- Anda boleh menambah teks dengan meletakkan rentetan terus di dalam tanda petik berganda ("").

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}

Imej
- Anda boleh memasukkan imej menggunakan fungsi 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}

Pemasa
- Gunakan fungsi counter() untuk memaparkan pemasa.

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

Atribut
- Fungsi attr() boleh digunakan untuk memaparkan nilai atribut sesuatu elemen HTML. Sebagai contoh, anda boleh memaparkan atribut title.

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

tiada
- Menetapkan bahawa tiada kandungan perlu dipaparkan. Ini adalah keadaan lalai.

Nota Penggunaan

Apabila menggunakan sifat content, ambil perhatian perkara berikut:.

Sifat content hanya digunakan pada pseudo-elemen, bukan elemen biasa.
Oleh kerana ia tidak ditambahkan ke DOM, ia tidak boleh dimanipulasi secara langsung dengan JavaScript.
Ia mungkin mempengaruhi susun atur, jadi ia biasanya digunakan untuk memaparkan maklumat hiasan atau tambahan.

Sifat `cursor`

Sifat cursor digunakan untuk menentukan jenis kursor yang akan dipaparkan apabila penunjuk tetikus diletakkan di atas elemen. Anda boleh menentukan pelbagai gaya kursor, dan ini sering diterapkan pada elemen interaktif untuk meningkatkan pengalaman pengguna.

Jenis Kursor Utama

Nilai-nilai berikut boleh ditentukan sebagai jenis kursor:.

 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 adalah kursor anak panah biasa (kursor lalai pelayar).

`pointer`

pointer adalah kursor berbentuk tangan yang dipaparkan apabila diletakkan di atas pautan.

`text`

text adalah kursor berbentuk balok-I yang dipaparkan di kawasan di mana teks boleh dipilih.

`move`

- `move` adalah kursor berbentuk salib yang digunakan apabila elemen boleh diseret.

`crosshair`

crosshair adalah kursor berbentuk bidikan silang untuk pemilihan yang tepat.

`not-allowed`

not-allowed adalah kursor untuk kawasan atau tindakan yang tidak dibenarkan.

`help`

help adalah kursor dengan tanda soal yang dipaparkan apabila diletakkan di atas elemen yang boleh memberikan maklumat bantuan.

`wait`

wait adalah kursor berbentuk jam pasir atau bulatan yang mewakili keadaan pemprosesan.

`progress`

progress adalah kursor yang mewakili operasi yang sedang berjalan. Namun, ia menunjukkan bahawa pengguna boleh melakukan operasi lain.

`grab`

grab adalah kursor untuk mengenggam elemen yang boleh diseret.

`grabbing`

grabbing adalah kursor yang menunjukkan elemen sedang diseret.

`resize`

resize adalah kursor yang digunakan apabila tetingkap atau elemen boleh diubah saiznya. Terdapat pelbagai jenis bergantung pada arah.

n-resize: Kursor saiz semula yang menghala ke atas.
s-resize: Kursor saiz semula yang menghala ke bawah.
e-resize: Kursor saiz semula yang menghala ke kanan.
w-resize: Kursor saiz semula yang menghala ke kiri.
ne-resize: Kursor saiz semula yang menghala ke atas kanan.
nw-resize: Kursor saiz semula yang menghala ke atas kiri.
se-resize: Kursor saiz semula yang menghala ke bawah kanan.
sw-resize: Kursor saiz semula yang menghala ke bawah kiri.

Kursor tersuai

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

Adalah mungkin untuk menentukan kursor tersuai menggunakan url().

Dalam contoh ini, custom-cursor.png ialah fail imej untuk kursor. Jika imej itu tidak tersedia, kursor lalai penyemak imbas akan dipaparkan dengan auto.

Ringkasan

Sifat cursor menentukan kursor yang patut dipaparkan apabila pengguna berada di atas elemen.
Terdapat pelbagai gaya kursor bergantung pada kegunaan, dan kursor tersuai juga boleh ditetapkan.
Dengan memilih gaya kursor yang sesuai mengikut elemen interaktif dan operasi yang dihadkan, UI yang lebih mesra pengguna dapat disediakan.

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

Sifat pointer-events digunakan untuk mengawal bagaimana elemen mengendalikan acara daripada peranti penunjuk seperti tetikus, sentuh, dan stylus. Biasanya, apabila elemen diklik atau dilalui oleh pengguna, elemen tersebut menerima acara penunjuk, tetapi tingkah laku ini boleh diubah menggunakan sifat ini.

Dalam kelas pointer-events-auto, sifat pointer-events ditetapkan kepada auto, membolehkan acara klik dan laluan biasa diproses. Elemen boleh diklik, jadi mesej akan dipaparkan apabila ia diklik.
Dalam kelas pointer-events-auto, sifat pointer-events ditetapkan kepada none, jadi elemen tersebut tidak menerima acara penunjuk. Walaupun sifat cursor ditetapkan kepada pointer, kursor tetikus tidak berubah, dan elemen lain di bawahnya menjadi boleh diklik.

Jenis nilai

Sifat pointer-events menentukan sama ada dan bagaimana elemen menerima acara penunjuk. Anda boleh menentukan nilai berikut.

`auto`

auto ialah nilai lalai, di mana elemen menerima acara penunjuk secara normal.

`none`

Apabila none ditetapkan, elemen tidak menerima acara penunjuk. Elemen ini melumpuhkan interaksi seperti klik dan hover, tetapi elemen lain di bawahnya boleh menerima acara penunjuk.

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

Nilai-nilai ini terutamanya digunakan untuk elemen SVG. Setiap nilai mengawal sama ada bahagian tertentu elemen (seperti isi, stroke, dan lain-lain) bertindak balas kepada acara penunjuk. Ia tidak biasa digunakan dengan elemen HTML biasa.

Titik penting untuk penggunaan

Berikut adalah beberapa contoh cara menggunakan sifat pointer-events.

Memilih elemen yang anda ingin lumpuhkan
- Nilai none berguna untuk melumpuhkan elemen seperti butang atau pautan buat sementara waktu.
Penggunaan dengan elemen bertindih
- Apabila sifat position ditetapkan kepada absolute atau elemen dilapis menggunakan sifat z-index, menetapkan pointer-events kepada none pada elemen atas membolehkan acara penunjuk dihantar ke elemen di bawah.

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

Sifat resize ialah sifat CSS yang menentukan arah mana elemen boleh diubah saiz oleh pengguna. Dengan menggunakan sifat ini, anda boleh membenarkan elemen diubah saiz secara menegak atau mendatar dengan menyeret, atau melumpuhkan pengubahan saiz sepenuhnya.

Jenis nilai

Ciri resize menentukan arah di mana satu elemen boleh diubah saiznya. Anda boleh menentukan nilai berikut.

`both`

Menetapkan both membolehkan elemen diubah saiz dalam kedua-dua arah menegak dan mendatar.

`horizontal`

Menetapkan horizontal membolehkan elemen diubah saiz hanya ke arah mendatar (lebar).

`vertical`

Menetapkan vertical membolehkan elemen diubah saiz hanya ke arah menegak (tinggi).

`none`

Menetapkan none melumpuhkan pengubahan saiz elemen. Ini adalah nilai lalai.

`inherit`

Menentukan inherit menjadikan elemen mewarisi nilai sifat resize daripada elemen induknya.

Nota

Untuk menjadikan elemen boleh diubah saiz, anda perlu menetapkan sifat overflow bersama-sama dengan sifat resize. Elemen yang boleh diubah saiznya mungkin memerlukan bar skrol, dan overflow: auto biasanya ditetapkan.
Pengubahan saiz biasanya digunakan dengan elemen blok seperti div dan textarea.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Ciri-ciri CSS Berkaitan dengan Animasi 3D Sifat CSS Berkaitan Float

Sifat CSS Berkaitan dengan Antara Muka Pengguna

YouTube Video

HTML untuk Pratonton

Berkaitan dengan Antara Muka Pengguna

Sifat content

Nilai untuk sifat content

Nota Penggunaan

Sifat cursor

Jenis Kursor Utama

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

Kursor tersuai

Ringkasan

Sifat pointer-events

Jenis nilai

auto

none

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

Titik penting untuk penggunaan

Sifat resize

Jenis nilai

both

horizontal

vertical

none

inherit

Nota

YouTube Video

Sifat `content`

Nilai untuk sifat `content`

Sifat `cursor`

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

Sifat `pointer-events`

`auto`

`none`

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

Sifat `resize`

`both`

`horizontal`

`vertical`

`none`

`inherit`