הסמן מציין את המיקום על המסך שבו המשתמש יכול ללחוץ או להזין טקסט. יכולים להיות סמנים שונים המשמשים עבור רכיבי אתר שונים. מפתח חייב לוודא שהסמנים המשמשים באפליקציה חייבים להיות אטרקטיביים. לדוגמה, ניתן להשתמש בסמן יד מצביע על הכפתור בעת ריחוף עם העכבר. מחוון הטקסט (קו מהבהב) משמש בתיבת הטקסט שבה יש להזין את הטקסט.
ישנם מספר סגנונות סמן ב-CSS המשמשים רק על ידי ציון הערך של מאפיין הסמן. עם זאת, מפתח יכול ליצור סמן מותאם אישית באמצעות CSS.
מדריך לימוד זה יספק על:
-
- סמן CSS
- CSS סמן מותאם אישית
לפני שנתקל בנושא, בואו נראה כמה מצורות סמן CSS עם דוגמה מעשית.
סמן CSS
ה-CSS ' סַמָן למאפיין יש ערכים שונים, כגון מצביע, אין, התקדמות ועוד. בואו ניצור טבלה המכילה שורות שעליהן יוצגו סמנים שונים בעת ריחוף העכבר.
דוגמה: יצירת טבלה המייצגת סמני CSS שונים ב-HTML
ראשית, הוסף את האלמנט
| . תגי | |||
|---|---|---|---|
כדי לאכלס את העמודות בנתונים.
| השני מייצג את רכיבי הכפתור המוחלים עם CSS ' סַמָן ” נכס בעל ערכים שונים.
| קוד ה-HTML עבור התרחיש הנ'ל ניתן להלן: < שולחן >< tr > < ה' סִגְנוֹן = 'רוחב: 200px;' > בורר סמן css ה' > < ה' סִגְנוֹן = 'רוחב: 200px;' > סגנון הסמן ה' > tr > < tr > < td > סמן: מצביע td > < td >< לַחְצָן סִגְנוֹן = 'סמן: מצביע;' > מַצבִּיעַ לַחְצָן > td > tr > < tr > < td > סמן: התקדמות td > < td >< לַחְצָן סִגְנוֹן = 'סמן: התקדמות;' > התקדמות לַחְצָן > td > tr > < tr > < td > סמן: אסור td > < td >< לַחְצָן סִגְנוֹן = 'סמן: לא-מותר;' > לא מורשה לַחְצָן > td > tr > < tr > < td > סמן: אין td > < td >< לַחְצָן סִגְנוֹן = 'סמן: אין;' > אף אחד לַחְצָן > td > tr > < tr > < td > סמן: הזז td > < td >< לַחְצָן סִגְנוֹן = 'סמן: זז;' > מהלך \ לזוז \ לעבור לַחְצָן > td > tr > < tr > < td > סמן: לתפוס td > < td >< לַחְצָן סִגְנוֹן = 'סמן: לתפוס;' > לִתְפּוֹס לַחְצָן > td > tr > < tr > < td > סמן: העתקה td > < td >< לַחְצָן סִגְנוֹן = 'סמן: העתקה;' > עותק לַחְצָן > td > tr > < tr > < td > סמן: שינוי גודל בצבע td > < td >< לַחְצָן סִגְנוֹן = 'סמן: שינוי גודל צבע;' > לשנות את גודל הצבע לַחְצָן > td > tr > < tr > < td > סמן: שינוי גודל שורה td > < td >< לַחְצָן סִגְנוֹן = 'סמן: שינוי גודל שורה;' > שינוי גודל שורה לַחְצָן > td > tr > < tr > < td > סמן: טקסט td > < td >< לַחְצָן סִגְנוֹן = 'סמן: טקסט;' > טֶקסט לַחְצָן > td > tr > שולחן > סגנון 'כל' האלמנטים * {ריפוד: 0 ; שולים: 0 ; משפחת גופנים: Arial, Helvetica, sans-serif; }
סגנון 'שולחן' אלמנט שולחן {שוליים: 0px אוטומטי; border: 1px solid gainsboro; }
' שולים ' מאפיין מתנהג כמפורט לעיל. סגנון 'td' אלמנט td {יישור טקסט: מרכז; } מוחל עם המאפיין ' יישור טקסט 'עם הערך' מֶרְכָּז '. זה יישר את הטקסט של העמודה במרכז.
| אלמנט 'כפתור' בסגנון לַחְצָן {צבע רקע: כחול צוער; ריפוד: 10px 10px; צֶבַע: #ffffff; רוחב: 150 פיקסלים; }
הקוד לעיל יפיק את התוצאה הבאה: CSS סמן מותאם אישיתהמפתחים חייבים להשתמש בסמנים מתאימים ליישומים שלהם. יש להפוך את הסמנים לאטרקטיביים כדי למשוך את תשומת הלב של המשתמשים. יתר על כן, ניתן ליצור את הסמן המותאם אישית למטרה זו. תסתכל על הדוגמה למטה! דוגמה: כיצד ליצור סמן מותאם אישית עם CSS? ב-HTML, הוסף שני רכיבי div. אחד עם הכיתה' מעגל ' והשני עם הכיתה ' נְקוּדָה '. HTML < div מעמד = 'מעגל' > div >< div מעמד = 'נְקוּדָה' > div > אלמנט 'גוף' בסגנון גוּף {גובה: 100Vh; } סגנון 'מעגל' div .מעגל {רוחב: 20 פיקסלים; גובה: 20 פיקסלים; גבול: 2 פיקסלים לבן מלא; רדיוס הגבול: חמישים % ; }
סגנון 'נקודה' div .נְקוּדָה {רוחב: 5 פיקסלים; גובה: 5 פיקסלים; צבע רקע: לבן; רדיוס הגבול: חמישים % ; }
הקוד הנתון יציג את הסמן הבא בדף האינטרנט: JavaScript < תַסרִיט >const cursorCircle = document.querySelector ( '.מעגל' ) ; const cursorPoint = document.querySelector ( '.נְקוּדָה' ) ; const moveCursor = ( ו ) = > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` לתרגם ( ${mouseX} px, ${mouseY} פיקסלים ) ` ; cursorPoint.style.transform = ` לתרגם ( ${mouseX} px, ${mouseY} פיקסלים ) ` ; } window.addEventListener ( 'הזז עכבר' , העבר את הסמן ) תַסרִיט >
לאחר מתן קוביות הקוד לעיל, הסמן ינוע אוטומטית על המסך כפי שמוצג להלן: סיכוםה-CSS ' סַמָן למאפיין יש ערכים רבים המציינים סגנונות שונים של סמן. עם זאת, על ידי שימוש ברכיבי HTML ומאפייני CSS, אנו יכולים ליצור סמנים מותאמים אישית. לאחר מכן, קוד JavaScript מיושם כדי להפעיל את הפונקציונליות שלו. מחקר זה הדגים כיצד ליצור סמני CSS מותאמים אישית עם דוגמה מעשית. |
