Cursor CSS là gì? 2 Cách sử dụng thuộc tính Cursor CSS
16/05/2022 09:58 am | Lượt xem : 17521
Khi truy cập vào một website bạn thấy con trỏ chuột hiển thị ở hình dáng nào? Trên trang web của Ten Ten chúng tôi đang để hình dáng mặc định. Tuy nhiên có thể nào thay đổi hình con trỏ trên website không? Nếu muốn tạo độc đáo cho website chúng ta hoàn toàn có thể thay đổi định dạng.
Để làm được điều này chúng ta có thể sử dụng thuộc tính Cursor CSS.
Cách sử dụng thuộc tính này như thế nào bạn đã nắm được đầy đủ các thuộc tính chưa? Nếu là dân lập trình viên hoặc dân thiết kế website chắc chắn bạn cần nắm được kiến thức này để làm cho dịch vụ thiết kế của mình thêm độc đáo.
Tại bài viết hôm nay chúng tôi xin giới thiệu đến bạn đọc các thông tin về Cursor CSS là gì? Cách sử dụng thuộc tính này mời bạn cùng theo dõi.
Cursor CSS là gì? 3 Cách sử dụng thuộc tính Cursor CSS
Contents
Giới thiệu tổng quan về Cursor CSS
Cursor CSS là gì?
Thuộc tính cursor trong CSS hay còn gọi là cursor CSS là một thuộc tính được dùng để điều chỉnh hay thay đổi kiểu con trỏ của một phần tử HTML. Khi người dùng di chuyển con chuột vào phần tử đó thì con chuột vào phần tử thì lập tức con chuột sẽ thay đổi định dạng. Điều này làm cho người dùng thích thú và cảm thấy website có thêm phần sinh động.
Khi nào cần sử dụng các thuộc tính Cursor CSS
Bạn có thắc mắc là tại sao cần phải sử dụng các thuộc tính để thay đổi định dạng của con chuột không?
Chắc chắn là sẽ có những trường hợp bạn chỉ muốn thay đổi định dạng để làm cho website trở nên thú vị hơn. Ngoài ra còn có những lý do mà bạn cần thiết phải đổi định dạng con chuột trong các tình huống sau:
- Thay đổi định dạng con chuột cho phù hợp với thuộc tính.
Đối với một số thuộc tính, nếu để định dạng con chuột là định dạng mặc định có thể khiến cho người dùng cảm thấy không phù hợp. Ví dụ như một thuộc tính trong đó có điền nội dung văn bản, kiểu định dạng thông thường sẽ không quen thuộc. Vì người dùng thường nhìn thấy định dạng kiểu chữ I cho phần gõ văn bản. Lúc này việc thay đổi định dạng giúp người dùng dễ hiểu hơn về thuộc tính.
- Thay đổi định dạng con chuột để phù hợp với bảng thông tin.
Một số phần tử ở dạng bảng thông tin có cần thay đổi thuộc tính con chuột không? Chắc chắn rằng nếu thay đổi thuộc tính con chuột cho phù hợp với định dạng bảng cũng rất hữu ích đối với người dùng.
- Thay đổi định dạng con chuột thành mũi tên để định hướng người dùng.
Ngoài ra, một số thuộc tính ở dạng đặc biệt như các thuộc tính định hướng, người dùng cần di chuyển lên trên, sang trái, phải hay dưới. Nếu hình ảnh con chuột được thay đổi cũng mang lại nhiều lợi ích. Giúp người dùng dễ dàng làm theo các hướng dẫn hơn.
- Thay đổi định dạng để báo hiệu cho người dùng về nội dung cảnh báo,…
Một số nội dung mang tính chất cảnh báo sẽ được làm cho nổi bật hơn khi bạn thay đổi định dạng con chuột. Một hình màu đỏ gạch chéo sẽ giúp người dùng được tác động mạnh mẽ hơn là định dạng mặc định.
Bạn cần mua một tên miền để bắt đầu website của mình
Hướng dẫn cách sử dụng các thuộc tính Cursor CSS
Hướng dẫn cách sử dụng các thuộc tính Cursor CSS
Cú pháp mẫu của thuộc tính Cursor CSS
Để sử dụng thuộc tính Cursor CSS bạn cần nhớ cú pháp sau đây:
cursor: kiểu con trỏ;
Dưới đây là danh sách mẫu cấu trúc và cú pháp những kiểu con trỏ được dùng trong thuộc tính Cursor CSS. Bạn có thể tham khảo thông tin chi tiết tại bảng sau đây:
| Kiểu con trỏ | Hiển thị |
|---|---|
| alias |  |
| all-scroll |  |
| auto |  |
| cell |  |
| context-menu |  |
| col-resize |  |
| copy |  |
| crosshair |  |
| default | |
| e-resize |  |
| ew-resize | |
| help |  |
| move | |
| 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 | |
| text |  |
| vertical-text |  |
| w-resize | |
| wait |  |
| zoom-in |  |
| zoom-out |  |
Ví dụ cách dùng thuộc tính cursor css
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
padding: 50px;
border: 1px solid black;
font-size: 20px;
cursor: wait;
}
</style>
</head>
<body>
<div>Dí chuột phải đây để xem kiểu con trỏ của phần tử</div>
</body>
</html>
Hướng dẫn cách sử dụng hình ảnh làm kiểu con trỏ
Hướng dẫn cách sử dụng hình ảnh làm kiểu con trỏ
Ngoài việc sử dụng các định dạng đơn giản trên bạn hoàn toàn có thể sử dụng nhiều hình ảnh khác nhau để làm định dạng con trỏ chuột. Sau đây là cấu trúc khi sử dụng hình ảnh làm định dạng:
cursor: url(đường dẫn đến tập tin hình ảnh dùng làm con trỏ),auto;
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
padding: 50px;
border: 1px solid black;
font-size: 20px;
cursor: url(../image/con-tro-hinh-anh.png), auto;
}
</style>
</head>
<body>
<div>Dí chuột phải đây để xem kiểu con trỏ của phần tử</div>
</body>
</html>
Kết luận
Trên đây là bài viết giới thiệu đến bạn đọc những thông tin hữu ích liên quan đến định dạng kiểu con chuột hiển thị trên website. Chắc hẳn bạn đã học được nhiều điều thú vị và bổ ích qua bài viết này rồi phải không nào?
Để sử dụng thành thạo thuộc tính cursor css bạn cần đầu tư thời gian và công sức để có thể hiểu được các nguyên lý hoạt động cũng như cấu trúc của nó. Việc định dạng kiểu con chuột mang lại nhiều lợi ích cho người dùng và đặc biệt là nó thể hiện sự chuyên nghiệp cho website của bạn.
Chúng tôi hy vọng những thông tin được giới thiệu tại bài viết này mang đến thông tin hữu ích. Nếu bạn đọc có bất kỳ thắc mắc nào có thể liên hệ với chúng tôi để được hỗ trợ. Cảm ơn bạn đọc đã quan tâm theo dõi.
MiraWEB – Tạo website tự động bằng AI trong 30 giây
Các tìm kiếm liên quan đến chủ đề “cursor css là gì”
| Custom cursor | Cursor pointer trong CSS |
| Cursor CSS | Cursor css w3schools |
| Custom cursor CSS | Mouse cursor |
| pointer-events css | Hover CSS là gì |
Bài viết liên quan
Table CSS là gì? Tìm hiểu 03 thuộc tính table trong CSS
Responsive CSS là gì? 5 điều cần biết về Responsive CSS
Transform CSS là gì? Hướng dẫn 3 cách sử dụng 2D CSS Transform
HTML5 là gì? Ưu điểm nổi bật của HTML5
