يعد تصميم الأزرار على صفحات الويب مكونا مهما لواجهة المستخدم. يؤثر على المظهر العام للموقع ويمكن أن يحسن انطباعه عن الزائر. أحد جوانب تصميم الزر هو اختيار الخط المناسب. في هذه المقالة ، سوف ننظر في كيفية تغيير الخط لزر باستخدام هتمل و كس.
الخطوة 1: إنشاء زر
الخطوة الأولى هي إنشاء زر باستخدام رمز هتمل. للقيام بذلك ، استخدم العلامة وتعيين النص المطلوب داخله. على سبيل المثال:
انقر لي!
الآن زرنا جاهز ، لكنه يستخدم الخط الافتراضي.
الخطوة 2: تغيير الخط باستخدام كس
لتغيير الخط للزر ، يمكننا استخدام كس. أولا ، نحن بحاجة إلى تعيين فئة للزر. على سبيل المثال ، يمكننا استخدام فئة. ثم ، في ملف كس أو داخل العلامة على الصفحة ، يمكننا كتابة التعليمات البرمجية التالية:
في المثال أعلاه ، وضعنا الخط أريال ، بلا الرقيق (بلا الرقيق) ، حجم الخط 16 بكسل وجريئة.
الخطوة 3: تطبيق الفصل على الزر
لتطبيق فئة على الزر الخاص بنا ، أضف سمة الفئة إلى علامة هتمل الخاصة بنا.
ادفعني!
الآن سيكون لدينا زر الخط وضعنا.
في الختام
يمكن أن يؤدي تغيير خط الزر إلى جعل موقع الويب الخاص بك أكثر جاذبية ويساعد في جذب المستخدمين. باستخدام هتمل و كس ، لديك السيطرة الكاملة على تصميم الأزرار على موقعك. لا تخف من تجربة الخطوط والإعدادات المختلفة للعثور على النمط الأنسب للزر الخاص بك.
- كيفية تغيير نمط الخط لزر
- الخطوة 1: فتح الملف برمز الموقع
- الخطوة 2: العثور على فئة الزر
- الخطوة 3: إضافة نمط الخط
- الخطوة 4: حفظ وتحديث الموقع
كيفية تغيير نمط الخط لزر
كس يمكن استخدامها لتغيير نمط الخط من زر في هتمل. فيما يلي بعض الأمثلة:
1. باستخدام النمط المدمج:
ادفعني
في هذا المثال ، استخدمنا نمط كس المدمج باستخدام سمة" النمط". حدد الخط أريال وحدد بلا الرقيق كخط بديل في حالة أريال غير متوفر.
2. باستخدام نمط خارجي مع فئة:
ادفعني
في هذا المثال ، أنشأنا فئة" زر مخصص " داخل العلامة. ثم طبقنا الفصل على الزر لتعيين نمط الخط المطلوب. في هذه الحالة ، يكون الخط فيردانا ، مع سماعة جنيف ، ووزن الخط غامق.
3. استخدام نمط خارجي مع معرف:
ادفعني
هنا استخدمنا معرف "الزر الخاص بي" داخل العلامة. ثم قمنا بتطبيق المعرف على الزر لتعيين نمط الخط المطلوب ، بالإضافة إلى الخلفية والإطار والخصائص الأخرى للزر.
استخدم هذه الأمثلة لتغيير نمط الخط لأزرار هتمل الخاصة بك وإنشاء تصميم فريد لموقع الويب الخاص بك.
الخطوة 1: فتح الملف برمز الموقع
قبل تغيير خط الزر الموجود على موقعك ، تحتاج إلى فتح ملف صفحة الويب المقابلة.
1. حدد أي محرر نصوص على جهاز الكمبيوتر الخاص بك (على سبيل المثال ، المفكرة على ويندوز أو محرر نصوص على ماك).
2. بعد ذلك ، افتح رمز موقعك باستخدام نظام ملفات الكمبيوتر أو محرر التعليمات البرمجية. عادة ، ملفات هتمل لها امتداد.أتش تي أم أل أو .هتم
2. في النافذة التي تفتح ، يتم البحث عن الرمز المتعلق بالزر. ابحث عن العنصر
أو
، والتي قد تحتوي على فئات أو معرفات بجانبها. يتم تحديد الفئات في السمة
| فئة | ، والمعرفات في |
|---|---|
| سمة المعرف |
.
مثال على زر مع فئة
الخط الأسرة
. تتيح لك هذه الخاصية تحديد الخط المطلوب من تلك المتوفرة على جهاز الكمبيوتر الخاص بك.
في رمز هتمل من الزر ، إضافة
سمة النمط
وتحديد قيمة العقار
زر
يمكنك أيضا استخدام خطوط متعددة وتحديدها حسب الأولوية. إذا كان خط واحد غير متوفر على جهاز الكمبيوتر الخاص بالمستخدم ، سيقوم المتصفح تلقائيا بتطبيق الخط التالي من القائمة.
على سبيل المثال ، سوف التعليمات البرمجية التالية تحديد الخط أريال ، وإذا لم يكن متوفرا ، ثم تاهوما:
زر
بهذه الطريقة يمكنك تحديد الخط المناسب للزر الخاص بك وتطبيقه باستخدام خاصية كس
الخط الأسرة
.
الخطوة 4: حفظ وتحديث الموقع