منذ اختراع لغة ترميز النص التشعبي ، HTML ، تغيرت مفاهيم تخطيط وتخطيط مستندات الويب بشكل كبير. مع الدعم شبه الكامل للمتصفحات الشائعة لمعايير أوراق الأنماط المتتالية CSS و CSS2 ، أصبح من الممكن التأثير تقريبًا على أي جانب من جوانب العرض المرئي للمستند. على سبيل المثال ، يمكنك جعل خلفية الرابط ملونة ، ومليئة ببعض الصور ، وكذلك تغييرها اعتمادًا على إجراءات المستخدم.
ضروري
- - القدرة على تحرير نص المستند أو نص أوراق أنماط المستند ؛
- - محرر نصوص يسمح لك بحفظ المستند بالترميز الأصلي.
تعليمات
الخطوة 1
اجعل خلفية الرابط مملوءة بشكل موحد بلون عشوائي عن طريق إضافة معلومات النمط المضمنة إلى العنصر A. أضف نمطًا إلى سمات العنصر A المقابل للرابط الذي تريد تغيير خلفيته. في محتوى سمة style ، ضع خاصية background-color CSS بالقيمة المحددة ، وهي المعرف الصحيح للون الخلفية. على سبيل المثال ، قد يبدو كالتالي:
نص الارتباط
الخطوة 2
حدد خلفية الارتباط في ورقة أنماط خارجية أو مضمنة في وثيقتك. في ورقة الأنماط المناسبة ، أضف مجموعة من القواعد التي تناولها محدِّد بمستوى مقبول من الخصوصية. في مجموعة القواعد ، أدخل خاصية لون الخلفية بنفس الطريقة كما في الخطوة السابقة. حدد خصوصية المحدد بناءً على قواعد CSS2 المتتالية والنطاق المطلوب. لذلك ، إذا كنت بحاجة إلى تعيين لون رابط واحد فقط ، فمن المنطقي استخدام محدد المعرف ، وإذا كان هناك العديد من هذه الروابط ، فمن الأفضل استخدام محدد السمة بناءً على قيمة الفئة.
على سبيل المثال ، لتعيين خلفية خضراء لارتباط معين في مستند ، يمكنك إضافة مجموعة من القواعد إلى ورقة الأنماط:
أ # ID_GREEN
{
لون الخلفية: # 00FF00 ؛
}
يجب عليك أيضًا تعيين سمة ID للعنصر A المقابل للرابط المطلوب لـ ID_GREEN:
نص الارتباط
الخطوه 3
املأ خلفية الرابط بصورة. اتبع الطرق الموضحة في الخطوتين الأولى والثانية ، ولكن بدلاً من خاصية background-color CSS ، استخدم background-image. فمثلا:
نص الارتباط
إذا لزم الأمر ، أضف خاصية تكرار الخلفية إلى مجموعة قواعد CSS لتحديد خيارات تكرار صورة الخلفية أفقيًا ورأسيًا.
الخطوة 4
قم بإجراء تغيير في خلفية الرابط عند التمرير فوقه أو عندما ينتقل التركيز. أضف مجموعات قواعد إلى ورقة أنماط مستند خارجية أو مضمنة تحدد خلفية ارتباط أو مجموعة روابط في حالات مختلفة. استخدم محددات المعرف والسمات جنبًا إلى جنب مع الفئات الزائفة الديناميكية: hover و: active و: focus. على سبيل المثال ، لكي تكون خلفية ارتباط بقيمة سمة ID ID_DYNAMIC_BACKGROUND حمراء في حالة غير نشطة وخضراء في حالة كونها تحت مؤشر الماوس ، يجب إضافة مجموعات القواعد التالية إلى ورقة الأنماط:
أ # ID_DYNAMIC_BACKGROUND
{
لون الخلفية: # FF0000 ؛
}
A # ID_DYNAMIC_BACKGROUND: قم بالمرور
{
لون الخلفية: # 00FF00 ؛
}
يمكنك فعل الشيء نفسه لإنشاء خلفية مع صورة متغيرة ديناميكيًا.
