Articles
Pengenalan kepada CSS
Sifat CSS Berkaitan dengan Antara Muka Pengguna

Sifat CSS Berkaitan dengan Antara Muka Pengguna

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

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

  • Teks: Tentukan secara langsung dengan menyertakan string dalam "". Menambah teks.
  • Imej: Gunakan fungsi url() untuk memasukkan imej.
  • Kaunter: Gunakan fungsi counter() untuk memaparkan kaunter.
  • Atribut: Gunakan fungsi attr() untuk memaparkan nilai atribut elemen HTML. Sebagai contoh, anda boleh memaparkan atribut title.
  • none: Menentukan bahawa tiada kandungan akan dipaparkan. Ini adalah keadaan lalai.

Nota Penggunaan

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

Contoh 

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

Ini adalah contoh menambahkan ikon sebelum tag <p>. Dengan cara ini, anda boleh melengkapkan kandungan secara visual melalui helaian gaya.

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

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

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`**: ubah saiz ke arah atas.
    - **`s-resize`**: ubah saiz ke arah bawah.
    - **`e-resize`**: ubah saiz ke arah kanan.
    - **`w-resize`**: ubah saiz ke arah kiri.
    - **`ne-resize`**: ubah saiz ke arah atas-kanan.
    - **`nw-resize`**: ubah saiz ke arah atas-kiri.
    - **`se-resize`**: ubah saiz ke arah bawah-kanan.
    - **`sw-resize`**: ubah saiz ke arah 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.

  1. Memilih elemen yang anda ingin lumpuhkan

    • Nilai none berguna untuk melumpuhkan elemen seperti butang atau pautan buat sementara waktu.

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

Dalam contoh ini, arah di mana medan teks boleh diubah saiz ditentukan menggunakan sifat resize.

  • Dengan resize: both;, elemen boleh diubah saiz secara mendatar dan menegak.
  • Dengan resize: horizontal;, elemen hanya boleh diubah saiz secara mendatar.
  • Dengan resize: vertical;, elemen hanya boleh diubah saiz secara menegak.
  • Dengan resize: none;, elemen tidak boleh diubah saiz.

Jenis nilai

  • Sifat resize diberikan nilai yang menentukan arah di mana elemen boleh diubah saiz. Anda boleh menentukan nilai berikut.
none
  • Menetapkan none melumpuhkan pengubahan saiz elemen. Ini adalah nilai lalai.
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).
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