الأنماط النشطة (Active)

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 10 من 43.

تطبق فئة :active الزائفة الأنماط على عنصر ما عندما يتم تنشيطه من قبل المستخدم، وعادةً ما يكون ذلك عندما ينقر المستخدم على عنصر ويستمر في الضغط على زر الماوس.

على سبيل المثال:

<button class="action-button">Click Me!</button>

أضف CSS لتنسيق الزر عندما يكون نشطاً:

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

عندما تنقر مع الاستمرار على الزر، سيتغير لونه من الأزرق إلى الأزرق الداكن. يوفر هذا للمستخدمين ملاحظات مرئية تفيد بأنه يتم تسجيل إجراءاتهم.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

اكتب CSS للفئة .special-link لإضافة الأنماط التالية عندما يكون الرابط نشطاً (active):

تغيير لون النص إلى #e74c3c
إضافة ظل للنص بقيمة 1px 1px 2px rgba(0,0,0,0.3)

ورقة مرجعية

تطبق الفئة الزائفة :active أنماطاً على عنصر ما عندما يتم تنشيطه من قبل المستخدم، وعادةً ما يكون ذلك عند النقر مع الاستمرار في الضغط على زر الماوس.

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

يوفر هذا تغذية راجعة مرئية تفيد بأن إجراء المستخدم قيد التسجيل.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.