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

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

Văn bản: Chỉ định trực tiếp bằng cách bao quanh chuỗi văn bản trong dấu ngoặc kép "". Thêm văn bản.
Hình ảnh: Sử dụng hàm url() để chèn hình ảnh.
Bộ đếm: Sử dụng hàm counter() để hiển thị bộ đếm.
Thuộc tính: Sử dụng hàm attr() để hiển thị các giá trị thuộc tính của các phần tử HTML. Ví dụ, bạn có thể hiển thị thuộc tính title.
none: Chỉ định rằng không có nội dung nào sẽ được hiển thị. Đây là trạng thái mặc định.

Ghi chú sử dụng

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.

Ví dụ

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

Đây là một ví dụ về việc thêm một biểu tượng trước thẻ <p>. Bằng cách này, bạn có thể bổ sung nội dung một cách trực quan thông qua các stylesheet.

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

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

`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`**: thay đổi kích thước theo hướng lên trên.
    - **`s-resize`**: thay đổi kích thước theo hướng xuống dưới.
    - **`e-resize`**: thay đổi kích thước sang bên phải.
    - **`w-resize`**: thay đổi kích thước sang bên trái.
    - **`ne-resize`**: thay đổi kích thước theo hướng trên phải.
    - **`nw-resize`**: thay đổi kích thước theo hướng trên trái.
    - **`se-resize`**: thay đổi kích thước theo hướng dưới phải.
    - **`sw-resize`**: thay đổi kích thước theo hướng dưới 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.

Trong ví dụ này, hướng mà một ô textarea có thể được thay đổi kích thước được chỉ định bằng thuộc tính resize.

Với resize: both;, một phần tử có thể được thay đổi kích thước cả theo chiều ngang lẫn chiều dọc.
Với resize: horizontal;, một phần tử chỉ có thể được thay đổi kích thước theo chiều ngang.
Với resize: vertical;, một phần tử chỉ có thể được thay đổi kích thước theo chiều dọc.
Với resize: none;, một phần tử không thể được thay đổi kích thước.

Các loại giá trị.

Thuộc tính resize được gán một giá trị chỉ định 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.

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

`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).

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

Ví dụ

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

none

both

horizontal

vertical

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`

`none`

`both`

`horizontal`

`vertical`

`inherit`