۲
فروردین

جلسه ۸۵ : آموزش کار با ویژگی cursor در CSS

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته با counter-reset آشنا شدیم؛ ویژگی counter-reset به ساخت یا بازنشانی یک یا چند counters در CSS می پردازد.
در این جلسه آموزش کار با ویژگی cursor در CSS را ارئه می نماییم.

فهرست

آموزش کار با ویژگی cursor در CSS

به مثال زیر توجه نمایید؛ در این مثال CSS می تواند مجموعه ای از مکان های مختلف را برای مکان نمای ماوس مشخص شده است.

مثال :

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.context-menu {cursor: context-menu;}

.col-resize {cursor: col-resize;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

.pointer {cursor: pointer;}

.progress {cursor: progress;}

.row-resize {cursor: row-resize;}

.s-resize {cursor: s-resize;}

.se-resize {cursor: se-resize;}

.sw-resize {cursor: sw-resize;}

.text {cursor: text;}

.url {cursor: url(myBall.cur),auto;}

.w-resize {cursor: w-resize;}

.wait {cursor: wait;}

.zoom-in {cursor: zoom-in;}

.zoom-out {cursor: zoom-out;}

تعریف و کاربرد

ویژگی cursor نشانگر ماوس را نشان می دهد که هنگام اشاره به یک عنصر نشان داده می شود.

مقدار پیش فرض	auto
به ارث بردن	بله
متحرک بودن	خیر
نسخه	CSS2
سینتکس JavaScript	“object.style.cursor=”crosshair

پشتیبانی مرورگر ها

در ادامه آموزش کار با ویژگی cursor در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.

نام ویژگی
cursor	۵٫۰	۴٫۰	۹٫۶	۵٫۰	۵٫۵

سینتکس CSS

مثال :

cursor: value;

1	cursor: value;

مقدار ویژگی

در ادامه آموزش کار با ویژگی cursor در CSS شما را با مقادیر این ویژگی آشنا می کنیم.

مقدار	توضیحات
alias	مکان نما نام چیزی را که قرار است ایجاد شود به صورت نام alias یا نام مستعار نمایش می دهد.
all-scroll	مکان نما قابلیت پیمایش را نشان می دهد.
auto	پیش فرض است – مرورگر یک مکان نما را تنظیم می کند.
cell	مکان نما نشان می دهد که ممکن است یک سلول (یا مجموعه ای از سلول ها) انتخاب شود.
context-menu	مکان نما نشان می دهد که یک فهرست زمینه در دسترس است.
col-resize	مکان نما نشان می دهد که ستون را می توان به صورت افقی تغییر اندازه داد.
copy	مکان نما نشان می دهد که چیزی کپی می شود.
crosshair	مکان نما به عنوان crosshair ارائه می شود.
default	مکان نمای پیش فرض
e-resize	مکان نما نشان می دهد که یک لبه کادر باید به سمت راست منتقل شود. e مخفف east است.
ew-resize	نشانگر اندازه دو طرفه را نشان می دهد.
grab	مکان نما نشان می دهد که چیزی را می توان گرفت.
grabbing	مکان نما نشان می دهد که چیزی را می توان گرفت.
help	مکان نما نشان می دهد که بخش help در دسترس است.
move	مکان نما نشان می دهد که باید چیزی منتقل شود.
n-resize	مکان نما نشان می دهد که لبه یک کادر قرار است به سمت بالا (north) منتقل شود.
ne-resize	مکان نما نشان می دهد که لبه یک کادر باید به سمت بالا و راست (north/east) منتقل شود
nesw-resize	نشانگر اندازه دو طرفه را نشان می دهد.
ns-resize	نشانگر اندازه دو طرفه را نشان می دهد.
nw-resize	مکان نما نشان می دهد که لبه یک کادر باید به سمت بالا و سمت چپ (north/west) منتقل شود.
nwse-resize	نشانگر اندازه دو طرفه را نشان می دهد.
no-drop	مکان نما نشان می دهد که مورد کشیده شده را نمی توان در اینجا رها (here) کرد.
none	هیچ مکان نمایی برای عنصر ارائه نمی شود.
not-allowed	مکان نما نشان می دهد که عمل درخواست شده اجرا نمی شود.
pointer	مکان نما نشانگر است و یک لینک را نشان می دهد.
progress	مکان نما نشان می دهد که این برنامه مشغول کاری است (در حال انجام کار است).
row-resize	مکان نما نشان می دهد که ردیف را می توان به صورت عمودی تغییر اندازه داد.
s-resize	مکان نما نشان می دهد که لبه یک کادر قرار است به سمت پایین (south) منتقل شود.
se-resize	مکان نما نشان می دهد که لبه یک کادر قرار است به پایین و راست (south/east) منتقل شود.
sw-resize	مکان نما نشان می دهد که لبه یک کادر قرار است به سمت پایین و سمت چپ (south/west) منتقل شود.
text	مکان نما متن را نشان می دهد که ممکن است انتخاب شود.
URL	لیستی از آدرس های اینترنتی با کاما از مکان نماهای سفارشی جدا می شود. نکته: در صورت عدم استفاده از هیچ یک از مکان نماهای تعریف شده با URL، همیشه یک نشانگر عمومی در انتهای لیست مشخص کنید.
vertical-text	مکان نما نشانگر متن عمودی است که ممکن است انتخاب شود.
w-resize	مکان نما نشان می دهد که لبه کادر باید به سمت چپ منتقل شود (west)
wait	مکان نما نشان می دهد که این برنامه مشغول کار است.
zoom-in	مکان نما نشان می دهد که می توان چیزی را در حالت بزرگ نمایی مشاهده کرد.
zoom-out	مکان نما نشان می دهد که می توان چیزی را در حالت کوچک نمایی مشاهده کرد.
initial	ویژگی را به مقدار پیش فرض خود تنظیم می کند.
inherit	این ویژگی را از عنصر parent خود به ارث می برد.

کلام آخر

در این جلسه به آموزش کار با ویژگی cursor در CSS پرداختیم. این ویژگی نشانگر ماوس را نشان می دهد که هنگام اشاره به یک عنصر نشان داده می شود.
در جلسه آینده قرار است به ویژگی direction بپردازیم.
با پی وی لرن همراه باشید.

QR: جلسه ۸۵ : آموزش کار با ویژگی cursor در CSS

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۸۵ : آموزش کار با ویژگی cursor در CSS

آموزش کار با ویژگی cursor در CSS

تعریف و کاربرد

پشتیبانی مرورگر ها

سینتکس CSS

مقدار ویژگی

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ