CSS Cursor là gì? Bí quyết dùng CSS Cursor toàn tập

Đối có lập trình viên hoặc dân thiết kế web site, nắm được những tri thức về thuộc tính Cursor trong CSS sẽ giúp cho sản phẩm của mình thêm độc đáo. Vậy CSS Cursor là gì? Trong bài viết hôm nay, Tino Group sẽ chỉ dẫn bạn phương pháp dùng CSS Cursor để chỉnh kiểu con trỏ lúc người mua vận động chuột vào phần tử trên web site.

Đôi nét về CSS Cursor

CSS Cursor là gì?

CSS Cursor là 1 thuộc tính trong Cascading Model Sheets (CSS) để xác định loại con trỏ sẽ được hiển thị lúc vận động chuột tới 1 phần trên trang net. Hiểu đơn giản, thuộc tính này được dùng để thay đổi kiểu con trỏ chuột lúc người mua di chuột qua những phần khác nhau trên trang net, tạo ra hiệu ứng trực quan và cải thiện trải nghiệm người mua.

Dí dụ: con trỏ mặc định là 1 mũi tên, nhưng bạn có thể thay đổi thành biểu tượng bàn tay để cho biết rằng 1 phần tử có thể nhấp được.

1 số thuộc tính con trỏ thường được dùng trong CSS bao gồm:

  • auto: Trình thông qua xác định con trỏ dựa trên ngữ cảnh hiện tại.
  • default: Con trỏ mặc định, thường là 1 mũi tên.
  • pointer: Biểu tượng bàn tay, thường được dùng để biểu thị những phần tử có thể nhấp.
  • textual content: 1 con trỏ văn bản, thường được dùng để chỉ ra những khu vực mà người mua có thể nhập văn bản.
  • transfer: Biểu tượng hình chữ thập, thường được dùng để biểu thị những phần tử có thể kéo được.
  • not-allowed: 1 vòng tròn có 1 đường kẻ xuyên qua, thường được dùng để chỉ ra rằng 1 hành động ko được phép.
Xem Thêm  Prime 6 sport hay trên điện thoại hấp dẫn nhất hiện nay

Những lợi ích lúc dùng CSS Cursor

Dùng CSS Cursor mang lại 1 số lợi ích cho trang net, bao gồm:

  • Cải thiện trải nghiệm người mua: CSS Cursor cho phép bạn phân phối những chỉ dẫn rõ ràng cho người mua về phương pháp dùng những phần tử trên trang net của bạn. Dí dụ, dùng cursor “pointer” cho biết rằng phần tử ấy có thể được nhấp chuột và dùng “textual content” cho phép người mua biết họ có thể nhập văn bản vào khu vực ấy.
  • Nâng cao tính tương tác: Có CSS Cursor, bạn có thể nâng cao khả năng tương tác có người mua bằng phương pháp phân phối cho họ những chỉ dẫn rõ ràng và liên quan họ thực hành những hành động trên trang net của bạn.
  • Định dạng trang net: CSS Cursor phân phối cho bạn khả năng tùy chỉnh hình ảnh con trỏ của chuột, do ấy bạn có thể tạo ra trang net độc đáo và lôi kéo sự chú ý của người mua.
  • Tiết kiệm thời kì: Dùng CSS Cursor giúp tiết kiệm thời kì và công sức cho nhà vươn lên là net bởi vì bạn ko cần bắt buộc tạo những hình ảnh con trỏ biệt lập và tải chúng lên trang net.

Lúc nào cần dùng CSS Cursor?

CSS Cursor là 1 trong những thuộc tính quan yếu trong CSS. Dưới đây là 1 số trường hợp mà bạn nên dùng CSS Cursor để cải thiện trải nghiệm người mua:

  • Hợp tác: Kiểu con trỏ chuột sẽ thay đổi thành hình tay áo lúc di chuột qua 1 hợp tác, giúp người mua biết rằng ấy là 1 hợp tác có thể nhấp chuột để chuyển tới 1 trang khác.
  • Nút: Kiểu con trỏ chuột có thể được thay đổi để cho người mua biết rằng nút ấy là 1 phần tương tác có thể được nhấp chuột hoặc kích hoạt bằng phương pháp dùng bàn phím.
  • Phần tử có thể vận động hoặc kéo thả: Kiểu con trỏ chuột có thể được thay đổi để cho người mua biết rằng họ có thể vận động hoặc kéo thả phần tử ấy.
  • Phần tử ko thể tương tác: Kiểu con trỏ chuột có thể được thay đổi để cho người mua biết rằng phần tử ấy ko thể được tương tác.
  • Tình trạng đang chờ đợi: Kiểu con trỏ chuột có thể được thay đổi để cho người mua biết rằng họ đang chờ đợi cho 1 tác vụ nào ấy được thực hành, chẳng hạn như tải xuống dữ liệu.
  • Cảnh báo: 1 số nội dung mang tính chất cảnh báo cần được khiến nổi bật hơn lúc bạn thay đổi định dạng con trỏ chuột. Chẳng hạn như 1 hình màu đỏ gạch chéo sẽ giúp người mua được tác động mạnh mẽ hơn là định dạng mặc định.
Xem Thêm  ALEX Lab là gì? Thông tin chi tiết về ALEX Token

Tuy nhiên, việc dùng CSS Cursor bắt buộc được cân nhắc cẩn thận, vì quá nhiều thay đổi kiểu con trỏ chuột có thể khiến mất đi sự chuyên nghiệp của trang net và gây khó chịu cho người mua.

Bí quyết dùng CSS Cursor toàn tập

Cú pháp mẫu của Cursor CSS

Để thay đổi kiểu con trỏ có Cursor CSS, bạn cần vận dụng cú pháp sau đây:

cursor: kiểu con trỏ;

Dưới đây là danh sách mẫu cấu trúc của những kiểu con trỏ được thường được dùng trong thuộc tính Cursor CSS.

Kiểu con trỏ

Hiển thị

alias

all-scroll

auto

cell

context-menu

col-resize

copy

crosshair

default

e-resize

ew-resize

assist

transfer

n-resize

ne-resize

nesw-resize

ns-resize

nw-resize

nwse-resize

no-drop

none

not-allowed

pointer

progress

row-resize

s-resize

se-resize

sw-resize

textual content

vertical-text

w-resize

wait

zoom-in

zoom-out

Dí dụ đơn giản:

<!DOCTYPE html> <html> <head> <model kind=”textual content/css”> div{ padding:50px; border:1px strong black; font-size:20px; cursor:wait; } </model> </head> <physique> <div>Dí chuột bắt buộc đây để xem kiểu con trỏ của phần tử</div> </physique> </html>

Bí quyết dùng hình ảnh khiến kiểu con trỏ

Bên cạnh việc dùng những định dạng cơ bản được nhắc ở trên, bạn còn có thể dùng nhiều hình ảnh khác nhau để khiến định dạng con trỏ chuột. Cấu trúc lúc dùng hình ảnh khiến định dạng như sau:

cursor: url(đường dẫn tới tập tin hình ảnh dùng khiến con trỏ),auto;

Bạn có thể tham khảo dí dụ sau:

<!DOCTYPE html> <html> <head> <model kind=”textual content/css”> div { padding: 50px; border: 1px strong black; font-size: 20px; cursor: url(../picture/con-tro-hinh-anh.png), auto; } </model> </head> <physique> <div>Dí chuột bắt buộc đây để xem kiểu con trỏ của phần tử</div> </physique> </html>

Xem Thêm  Thị trường hoang mang chứng kiến USDT mất peg 1 USD

Như vậy, bài viết đã phân phối cho bạn 1 số thông tin về CSS Cursor cũng như phương pháp dùng những thuộc tính này để thay đổi con trỏ chuột và mang lại trải nghiệm phải chăng hơn cho người mua web site của bạn. Chúc bạn thành công!

Những câu hỏi thường gặp