درس دورة تعلم لغة CSS | Display - الجزء الأول (16)

المصدر: دورة تعلم لغة CSS | Display - الجزء الأول (16)
في منتدى : منتدى الدّورات العامّة ولُغات البرمجة

مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
اليوم سأشرح لكم في دورة تعلم لغة CSS

Display
طريقة عرض العنصر

------------------------------------------------------------

خاصية Display بسيطة جدًا وليست في قمة الصعوبة التي تتخيلها، كل ما عليك فقط هو فهمها جيدًا وفهم عمل كل خواصها.
وتسمى خاصية Display بهذا الاسم لانها تحدد لك طريقة عرض العنصر / العناصر وقد تخفيهم لك تمامًا.
قد تجد أن مفهومها صعبٌ أيضًا، لكن مع الأمثلة وكثر الأستخدام ستجد أن الخاصية بسيطة جدًا، وقبل أن نبدأ في الشرح يجب أن تعرف أن خاصية Display تأخذ عديد من القيم في محرر Brackets.



لكنك حاليًا ستتعلم عدد قليل من القيم والتي هي الأهم والأكثر استعمالاً وقد لا تستعمل باقي القيم عند تعرفك عليهم جيدًا، القيم التي سنحتاجها وسوف نتعلمها جيدًا هي ( inline & block & inline-block & none & table ) وتم تقسيم الخاصية لدرسين في الدرس الأول (الجزء الأول) سنتعلم قيمتين فقط وهم (inline & block) وأسف لعدم شرح كل القيم نظرًا لأنشغالي بظروف كثيرة.

block

نبدأ الشرح بقيمة block ومعناها ( جعل العناصر فوق بعضها & بشكل عمودي ) فمثلًا لدي 3 روابط هنا في الصفحة ولكنهم على سطر واحد فقط





عندما أعطي تاغ a الخاص بالروابط خاصية Display بقيمة بلوك block



سيتغير شكل العرض من روابط على سطر واحد إلى روابط منفصلة بشكل عمودي



لكن يوجد بعض التاغات في HTML تقوم بجعل طريقة عرضها بلوك بدون أي تدخل منك مثل الديف (div) وخواص أخرى يمكنك البحث عن العناصر البلوك في اللغة لمعرفة معلومات أكثر.

inline

أما القيمة الأخرى وهي قيمة inline وهي عكس قيمة block تمامًا فخاصية بلوك تجعل العناصر بشكل عمودي أما خاصية inline تجعل العناصر بشكل أفقي أي أن خاصية inline تجعل العناصر على سطر واحد وخاصية بلوك تجعلهم كل عنصر على سطر بمفرده.

واليكم مثال فمثلًا سأقوم بعمل 3 ديف كل ديف فيه نص



فسيظهرون في الصفحة بشكل بلوك لأن خاصية ديف تعرض بلوك

لأقوم بتحويلهم من بلوك اللى انلاين سنقوم بإضافة لهم خاصية Display بقيمة inline



فسنجد أن النصوص أصبحت على سطر واحد (انلاين)



ويوجد أيضًا الكثير من التاغات تكون انلاين مثل الصور والروابط وقيم أخرى يمكنك أيضًا البحث عنها.

 

الشكر الجزيل لك أخي