التحكم في تأثيرات الـCSS الديناميكية

من نقاط القوة التي تميز لغة الـCSS قدرتها على تعديل مظهر العناصر بصفة ديناميكية ، بمعنى أنه يمكن أن تتغير بعض خصائص عناصر معينة لمجرد النقر عليها مثلا ، أو تمرير مؤشر الفأرة عليها ، و هذه الإمكانية تمكننا من خلق تأثيرات ديناميكية جميلة في صفحاتنا .

سنعرف في هذا الفصل على بعض الأشياء غير العادية ( إن لم نقل خصائص  ) و التي ستمكننا من تحسين مواقعنا و جعلها أكثر ديناميكية و أكثر تفاعلية مع الزوار .

الفهرس

1. التنسيق hover ( التحوم ) .
2. التنسيق Active ( مفعل ) .
3. التنسيق visited ( تمت زيارته ) .

---

التنسيق hover ( التحوم )

ظهر لدينا في الفهرس مصطلح جديد و هو " التنسيق " ، بالطبع نحن نعرف معناه و لكن في لغة الـCSS فإن هذه الكلمة ترمز إلى شيء اخر ، و " التنسيق " هو كلمة نظيفها بعد محددات الـCSS بالشكل التالي :

a:format { css styles }

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

التنسيق hover
حسنا !! كما رأينا سابقا نضع هذا التنسيق بعد المحددة كما يلي :

a:hover { CSS Styles }

بعد إضافة التنسيق hover فإن الخصائص التي وضعناها للعنصر <a> في المثال لن تظهر في الصفحة مباشرة ، بل إنها ستظهر فقط عند تمرير مؤشر الفأرة فوق العنصر <a> ، و هذا هو دور التنسيق hover تماما ، كما لو أننا نقول للحاسوب : قُم بتطبيق هذه الخصائص فقط عندما نمرر مؤشر الفأرة فوق العنصر .
لنشاهد المثال التالي :

a { 
    color: blue;
    font: 500 14px tahoma;
}
a:hover {
    color: red;
    background: #FF9;
}

النتيجة :   قم بتمرير مؤشر الفأرة على الرابط

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

---

التنسيق Active ( مفعل )

التنسيق Active يجعل الخصائص تظهر عند النقر على العنصر ، فبمثل طريقة عمل التنسيق السابق hover ، نضع active بعد المحددة :

p:active { color: orange; }

النتيجة :

قم بالنقر على هذا النص

المسألة واضحة لذلك لا داع لكثرة الكلام .

---

التنسيق visited

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

a:visited { color: #999; }

النتيجة : أمامك الرابط التالي : www.iconarchive.com ، رابط يظهر مثل باقي الروابط العادية .
قم الآن بالنقر عليه ثم شاهد أنه قد غير لونه . فذلك يدل على أنك قد قمت بزيارته مسبقا ، و هذا هو عمل التنسيق visited بكل بساطة  .

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

→ الفصل التالي الفصل السابق ←