بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
السلام عليكم ورحمة الله وبركاته
شرح الوضعية الثابتة
position fixed
الوضعية الثابتة تسمح للعنصر بالظهور ثابتا في مكان معين على الشاشة حتى ولو طال تصفح الصفحة لكثرة محتوياتها يبقى هذا العنصر ظاهرا.
سنجرب ذلك مع صفحة طويلة ومليئة بالنصوص وسننشئ فيها ديفا في الأعلى وديفا في الأسفل ثم نثبتهما :
في الأول سنقوم بعمل تنسيقات عادية:
وهذه هي النتيجة:
وكما ترى البلوك bottom لا يمكن أن يظهر إلا بعد عمل scrolling وفي هذه الحالة سيختفي البلوك top ، لذا سنستخدم الخاصية position وسنعطيها القيمة fixed لكلا البلوكين ونحدد مكان تواجدهما المطلق بالنسبة لأبعاد الشاشة هذه المرة وليس المتصفح ، وهذا هو التنسيق الجديد:
وهذه هي النتيجة المنتظرة:
كما ترى تمكنا من تثبيت البلوك العلوي والبلوك السفلي معا ، وتجدر الإشارة إلى ضرورة استخدام قيم لخصائص top و bottom و right و left لتحديد مكان التثبيت.
مؤشر الفأرة
cursor
يمكننا في لغة css التحكم في شكل ظهور مؤشر الفأرة ، باستخدام الخاصية cursor .
الخاصية cursor : تتحكم في شكل ظهور مؤشر الفأرة عند مروره فوق العنصر ،
وتأخذ إحدى القيم التالية :
pointer
help
crosshair
move
n-resize
se-resize
e-resize
s-resize
n-resize
sw-resize
w-resize
nw-resize
text
أشهرها القيمة pointer وهي علامة اليد التي تظهر فوق الروابط ، والقيم الأخرى يمكن استخدامها إذا دعت الحاجة إليها لذا جربها كلها من أجل المعرفة .
سنكتب كل هذه القيم في مثال عملي من أجل المعرفة فقط ، أما التجربة فغير ممكنة في درس مكتوب لاستحالة تصوير مؤشر الفأرة على أكثر من عنصر ، لكن يمكنكم تجربة ذلك بأنفسكم.
ليكن كود html التالي:
ديفات بكلاس واحدة من أجل التنسيقات الموحدة ، وسنستخدم id للخاصية cursor ، وهذا هو التنسيق:
وهذه هي النتيجة:
مرر مؤشر الماوس على كل ديف على حدا وسترى أنه سيظهر على كل ديف بشكل مختلف.
نكتفي بهذا القدر، وموعدنا في الدرس القادم مع أولى دروس المعرفات المتقدمة advanced selectors ، وفي انتظار ذلك دمتم في رعاية الله وحفظه.