Ibrahem Smart
زيزوومى ذهبى
غير متصل
من فضلك قم بتحديث الصفحة لمشاهدة المحتوى المخفي
مرحبا إخوتي أعضاء منتديات زيزووم للأمن والحماية
اليوم سأشرح لكم في دورة تعلم لغة 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
فسنجد أن النصوص أصبحت على سطر واحد (انلاين)
ويوجد أيضًا الكثير من التاغات تكون انلاين مثل الصور والروابط وقيم أخرى يمكنك أيضًا البحث عنها.
