Các thuộc tính CSS liên quan đến giao diện người dùng

Articles

Bài viết này giải thích các thuộc tính CSS liên quan đến giao diện người dùng.

Bạn có thể tìm hiểu về các thuộc tính content, cursor, pointer-events, và resize, bao gồm các trường hợp sử dụng của chúng và cách viết chúng.

YouTube Video

HTML để Xem trước

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>

Liên quan đến giao diện người dùng

Thuộc tính `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}

Thuộc tính content được sử dụng để thêm nội dung vào các phần tử giả, chủ yếu là ::before hoặc ::after. Thuộc tính này được sử dụng để xác định văn bản, hình ảnh, bộ đếm, v.v., không được hiển thị trực tiếp bên trong phần tử. Vai trò chính của nó là cho phép kiểm soát nội dung trang trí hoặc thông tin bổ sung không được viết trực tiếp trong HTML thông qua các stylesheet.

Trong ví dụ này, "Note: " được thêm trước phần tử và "(End)" được thêm sau. Những cái này sử dụng các phần tử giả ::before và ::after tương ứng.

Các giá trị của thuộc tính `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;

Thuộc tính content có thể nhận các giá trị sau:.

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}

Văn bản
- Bạn có thể thêm văn bản bằng cách đặt chuỗi trực tiếp trong dấu ngoặc kép ("").

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}

Hình ảnh
- Bạn có thể chèn một hình ảnh bằng cách sử dụng hàm 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}

Bộ đếm
- Sử dụng hàm counter() để hiển thị bộ đếm.

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

Thuộc tính
- Hàm attr() có thể được sử dụng để hiển thị giá trị thuộc tính của một phần tử HTML. Ví dụ, bạn có thể hiển thị thuộc tính title.

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

không
- Chỉ định rằng không nên hiển thị bất kỳ nội dung nào. Đây là trạng thái mặc định.

Ghi chú sử dụng

Khi sử dụng thuộc tính content, hãy lưu ý các điểm sau:.

Thuộc tính content chỉ áp dụng cho các phần tử giả, không áp dụng cho các phần tử thông thường.
Vì nó không được thêm vào DOM, nên không thể thao tác trực tiếp với JavaScript.
Nó có thể ảnh hưởng đến bố cục, vì vậy thường được sử dụng để hiển thị nội dung trang trí hoặc thông tin bổ sung.

Thuộc tính `cursor`

Thuộc tính cursor được sử dụng để chỉ định loại con trỏ sẽ hiển thị khi con trỏ chuột được đặt lên một phần tử. Bạn có thể chỉ định các kiểu con trỏ khác nhau, và nó thường được áp dụng cho các phần tử tương tác để cải thiện trải nghiệm người dùng.

Các loại con trỏ chính

Các giá trị sau có thể được chỉ định làm kiểu con trỏ:.

 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 là con trỏ mũi tên bình thường (con trỏ mặc định của trình duyệt).

`pointer`

pointer là con trỏ hình bàn tay xuất hiện khi đặt lên một đường liên kết.

`text`

text là con trỏ hình chữ I xuất hiện tại các khu vực có thể chọn văn bản.

`move`

- `move` là con trỏ hình dấu chữ thập được sử dụng khi một phần tử có thể được kéo.

`crosshair`

crosshair là con trỏ dạng hình chữ thập dùng để chọn chính xác.

`not-allowed`

not-allowed là con trỏ dùng cho các khu vực hoặc hành động không được phép.

`help`

help là con trỏ kèm dấu hỏi hiển thị khi đặt lên các phần tử cung cấp thông tin trợ giúp.

`wait`

wait là con trỏ hình đồng hồ cát hoặc hình tròn biểu thị trạng thái đang xử lý.

`progress`

progress là con trỏ biểu thị một thao tác đang được tiến hành. Tuy nhiên, nó biểu thị rằng người dùng có thể thực hiện các thao tác khác.

`grab`

grab là con trỏ dùng để nắm bắt các phần tử có thể kéo được.

`grabbing`

grabbing là con trỏ biểu thị rằng một phần tử đang được kéo.

`resize`

resize là con trỏ được sử dụng khi một cửa sổ hoặc phần tử có thể thay đổi kích thước. Có nhiều loại khác nhau tùy thuộc vào hướng.

n-resize: Con trỏ thay đổi kích thước hướng lên trên.
s-resize: Con trỏ thay đổi kích thước hướng xuống dưới.
e-resize: Con trỏ thay đổi kích thước hướng sang phải.
w-resize: Con trỏ thay đổi kích thước hướng sang trái.
ne-resize: Con trỏ thay đổi kích thước hướng lên trên bên phải.
nw-resize: Con trỏ thay đổi kích thước hướng lên trên bên trái.
se-resize: Con trỏ thay đổi kích thước hướng xuống dưới bên phải.
sw-resize: Con trỏ thay đổi kích thước hướng xuống dưới bên trái.

Con trỏ tùy chỉnh

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

Cũng có thể xác định con trỏ tùy chỉnh bằng cách sử dụng url().

Trong ví dụ này, custom-cursor.png là tệp hình ảnh của con trỏ. Nếu hình ảnh đó không khả dụng, con trỏ mặc định của trình duyệt sẽ được hiển thị với auto.

Tóm tắt

Thuộc tính cursor chỉ định con trỏ nào sẽ được hiển thị khi người dùng di chuột qua một phần tử.
Có các kiểu con trỏ khác nhau tùy thuộc vào mục đích sử dụng, và cũng có thể đặt con trỏ tùy chỉnh.
Bằng cách chọn các kiểu con trỏ phù hợp theo các yếu tố tương tác và thao tác hạn chế, có thể cung cấp giao diện UI thân thiện hơn với người dùng.

Thuộc tính `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}

Thuộc tính pointer-events được sử dụng để kiểm soát cách phần tử xử lý các sự kiện từ các thiết bị trỏ như chuột, cảm ứng và bút stylus. Thông thường, khi một phần tử được người dùng nhấp vào hoặc di chuột qua, nó sẽ nhận các sự kiện trỏ, nhưng hành vi này có thể thay đổi bằng cách sử dụng thuộc tính này.

Trong lớp pointer-events-auto, thuộc tính pointer-events được đặt là auto, cho phép xử lý các sự kiện nhấp chuột và di chuột như bình thường. Phần tử có thể nhấp, vì vậy một thông báo sẽ hiển thị khi nó được nhấp vào.
Trong lớp pointer-events-auto, thuộc tính pointer-events được đặt là none, vì vậy phần tử không nhận được các sự kiện trỏ. Ngay cả khi thuộc tính cursor được đặt là pointer, con trỏ chuột cũng không thay đổi, và các phần tử khác bên dưới trở nên có thể nhấp được.

Các loại giá trị.

Thuộc tính pointer-events chỉ định liệu và cách một phần tử nhận các sự kiện trỏ. Bạn có thể chỉ định các giá trị sau.

`auto`

auto là giá trị mặc định, trong đó phần tử nhận các sự kiện con trỏ một cách bình thường.

`none`

Khi none được chỉ định, phần tử sẽ không nhận các sự kiện con trỏ. Phần tử sẽ vô hiệu hóa các tương tác như nhấp chuột và di chuột, nhưng các phần tử bên dưới vẫn có thể nhận các sự kiện con trỏ.

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

Những giá trị này chủ yếu được sử dụng cho các phần tử SVG. Mỗi giá trị điều chỉnh việc liệu các phần cụ thể của một phần tử (như fill, stroke, v.v.) có phản hồi với các sự kiện con trỏ hay không. Nó không thường được sử dụng với các phần tử HTML thông thường.

Các điểm chính khi sử dụng

Dưới đây là một số ví dụ về cách sử dụng thuộc tính pointer-events.

Chọn các phần tử mà bạn muốn vô hiệu hóa
- Giá trị none rất hữu ích để tạm thời vô hiệu hóa các phần tử như nút bấm hoặc liên kết.
Sử dụng với các phần tử được xếp chồng lên nhau
- Khi thuộc tính position được đặt là absolute hoặc các phần tử được xếp lớp bằng cách sử dụng thuộc tính z-index, việc đặt pointer-events thành none trên phần tử trên cùng cho phép các sự kiện con trỏ được gửi đến phần tử bên dưới.

Thuộc tính `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}

Thuộc tính resize là một thuộc tính CSS chỉ định hướng mà phần tử có thể được thay đổi kích thước bởi người dùng. Bằng cách sử dụng thuộc tính này, bạn có thể cho phép các phần tử được thay đổi kích thước theo chiều dọc hoặc chiều ngang bằng cách kéo, hoặc vô hiệu hóa hoàn toàn việc thay đổi kích thước.

Các loại giá trị.

Thuộc tính resize xác định các hướng mà một phần tử có thể được thay đổi kích thước. Bạn có thể chỉ định các giá trị sau.

`both`

Chỉ định both cho phép phần tử được thay đổi kích thước theo cả chiều dọc và chiều ngang.

`horizontal`

Chỉ định horizontal cho phép phần tử chỉ được thay đổi kích thước theo hướng ngang (chiều rộng).

`vertical`

Chỉ định vertical cho phép phần tử chỉ được thay đổi kích thước theo hướng dọc (chiều cao).

`none`

Chỉ định none sẽ vô hiệu hóa việc thay đổi kích thước của phần tử. Đây là giá trị mặc định.

`inherit`

Chỉ định inherit làm cho phần tử kế thừa giá trị thuộc tính resize từ phần tử cha của nó.

Ghi chú

Để làm cho một phần tử có thể thay đổi kích thước, bạn cần đặt thuộc tính overflow cùng với thuộc tính resize. Các phần tử có thể thay đổi kích thước có thể cần thanh cuộn, và thường đặt overflow: auto.
Việc thay đổi kích thước thường được sử dụng với các phần tử khối như div và textarea.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến hoạt ảnh 3D Các thuộc tính CSS liên quan đến float

Các thuộc tính CSS liên quan đến giao diện người dùng

YouTube Video

HTML để Xem trước

Liên quan đến giao diện người dùng

Thuộc tính content

Các giá trị của thuộc tính content

Ghi chú sử dụng

Thuộc tính cursor

Các loại con trỏ chính

default

pointer

text

move

crosshair

not-allowed

help

wait

progress

grab

grabbing

resize

Con trỏ tùy chỉnh

Tóm tắt

Thuộc tính pointer-events

Các loại giá trị.

auto

none

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

Các điểm chính khi sử dụng

Thuộc tính resize

Các loại giá trị.

both

horizontal

vertical

none

inherit

Ghi chú

YouTube Video

Thuộc tính `content`

Các giá trị của thuộc tính `content`

Thuộc tính `cursor`

`default`

`pointer`

`text`

`move`

`crosshair`

`not-allowed`

`help`

`wait`

`progress`

`grab`

`grabbing`

`resize`

Thuộc tính `pointer-events`

`auto`

`none`

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

Thuộc tính `resize`

`both`

`horizontal`

`vertical`

`none`

`inherit`