Thuộc tính cursor trong CSS | Xác định kiểu con trỏ trong CSS PDF con tro trong css
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (167.35 KB, 3 trang )
Copyright
©
vietjack.com
Con trỏ trong CSS
Thuộc tính cursor trong CSS giúp bạn xác định kiểu con trỏ hiển thị tới người dùng.
Một cách sử dụng phổ biến của thuộc tính này là sử dụng các hình ảnh làm con trỏ hiển thị
trong các nút submit trên các form. Theo mặc định, khi con trỏ hover qua một link, thì con
trỏ chuột thay đổi từ dạnh con trỏ thành hình dạng một bàn tay.
Bảng dưới đây liệt kê các giá trị mà thuộc tính cursor có thể nhận:−
Giá trị
Miêu tả
auto
Hình dáng của con trỏ phụ thuộc vào context mà nó di chuyển qua. Ví dụ,
dạng một chữ I khi di chuyển qua văn bản hay một bàn tay khi di chuyển qua
một link, ….
crosshair
Dạng crosshair hoặc dấu cộng
default
Một mũi tên
pointer
Hình dạng một bàn tay
move
Thanh I
e-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
ne-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
nw-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
n-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
Trang
chia
sẻ
các
bài
học
online
miễn
phí
Copyright
©
vietjack.com
se-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
sw-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
s-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
w-resize
Hình dáng con trỏ hiển thị rằng khi con trỏ chuột di chuyển vào cạnh của một
hộp thì người dùng có thể kéo để thay đổi kích cỡ hộp
text
Thanh I
wait
Hình dáng giống chiêc đồng hồ cát, chỉ rằng đang chờ xử lý
help
Một dấu chấm hỏi (?), sử dụng giá trị này cho các nút Help
<url>
Nguồn tới file chứa hình ảnh con trỏ
Ghi chú: Bạn nên thực hành với từng giá trị thuộc tính trên để đỡ nhầm lần trong khi sử
dụng và cũng giúp cho bạn hiển thị hình dáng con trỏ chuột thích hợp tới người sử dụng.
Chẳng hạn, nếu một người sử dụng di chuyển chuột vào một link, bạn lại hiển thị con trỏ
chuột dạng đồng hồ cát mà biểu thị rằng đang chờ xử lý, thì đó là sự nhầm lẫn khá khôi
hài.
Dưới đây là ví dụ minh họa cách sử dụng các giá trị của thuộc tính cursor trong CSS.
<html>
<head>
</head>
<body>
Di chuyen con tro chuot qua
cac phan text sau de thay cac hinh dang con tro khac nhau:
<div style="cursor:auto">Gia tri auto</div>
<div style="cursor:move">Gia
tri move</div>
<div style="cursor:e-resize">Gia tri e-resize</div>
<div style="cursor:ne-resize">Gia tri ne-resize</div>
<div style="cursor:nresize">Gia tri n-resize</div>
<div style="cursor:se-resize">Gia tri seresize</div>
<div style="cursor:sw-resize">Gia tri sw-resize</div>
Trang
chia
sẻ
các
bài
học
online
miễn
phí
Copyright
©
vietjack.com
<div style="cursor:s-resize">Gia tri s-resize</div>
<div style="cursor:wresize">Gia tri w-resize</div>
<div style="cursor:text">Gia tri
text</div>
<div style="cursor:wait">Gia tri wait</div>
</body>
</html>
Kết quả là:
Di chuyen con tro chuot qua cac phan text sau de thay cac hinh dang con tro
khac nhau:
Gia tri auto
Gia tri crosshair
Gia tri default
Gia tri pointer
Gia tri move
Gia tri e-resize
Gia tri ne-resize
Gia tri nw-resize
Gia tri n-resize
Gia tri se-resize
Gia tri sw-resize
Gia tri s-resize
Gia tri w-resize
Gia tri text
Gia tri wait
Gia tri help
Trang
chia
sẻ
các
bài
học
online
miễn
phí
