مؤشر CSS مخصص

Mwshr Css Mkhss



يشير المؤشر إلى الموضع على الشاشة حيث يمكن للمستخدم النقر فوق النص أو إدخاله. يمكن أن تكون هناك مؤشرات مختلفة مستخدمة لمكونات مختلفة لموقع الويب. يجب على المطور التأكد من أن المؤشرات المستخدمة في التطبيق يجب أن تكون جذابة. على سبيل المثال ، يمكن استخدام مؤشر يد التأشير على الزر الموجود على مؤشر الماوس. يتم استخدام مؤشر النص (الخط الوامض) في مربع النص حيث سيتم إدخال النص.

هناك العديد من أنماط المؤشر في CSS يتم استخدامها فقط من خلال تحديد قيمة خاصية المؤشر. ومع ذلك ، يمكن للمطور إنشاء مؤشر مخصص باستخدام CSS.







سيوفر دليل الدراسة هذا ما يلي:



    • مؤشر CSS
    • مؤشر مخصص CSS

قبل الالتقاء بالموضوع ، دعنا نرى بعض أشكال مؤشر CSS مع مثال عملي.



مؤشر CSS

CSS ' المؤشر 'تحتوي الخاصية على قيم مختلفة ، مثل المؤشر ، ولا شيء ، والتقدم ، والمزيد. لنقم بإنشاء جدول يحتوي على صفوف تظهر عليها مؤشرات مختلفة عند تمرير الماوس.





مثال: إنشاء جدول يمثل مؤشرات CSS مختلفة في HTML

أولاً ، أضف عنصر

في HTML. داخل هذا العنصر:



    • سيتم استخدام علامة
لإنشاء صفوف.
  • يحتوي الصف الأول على العناوين.
  • يتم تحديد هذه العناوين من خلال استخدام علامات
  • الأخرى على علامتي
    . تحتوي علامات
    لملء الأعمدة بالبيانات.
  • تمثل العلامة
  • الثانية عناصر الأزرار التي يتم تطبيقها مع CSS ' المؤشر 'ذات قيم مختلفة.

    فيما يلي رمز HTML للسيناريو أعلاه:

    < الطاولة >
    < آر >
    < العاشر نمط = 'العرض: 200 بكسل ؛' > محدد مؤشر css العاشر >
    < العاشر نمط = 'العرض: 200 بكسل ؛' > نمط المؤشر العاشر >
    آر >
    < آر >
    < td > المؤشر: المؤشر td >
    < td > < زر نمط = 'المؤشر: المؤشر' > المؤشر زر > td >
    آر >
    < آر >
    < td > المؤشر: التقدم td >
    < td > < زر نمط = 'المؤشر: التقدم' > تقدم زر > td >
    آر >
    < آر >
    < td > المؤشر: غير مسموح به td >
    < td > < زر نمط = 'المؤشر: غير مسموح به ؛' > غير مسموح زر > td >
    آر >
    < آر >
    < td > المؤشر: لا شيء td >
    < td > < زر نمط = 'المؤشر: لا شيء ؛' > لا أحد زر > td >
    آر >
    < آر >
    < td > المؤشر: تحرك td >
    < td > < زر نمط = 'المؤشر: نقل' > يتحرك زر > td >
    آر >
    < آر >
    < td > المؤشر: انتزاع td >
    < td > < زر نمط = 'المؤشر: انتزاع' > إختطاف زر > td >
    آر >
    < آر >
    < td > المؤشر: نسخ td >
    < td > < زر نمط = 'المؤشر: نسخ ؛' > ينسخ زر > td >
    آر >
    < آر >
    < td > المؤشر: col-resize td >
    < td > < زر نمط = 'cursor: col-resize؛' > حجم العمود زر > td >
    آر >
    < آر >
    < td > المؤشر: صف تغيير الحجم td >
    < td > < زر نمط = 'cursor: row-resize؛' > صف تغيير الحجم زر > td >
    آر >
    < آر >
    < td > المؤشر: نص td >
    < td > < زر نمط = 'المؤشر: نص ؛' > نص زر > td >
    آر >
    الطاولة >


    سيولد الرمز أعلاه النتيجة التالية:


    في القسم التالي ، سنطبق أنماطًا مختلفة على عناصر HTML.

    نمط 'جميع' العناصر

    * {
    حشوة: 0 ؛
    حافة: 0 ؛
    عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛
    }


    يتم تطبيق جميع عناصر HTML باستخدام أنماط CSS الموضحة أدناه:

      • ' حشوة 'الملكية مع' 0 'لا تحتوي على مسافة حول محتوى العنصر.
      • ' حافة 'الملكية مع' 0 'لا تضيف أي مساحة خارج كل عنصر.
      • ' خط العائلة 'يتم تعيين قيمة للخاصية' Arial، Helvetica، sans-serif '. يتم توفير قائمة أنماط الخطوط للتأكد من عدم دعم النمط الأول بواسطة المستعرض ، يجب تطبيق الأنماط الأخرى.

    عنصر نمط 'الجدول'

    الطاولة {
    الهامش: 0px auto؛
    الحدود: مكاسب صلبة 1 بكسل ؛
    }


    يتم تطبيق عنصر جدول HTML مع خصائص CSS الموضحة أدناه:

      • ' الحدود 'مع القيمة' 1 بكسل مكاسب صلبة 'الذي يمثل عرض الحدود ونمط الحد ولون الحد على التوالي.

    ' حافة 'تتصرف على النحو المحدد أعلاه.

    عنصر النمط 'td'

    td {
    محاذاة النص: مركز ؛
    }


    يتم تطبيق العنصر

    مع الخاصية ' محاذاة النص 'بالقيمة' المركز '. سيتم محاذاة نص العمود في المركز.

    عنصر نمط 'زر'

    زر {
    لون الخلفية: cadetblue.
    الحشو: 10 بكسل 10 بكسل ؛
    اللون: #ffffff ؛
    العرض: 150 بكسل ؛
    }


    تم تصميم عنصر الزر المستخدم في كود HTML أعلاه بخصائص CSS الجديدة الموضحة أدناه:

      • ' لون الخلفية 'لون خلفية العنصر.
      • ' حشوة 'مع القيم المعينة كـ' 10 بكسل 10 بكسل 'مساحة 10 بكسل في الجزء العلوي-السفلي و 10 بكسل في الجانب الأيسر-الأيمن لعناصر العنصر.
      • ' اللون 'يضبط لون خط العنصر.
      • ' العرض 'هي الخاصية التي تضبط عرض العنصر.

    سيولد الرمز أعلاه النتيجة التالية:


    لقد ناقشنا حتى الآن المؤشرات التي توفرها CSS. في القسم التالي ، سيصف المثال كيفية إنشاء مؤشر مخصص باستخدام CSS.

    مؤشر مخصص CSS

    يجب على المطورين استخدام مؤشرات مناسبة لتطبيقاتهم. يجب أن تكون المؤشرات جذابة لجذب انتباه المستخدمين. علاوة على ذلك ، يمكن إنشاء المؤشر المخصص لهذا الغرض.

    انظر للمثال ادناه!

    مثال: كيفية إنشاء مؤشر مخصص باستخدام CSS؟

    في HTML ، أضف عنصري div. واحد مع الفصل ' دائرة 'والآخر مع الفصل' نقطة '.

    لغة البرمجة

    < شعبة صف دراسي = 'دائرة' > شعبة >
    < شعبة صف دراسي = 'نقطة' > شعبة >


    دعنا ننتقل إلى قسم CSS.

    عنصر نمط 'الجسم'

    الجسم {
    الارتفاع: 100 فولت
    }


    يتم تطبيق عنصر النص الأساسي لملف HTML بالنمط ' ارتفاع 'لتعيين ارتفاع العنصر.

    نمط 'دائرة' div

    .دائرة {
    العرض: 20 بكسل ؛
    الارتفاع: 20 بكسل ؛
    الحدود: 2 بكسل بيضاء صلبة ؛
    نصف قطر الحد: خمسون ٪ ؛
    }


    فيما يلي شرح لخصائص CSS التي يتم تطبيقها على عنصر div الذي له فئة ' دائرة ':

      • ' العرض 'تضبط عرض العنصر.
      • ' الحدود 'بالقيمة المحددة كـ' 2 بكسل أبيض صلب 'يمثل عرض الحد ونمطه ولونه.
      • ' نصف قطر الحد 'تغير الجولة الحدودية للعنصر.

    أسلوب 'نقطة' div

    .نقطة {
    العرض: 5 بكسل ؛
    الارتفاع: 5 بكسل ؛
    لون الخلفية: أبيض؛
    نصف قطر الحد: خمسون ٪ ؛
    }


    يتم تزويد عنصر div بنقطة الفئة بخصائص مختلفة موضحة أدناه:

      • ' لون الخلفية 'لون خلفية العنصر.
      • ' نصف قطر الحد 'يحدد حواف العنصر مستديرة.
      • ستعمل الخصائص الأخرى بنفس الطريقة التي تمت مناقشتها.

    سيعرض الرمز المحدد المؤشر التالي على صفحة الويب:


    لقد أنشأنا المؤشر باستخدام HTML و CSS. الآن ، في القسم التالي ، تمت كتابة كود JavaScript لإضافة الوظائف المطلوبة إلى المؤشر.

    جافا سكريبت

    < النصي >
    const cursorCircle = document.querySelector ( '.دائرة' ) ؛
    const cursorPoint = document.querySelector ( '.نقطة' ) ؛
    const moveCursor = ( و ) = > {
    const mouseY = e.clientY ؛
    const mouseX = e.clientX ؛

    cursorCircle.style.transform = ' ترجمة ( $ {mouseX} بكسل ، $ {mouseY} مقصف ) ' ؛
    cursorPoint.style.transform = ' ترجمة ( $ {mouseX} بكسل ، $ {mouseY} مقصف ) ' ؛
    }
    window.addEventListener ( 'تحرك الماوس' ، moveCursor )
    النصي >


    فيما يلي وصف كود JavaScript أعلاه:

      • ' ، والتي تُستخدم لكتابة كود JavaScript.
      • ' مقدار ثابت 'الكلمة الأساسية تحدد أن الكلمة الأساسية const متبوعة بالمتغير لا يمكن إعادة تعيينها.
      • ' document.querySelector ('. دائرة') 'إرجاع عنصر div الدائرة الذي يطابق المحدد المحدد في المستند.
      • ' document.querySelector ('. point') 'إرجاع عنصر div النقطي الذي يطابق المحدد المحدد في المستند.
      • ' const moveCursor = (e) => تحدد هذه الوظيفة وظيفة المؤشر.
      • ' هاء العميل 'إرجاع الإحداثي الرأسي عند تشغيل حدث الماوس.
      • ' e.clientX 'إرجاع الإحداثي الأفقي عند تشغيل حدث الماوس.
      • ' cursorCircle.style.transform يتم تطبيق دائرة div مع أسلوب التحويل.
      • ' cursorPoint.style.transform يتم تطبيق النقطة div مع أسلوب التحويل.
      • ' ترجمة ($ {mouseX} بكسل، $ {mouseY} بكسل) 'قيمة خاصية التحويل تحدد الإحداثيات الأفقية والرأسية.
      • ' window.addEventListener ('الماوس' ، moveCursor) 'يستمع أسلوب مستمع الحدث إلى حركة الماوس. إنه جزء من كائن النافذة العالمية.

    بعد توفير الكتل البرمجية أعلاه ، سيتحرك المؤشر تلقائيًا على الشاشة كما هو موضح أدناه:


    هذا بارد! لقد أنشأنا مؤشرًا مخصصًا بخصائص CSS مختلفة.

    استنتاج

    CSS ' المؤشر 'تحتوي الخاصية على العديد من القيم التي تشير إلى أنماط المؤشر المختلفة. ومع ذلك ، من خلال استخدام عناصر HTML وخصائص CSS ، يمكننا إنشاء مؤشرات مخصصة. بعد ذلك ، يتم تنفيذ كود JavaScript لتنشيط وظائفه. أوضحت هذه الدراسة كيفية إنشاء مؤشرات CSS مخصصة مع مثال عملي.