يعد لون نص الرابط على صفحة الويب جانبا مهما من التصميم الذي يمكن أن يجذب انتباه المستخدمين ويخلق التأثير المطلوب. غالبا ما يرغب مطورو الويب في تغيير لون نص الرابط لمطابقة نظام الألوان وموضوع موقع الويب الخاص بهم. في هذه المقالة ، سننظر في طرق مختلفة لتغيير لون نص الرابط باستخدام كس.
واحدة من أسهل الطرق لتغيير لون نص الارتباط هو استخدام خاصية اللون في كس. تتيح لك هذه الخاصية تعيين لون نص الارتباط. على سبيل المثال ، لتغيير لون نص الارتباط إلى اللون الأحمر ، يمكنك استخدام رمز كس التالي:
أ {اللون: أحمر;
}
بالإضافة إلى ذلك ، يمكن تصميم الرابط لحالات مختلفة ، مثل التمرير والحالة النشطة والرابط الذي تمت زيارته. على سبيل المثال ، إذا كنت تريد تغيير لون نص الارتباط عند التمرير فوقه ، فيمكنك استخدام الفئة الزائفة :التمرير. في ما يلي مثال على رمز كس الذي سيغير لون نص الارتباط إلى اللون الأحمر عند تحريك المؤشر فوقه:
يمكن أيضا استخدام فئات زائفة أخرى ، مثل: نشط للحالة النشطة و :تمت زيارة الروابط التي تمت زيارتها لتغيير لون نص الارتباط للحالات المقابلة.
- كيفية تغيير لون نص الارتباط في كس
- أساسيات المغلق وصلة التصميم
- استخدام الفئات والمعرفات
- استخدام الفئات الزائفة لتغيير لون الارتباط
- تغيير لون الرابط عند التمرير فوق المؤشر
- استخدام أنماط مدمجة لتغيير لون الارتباط
- سؤال وجواب
- الذي السمة في المغلق يسمح لك لتغيير لون نص الرابط?
- كيف يمكنني تغيير لون نص الرابط عند التمرير فوقه?
- هل من الممكن تغيير لون نص الرابط في ظل ظروف مختلفة (النقر ، الرابط الذي تمت زيارته ، إلخ.)?
كيفية تغيير لون نص الارتباط في كس
يمكن أن يكون تغيير لون نص الرابط في كس مفيدا لإنشاء مظهر منمق وفريد لموقعك على الويب.
هناك عدة طرق لتغيير لون نص الارتباط في كس:
- استخدام خاصية اللون في كس:
- باستخدام الفئة الزائفة: رابط:
- باستخدام الطبقة الزائفة: زار:
- باستخدام الفئة الزائفة: تحوم:
| محدد | مثال |
|---|---|
| } | يغير لون نص الرابط داخل الفقرات إلى اللون الأحمر. |
| } | يغير لون نص الارتباط في قائمة العلامات إلى اللون الأزرق. |
| محدد | مثال |
|---|---|
| } | يغير لون النص لجميع الروابط غير المرغوب فيها إلى اللون الأرجواني. |
| محدد | مثال |
|---|---|
| } | يغير لون نص الروابط التي تمت زيارتها إلى اللون الأخضر. |
| محدد | مثال |
|---|---|
| } | يغير لون نص الارتباط عندما يحوم المؤشر فوقه إلى اللون البرتقالي. |
باستخدام هذه الأساليب ، يمكنك بسهولة تغيير لون نص الرابط في كس وإنشاء تصميم فريد لموقع الويب الخاص بك.
أساسيات المغلق وصلة التصميم
لا يشمل تطوير الويب إنشاء المحتوى والترميز فحسب ، بل يشمل أيضا التصميم لإنشاء واجهة جميلة وسهلة الاستخدام. أحد عناصر التصميم المهمة هو الروابط المستخدمة للتنقل من صفحة إلى أخرى.
هناك خصائص مختلفة في كس للتحكم في مظهر الروابط. واحدة من الخصائص الأكثر شيوعا هو اللون ، والذي يسمح لك بتغيير لون نص الرابط. على سبيل المثال ، لتغيير لون نص الارتباط إلى اللون الأحمر ، يمكنك استخدام رمز كس التالي:
أ {اللون: أحمر;
}
خاصية أخرى مهمة هي زخرفة النص ، والتي تستخدم لإضافة أو إزالة العناصر الزخرفية إلى الروابط. على سبيل المثال ، لإزالة الشرطة السفلية تحت نص الارتباط ، يمكنك استخدام التعليمات البرمجية كس التالية:
أ {زخرفة النص: لا شيء;
}
هذه هي الخصائص الرئيسية التي يمكن استخدامها لتصميم الروابط. ومع ذلك ، يوفر كس خصائص أخرى تسمح لك بتخصيص الخلفية والحدود والهوامش والمزيد. يمكن أن تكون ميزات كس الإضافية مفيدة لإنشاء تصميم مثير للاهتمام أو للإشارة إلى حالة الارتباط (على سبيل المثال ، الرابط الذي نقر عليه المستخدم مؤخرا).
من المهم ملاحظة أنه عند تصميم الروابط ، يجب أن تأخذ في الاعتبار التباين بين لون النص والخلفية حتى يكون النص قابلا للقراءة. يوصى أيضا باستخدام نمط ثابت لجميع الروابط على الموقع لإنشاء انطباع مرئي موحد.
استخدام الفئات والمعرفات
الطريقة الأكثر فعالية لتغيير لون نص الارتباط في كس هي استخدام الفئات والمعرفات. تسمح لك الفئات والمعرفات بتحديد عناصر معينة على صفحة الويب وتطبيق الأنماط عليها.
الفصول الدراسية
يتم تعريف الفئات في كس باستخدام نقطة قبل اسم الفئة. على سبيل المثال ، لإنشاء فئة "الارتباط الأحمر" لارتباط مع نص أحمر ، تحتاج إلى إضافة التعليمات البرمجية التالية إلى ملف كس:
.رابط أحمر {
اللون: أحمر;
}
لتطبيق فئة على ارتباط ، أضف سمة الفئة بقيمة "الارتباط الأحمر" إلى العلامة :
الرابط
المعرفات
يتم تحديد المعرفات في كس باستخدام شبكة قبل اسم المعرف. على سبيل المثال ، لإنشاء معرف "رابط أزرق" لارتباط مع نص أزرق ، تحتاج إلى إضافة التعليمات البرمجية التالية إلى ملف كس:
# رابط أزرق {
اللون: أزرق;
}
لتطبيق معرف على ارتباط ، تحتاج إلى إضافة سمة معرف بقيمة "رابط أزرق" إلى العلامة :
الرابط
يسمح لك استخدام الفئات والمعرفات بتحديد وتغيير لون نص الرابط باستخدام كس ، مما يجعل الكود أكثر مرونة وسهولة في الاستخدام.
استخدام الفئات الزائفة لتغيير لون الارتباط
في كس ، يمكنك بسهولة تغيير لون نص الارتباط باستخدام الطبقات الزائفة. الفئات الزائفة هي كلمات رئيسية تتم إضافتها إلى المحددات وتسمح لك بتحديد العناصر في حالة أو سياق معين. يمكن أن تكون مفيدة لروابط التصميم اعتمادا على حالتها.
على سبيل المثال ، لتغيير لون الرابط عند التمرير فوقه بالماوس ، يمكنك استخدام الفئة الزائفة :تحوم. يتيح لك ذلك إنشاء تأثير متغير اللون عند التفاعل مع المستخدم.
لتطبيق النمط على الروابط عند التمرير فوقها بالماوس ، يمكنك استخدام رمز كس التالي:
ج: تحوم {
اللون: أحمر;
}
في هذا المثال ، عندما تحوم فوق ارتباط ، سيتحول النص الموجود بداخله إلى اللون الأحمر.
بالإضافة إلى الفئة الزائفة: تحوم ، هناك فئات زائفة أخرى يمكن استخدامها لتغيير لون الرابط في مواقف مختلفة. على سبيل المثال:
- : الرابط-ينطبق على الروابط غير المرغوب فيها
- : زار-ينطبق على الروابط التي تمت زيارتها
- : نشط-ينطبق على الروابط أثناء تفعيلها (عندما ينقر المستخدم على الرابط)
باستخدام هذه الفئات الزائفة ، يمكنك إنشاء أنماط مختلفة للروابط اعتمادا على حالتها. على سبيل المثال:
ج: رابط {
اللون: أزرق;
}
ج: زار {
اللون: بنفسجي;
}
ج: تحوم {
اللون: أحمر;
}
ج: نشط {
اللون: أخضر;
}
في هذا المثال ، ستكون الروابط التي لم تتم زيارتها باللون الأزرق ، وستكون الروابط التي تمت زيارتها باللون الأرجواني ، وستكون الروابط الموجودة على مؤشر الماوس باللون الأحمر ، وستكون الروابط أثناء التنشيط (عند النقر عليها) باللون الأخضر.
وبالتالي ، فإن استخدام الفئات الزائفة يجعل من السهل التحكم في لون نص الارتباط اعتمادا على حالته.
تغيير لون الرابط عند التمرير فوق المؤشر
كس لديه القدرة على تغيير نمط الارتباط عند التمرير فوق المؤشر ، والتي يمكن أن تكون مفيدة لإنشاء عناصر تفاعلية على صفحة ويب.
لتغيير لون نص الرابط عند التمرير فوق المؤشر ، تحتاج إلى استخدام الفئة الزائفة :تحوم. توفر هذه الفئة الزائفة القدرة على تعيين نمط عنصر عندما يحوم مؤشر الماوس فوقه.
يوجد أدناه مثال على رمز كس الذي يسمح لك بتغيير لون نص الارتباط عند تحريك المؤشر:
ج: تحوم {
اللون: أحمر;
}
في هذا المثال ، نستخدم المحدد أ:مرر مؤشر الماوس للإشارة إلى أنه سيتم تطبيق الأنماط على الروابط عند تحريك المؤشر فوقها. تحدد خاصية اللون لون نص الرابط ، في هذه الحالة ، أحمر.
وبالتالي ، عندما يحوم المؤشر فوق الارتباط ، سيتغير لون النص إلى اللون المحدد.
استخدام أنماط مدمجة لتغيير لون الارتباط
يمكنك استخدام الأنماط المضمنة لتغيير لون نص الارتباط في كس. يتم تعيين الأنماط المضمنة مباشرة في العلامة التي يجب تحديدها بالألوان.
هل من الممكن تغيير لون نص الرابط في حالات مختلفة (النقر ، الرابط الذي تمت زيارته ، إلخ.)?