מה זה סמנים ב-CSS?
בכל יום, אנו כבר משתמשים בסמנים מותאמים אישית. אינטראקציה זו מתאפשרת על ידי שימוש בסמנים שהשתנו, כגון כאשר אתה מרחף מעל לחצנים, סמן המצביע הופך ליד, או כאשר אתה מרחף מעל הטקסט והסמן הופך לסמן טקסט.
עם זאת, סמנים עשויים לשמש גם כדי לתת למשתמשים שלנו הזדמנויות יצירתיות נוספות שונות.
עלינו להיות מודעים לכך של-CSS כבר יש סמני ברירת מחדל עבור פעולות שונות שנעשו לעתים קרובות לפני שאנו מתחילים לפתח את הסמנים המותאמים אישית שלנו.
סמנים אלה מספקים אפשרויות פעולה בנקודה המדויקת שאתה מרחף מעליו. דוגמאות כוללות סמנים המציינים שעליך ללחוץ על קישורים, גרירה ושחרור של אלמנטים, הגדלה והקטנה של אובייקטים ועוד.
השתמש במאפיין CSS cursor כדי לתאר את סוג הסמן שאתה רוצה.
מאפיין סמן CSS
אנו עשויים לציין את סוג הסמן שיש להציג למשתמש באמצעות מאפיין הסמן CSS.
שימוש בתמונות כלחצני הגשה בטפסים הוא יישום שימושי של יכולת זו. כברירת מחדל, יד מופיעה במקום מצביע כאשר הסמן נמצא מעל קישור. עם זאת, כפתור השליחה של טופס אינו גורם לו לשנות את הטופס. זה משמש כרמז ויזואלי לכך שניתן ללחוץ על התמונה בכל פעם שמישהו מרחף מעל תמונה שהיא כפתור שליחה.
מאפיין זה מצוין על ידי אפס או יותר ערכים מופרדים בפסיקים, ואחריו ערך מילת מפתח אחד לפי הצורך, וכל אחד מהם יפנה לקובץ התמונה.
תחביר
cursor: value;
ערך הנכס
| אוטומטי: | הגדרת ברירת המחדל עבור תכונה זו היא הצבת הסמן.
| כינוי: | תכונה זו משמשת להצגת המחוון הקשור ליצירה של הסמן.
| כל הגלילה: | הסמן בתכונה זו מציין גלילה.
| תָא: | הסמן במאפיין זה מציין שתא או קבוצת תאים נבחרים כעת.
| תפריט הקשר: | הסמן בתכונה זו מציג את נוכחותו של תפריט הקשר.
| שינוי גודל: | כאשר הסמן נמצא מעל עמודה במאפיין זה, ניתן לשנות את גודלו אופקית.
| עותק: | הסמן במאפיין זה מציין שיש להעתיק משהו.
| צלבה: | הסמן מופיע ככוונת בתכונה זו.
| בְּרִירַת מֶחדָל: | סמן ברירת המחדל.
| שינוי גודל אלקטרוני: | הסמן בתכונה זו מציין שיש להזיז את הקצה הימני של התיבה.
| שינוי גודל: | הסמן בתכונה זו מייצג סמן לשינוי גודל דו-כיווני.
| עֶזרָה: | במאפיין זה, הסמן מראה שהסיוע נגיש.
| מהלך לזוז לעבור: | המצביע במאפיין זה מרמז שיש להזיז משהו
| . n-שינוי גודל: | בעת שימוש במאפיין n-resize, המצביע מראה שיש להזיז את הגבול העליון של תיבה.
| מה לשנות גודל: | עם מאפיין זה, הסמן מראה שיש להזיז את קצה התיבה ימינה ולמעלה.
| שינוי גודל חדש: | סמן שינוי הגודל הדו-כיווני מסומן על ידי תכונה זו.
| שינוי גודל Ns: | סמן שינוי גודל דו-כיווני מסומן על ידי התכונה ns-resize.
| Nw-שינוי גודל: | הסמן בתכונה זו מראה שיש להזיז את הקצוות העליונים והתחתונים של תיבה למעלה ולשמאל.
| שינוי גודל האף: | סמן שינוי הגודל הדו-כיווני מסומן על ידי תכונה זו.
| ללא ירידה: | הסמן בתכונה זו מציין שלא ניתן לזרוק את האובייקט שנמשך במיקום זה.
| אף אחד: | סמן לא מוצג עבור הרכיב לפי תכונה זו.
| לא מורשה: | הסמן במאפיין זה מציין שהפעולה המבוקשת לא תתבצע.
| מַצבִּיעַ: | הסמן במאפיין זה משמש כמצביע ומציג את התקדמות הקישור.
| התקדמות: | הסמן בתכונה זו מראה שהתוכנית פעילה.
| שינוי גודל שורה: | הסמן מראה שתכונה זו מאפשרת שינוי גודל שורה אנכית.
| שינוי גודל S: | בעת שימוש במאפיין זה, המצביע מראה שיש להוריד את הגבול התחתון של תיבה.
| שינוי גודל: | הסמן בתכונה זו מציין שיש להזיז את קצה התיבה ימינה ולמטה.
| שינוי גודל Sw: | הסמן בתכונה זו מציין שיש להזיז את הקצוות השמאליים והתחתונים של תיבה.
| טֶקסט: | הסמן בתכונה זו מציין טקסט שניתן לבחור.
| כתובת אתר: | מאפיין זה מכיל רשימה של כתובות אתרים מותאמות אישית של סמן מופרדות בפסיקים וסמן גנרי בסוף הרשימה.
| טקסט אנכי: | הסמן בתכונה זו מציג אפשרויות אפשריות של טקסט אנכי.
| שינוי גודל W: | בעת שימוש במאפיין זה, המצביע מראה שיש להזיז את הקצה השמאלי של תיבה.
דוגמא
דוגמה זו מראה כיצד להשתמש במאפיין הסמן. התוכנית תפוסה מכיוון שהערך של מאפיין הסמן מוגדר להמתין.
CSS cursor property .wait { cursor: wait; } h1 { color: red; } <p> Login Credentials </p> תְפוּקָה
אנו עשויים לציין את סוג הסמן שיש להציג למשתמש באמצעות מאפיין הסמן CSS. שימוש בתמונות כלחצני הגשה בטפסים הוא יישום שימושי של יכולת זו. כברירת מחדל, יד מופיעה במקום מצביע כאשר הסמן נמצא מעל קישור.
