تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: انشاء مظاهر ديناميكية


الصفحة السابقة

هذه إحدى نقاط قوتها: تتيح لنا CSS أيضًا تغيير مظهر العناصر ديناميكيًا ، أي أنه يمكن أن تتغير العناصر بمجرد تحميل الصفحة. سوف نستخدم ميزة قوية في CSS هي التنسيقات الزائفة (pseudo formats)

سنرى في هذا الفصل كيفية تغيير المظهر:

  • عند التحليق (تحليق مؤشر الماوس فوقه)
  • عند النقر عليه ؛
  • عند التركيز (العنصر المحدد) ؛
  • عندما تم الوصول إلى الرابط.

سترى أن لغة CSS لم تنته من مفاجأتنا!

عند التحليق


سوف نكتشف في هذا الفصل العديد من التنسيقات الزائفة CSS أول واحد سوف أعرضه عليك اسمه :hover. مثل كل التنسيقات الزائفة الأخرى التي سنراها ، فهذه هي المعلومات التي نضيفها بعد اسم العلامة (أو الفئة) في CSS ، مثل هذا:


a:hover
{  
}

:hoverيعني أن يطير فوق. a:hoverيمكن بالتالي ترجمتها كـ: "عندما يكون الماوس على الرابط" (عند الإشارة إليه).

من هناك ، الأمر متروك لك لتحديد المظهر الذي يجب أن تكون عليه الروابط عند الإشارة إليها. إعطاء حرية لخيالك ، لا يوجد حد.

فيما يلي مثال على عرض الروابط ، ولكن لا تتردد في اختراع عروضك:


a /* رابط عادي بدون تحليق */
{
    text-decoration: none;
    color: red;
    font-style: italic;
}

a:hover /* مظهر الرابط عند تحليق مؤشر الماوس فوقه */
{
    text-decoration: underline;
    color: green;
}    

لقد حددنا هنا نسختين من أنماط الروابط:

  • للروابط التلقائية (بدون تنسيق تحليق الماوس) ؛
  • للروابط مع تنسيق تحليق الماوس.

والنتيجة هي في الشكل التالي.

css html file

جميل أليس كذلك؟

رغم أنه يستخدم غالبًا في الروابط ، إلا أنه يمكنك تغيير مظهر أي عنصر. على سبيل المثال ، يمكنك تغيير مظهر الفقرات عندما تشير إليها:


p:hover /* عندما نحلق بالماوس فوق فقرة */
{

}    

عند النقر وأثناء الاختيار


يمكنك التفاعل بشكل أكثر دقة في CSS. سنرى هنا أنه يمكننا تغيير مظهر العناصر عندما نضغط عليها وعندما يتم تحديدها!

:ACTIVE: في لحظة النقر

:activeيسمح التنسيق الزائف بتطبيق نمط معين في وقت النقر . في الممارسة العملية ، يتم استخدامه فقط على الروابط.

سيبقي الرابط هذا المظهر قصيرًا جدًا: في الواقع ، يحدث التغيير عند الضغط على زر الماوس. من الواضح أنها ليست بالضرورة ظاهرة دائمًا.

على سبيل المثال ، يمكننا تغيير لون خلفية الرابط عندما نضغط عليه:


a:active /* Quand le visiteur clique sur le lien */
{
    background-color: #FFCC66;
}    
:FOCUS: عند تحديد العنصر

هنا ، الأمر مختلف قليلاً. :focusيطبق التنسيق الزائف نمطًا عند تحديد العنصر .

ما معنى هذا القول؟

بمجرد النقر ، يظل الارتباط "محددًا" (توجد حدود متقطعة صغيرة من حوله). هذا هو الاختيار. قد يتم تطبيق هذا التنسيق الزائف على علامات HTML الأخرى التي لم نرها بعد ، مثل عناصر النموذج. دعونا نحاول في الوقت الراهن على الروابط:


a:focus /* عندما يختار المستخدم الرابط */
{
    background-color: #FFCC66;
}    
في Google Chrome و Safari ، يكون التأثير مرئيًا فقط عند الضغط على المفتاح Tab.
عندما يكون قد تم بالفعل عرض الرابط

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


a:visited /* عندما يكون المستخدم قد زار الرابط */
{
    color: #AAA; /* ضع اللون الرمادي */
}
css html file

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

الخلاصة


  • في CSS ، يمكنك تغيير مظهر أقسام معينة بشكل ديناميكي ، بعد تحميل الصفحة ، عند حدوث أحداث معينة. نحن نستخدم لهذا التنسيقات الزائفة.
  • :hoverيسمح لك التنسيق الزائف بتغيير المظهر عند تحليق مؤشر الماوس على العنصر (على سبيل المثال: a:hoverلتغيير مظهر الروابط عندما يشير الماوس عليه)
  • :activeيغير التنسيق الزائف ظهور الارتباطات في وقت النقر ، :visitedعندما يكون قد تم زيارة رابط بالفعل.
  • :focusيسمح التنسيق الزائف بتعديل مظهر العنصر المحدد.