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